1<!DOCTYPE html><html lang="fr-CA"><head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 4 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 5 <title data-l10n-id="site-title">Révolution communiste</title> 6 <link rel="icon" type="image/png" href="/assets/favicon.png"> 7 <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"> 8 <link rel="preconnect" href="https://fonts.googleapis.com"> 9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> 10 <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;0,600;0,700;1,500&family=Teko:[email protected]&display=swap" rel="stylesheet"> 11 <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 13 <link rel="stylesheet" href="/library/theme/buttons.css"> 14 <link rel="stylesheet" href="/library/theme/search-bar.css"> 15 <link rel="stylesheet" href="/library/theme/financial-collection.css"> 16 <link rel="stylesheet" href="/library/theme/texts.css"> 17 <link rel="stylesheet" href="/library/theme/utils.css">
18<script> 19if (!window.october) window.october = {}; 20window.october.environment = {}; 21window.october.environment.type = 'prod'; 22window.october.environment.language = 'fr-CA'; 23</script>
vendor: 67 bytes, lines 23-24
23 24<script async="" src="https://www.googletagmanager.com/gtag/js?id=
24UA-142553361-3
vendor: 12 bytes, line 24
24"></script>
25<script> 26
vendor: 144 bytes, lines 26-33
26window.dataLayer = window.dataLayer || []; 27 28 function gtag() { 29 dataLayer.push(arguments); 30 } 31 gtag('js', new Date()); 32 33 gtag('config', '
33UA-142553361-3
vendor: 4 bytes, line 33
33');
34</script>
34 35
36<script src="https://cdn.jsdelivr.net/npm/@fluent/[email protected]/index.js"></script>
vendor: 1 bytes, line 36
36
37<script type="module"> 38 import { getFluentBundle } from "/library/browser/fluent.ts"; 39 40 const source = `## Basic variables 41 42-brand-name = Révolution communiste 43-brand-name-international = Défense du Marxisme 44-issue-marker = Ãdition 45-number-format-symbol = Nº 46-url-archive = /archive 47-url-contributions = /contributions 48-url-build-article = /article/comment-construire-une-cellule-communiste 49-url-donate = /donner 50-url-education = /education 51-url-join = /rejoindre 52-url-category = /categorie 53-url-mailto-contributions = mailto:[email protected] 54-url-newsletter = https://revcommuniste.substack.com/ 55-url-program = /programme 56-url-store = https://catalogue.marxiste.qc.ca/fr 57-url-store-packs = {-url-store}/collections/construire-le-parti 58-url-store-books = {-url-store}/collections/livres 59-url-store-apparel = {-url-store}/collections/vetements 60-url-social-facebook = https://www.facebook.com/revcommuniste 61-url-social-instagram = https://www.instagram.com/revcommuniste 62-url-social-spotify = http://tinyurl.com/bdzjekwz 63-url-social-tiktok = https://www.tiktok.com/@revcommuniste 64-url-social-x = https://twitter.com/RevCommuniste 65-url-social-youtube = https://www.youtube.com/@revcommuniste 66-url-subscribe = /abonnement 67-url-subscribe-idom = {-url-subscribe}#ddm 68-url-subscribe-checkout = {-url-subscribe}/commande 69-url-translated-root = https://marxist.ca 70-url-write = /contribuer 71-url-marxist-com = https://marxist.com 72-link-contributions = marxiste.qc.ca/contribuer 73-email-contributions = [email protected] 74-mailto-contributions = mailto:{-email-contributions} 75 76## Multi-page strings 77 78site-title = {-brand-name} 79site-description = Site web de Révolution communiste, le journal du Parti communiste révolutionnaire au Québec et au Canada. Es-tu communiste? Rejoins ton parti! 80x-username = RevCommuniste 81 82 83## Top-level navigation 84 85nav_logo = 86 .alt = Logo de Révolution communiste, la voix du Parti communiste révolutionnaire 87 .src = /assets/navigation/revolution-communiste-logo-horizontal.svg 88nav_cta = Devenir membre 89 .href = {-url-join} 90nav_home = Accueil 91nav_get-organized = Participer 92nav_get-org-biya = Construis dans ta région 93 .href = {-url-build-article} 94nav_get-org-wtu = Ãcris-nous 95 .href = {-url-write} 96nav_get-org-donate = Faire un don 97 .href = {-url-donate} 98nav_get-org-op = Notre programme 99 .href = {-url-program} 100nav_get-org-atj = Devenir membre! 101 .href = {-url-join} 102nav_news = Nouvelles et analyses 103nav_by-location = Région 104nav_by-location-canada = Québec et Canada 105nav_by-location-international = International 106nav_by-topic = Sujet 107nav_theory = Théorie et éducation 108 .href = {-url-education} 109nav_store = Catalogue 110 .href = {-url-store} 111nav_language-toggle-self = FR 112nav_language-toggle-other = EN 113 .href = {-url-translated-root} 114 115## Homepage: Hero 116 117hero_logo = 118 .alt = Logo de Révolution communiste, la voix du Parti communiste révolutionnaire 119 .src = /assets/homepage-hero/logo-fr.svg 120hero_subhead = Es-tu communiste? Rejoins le PCR! 121 122hero-nav_subscribe = Sâabonner 123 .href = {-url-subscribe} 124hero-nav_donate = Faire un don 125 .href = {-url-donate} 126hero-nav_educate = S'éduquer 127 .href = {-url-education} 128hero-nav_write-to-us = Ãcris-nous 129 .href = {-url-write} 130hero-nav_build = Construis dans ta région 131 .href = {-url-build-article} 132hero-nav_join = Devenir membre 133 .href = {-url-join} 134 135 136## Homepage: Article Feed 137 138article-feed_title = Dernier article 139article-feed_contributions-title = Contributions 140article-feed_contributions-leader = Nous voulons tâentendre. <a data-l10n-name="write-us-link" href="{-url-write}">Ãcris-nous!</a> 141article-feed_video-title = Vidéo 142article-feed_more-articles = <oc-with-icon data-l10n-name="more-text">Plus dâarticles</oc-with-icon> 143 .href = {-url-archive} 144article-feed_more-videos = <oc-with-icon data-l10n-name="more-text">Plus de vidéos</oc-with-icon> 145 .href = {-url-social-youtube} 146article-feed_more-contributions = <oc-with-icon data-l10n-name="more-text">Plus de contributions</oc-with-icon> 147 .href = {-url-contributions} 148 149 150## Homepage: Content Hub 151 152content-hub_title = La révolution se prépare 153content-hub_socials_title = Suis nos pages de médias sociaux 154 155event_hub-title = Prochains événements 156event_hub-none-scheduled = Aucun événement planifié pour lâinstant 157event_hub-scroll = Faire défiler 158 159event_no_location = Lieu à déterminer 160event_no_date = Date à déterminer 161event_no_time = Heure à déterminer 162event_no_region = Région à déterminer 163 164 165## Homepage: Promo Cards 166 167promo-book_cta = Acheter maintenant 168 169promo-paper_issue = {-issue-marker} 170promo-paper_number = {-number-format-symbol} 171promo-paper_title = {-brand-name} 172promo-paper_cta = Procure-toi une copie 173 174promo-newsletter_headline = Abonne-toi à notre infolettre 175promo-newsletter_subtitle = Pour suivre les activités du PCR, nos récents articles et podcasts, et plus encore! 176promo-newsletter_img = 177 .src = /assets/promo-cards/newsletter-fr.svg 178promo-newsletter_cta = Abonne-toi 179 .href = {-url-newsletter} 180 181promo-podcast_heading = Le podcast officiel du PCR 182promo-podcast_latest-episode = Dernier épisode 183promo-podcast_podcast-name = Parti pris 184promo-podcast_cta = Ãcouter maintenant 185 186 187## Homepage: education hub 188 189marxist-theory_title = Théorie marxiste 190marxist-theory_author = Vladimir Lénine 191marxist-theory_quote = Sans théorie révolutionnaire, pas de mouvement révolutionnaire. 192marxist-theory_overview = La lutte des classes se déroule sur trois fronts : économique, politique et théorique. Le marxisme est une arme inestimable pour tout militant ouvrier révolutionnaire. Si tu souhaites aiguiser ta compréhension des idées révolutionnaires, commence ici! 193 194education-hub_title = Le coin éducation 195education-hub_description = Retrouve en un point centralisé des articles théoriques, des classiques du marxisme, des guides de lecture, des podcasts et des vidéos sur un large éventail de sujets. 196education-hub_cta = Commence ton éducation 197 .href = {-url-education} 198 199store-title = Le catalogue de Révolution communiste 200 201store_party-building = Bâtir le parti 202 .href = {-url-store-packs} 203store_party-building-desc = Procure-toi le matériel essentiel pour bâtir le parti dans ta région 204 205store_books = Livres 206 .href = {-url-store-books} 207store_books-desc = Parcours notre collection de livres marxistes 208 209store_apparel = Vêtements 210 .href = {-url-store-apparel} 211store_apparel-desc = Affiche ton appui à la révolution! 212 213 214# Homepage: wide cards 215 216wide-promo-national-paper_issue = {-issue-marker} 217wide-promo-national-paper_number = {-number-format-symbol} 218wide-promo-national-paper_title = Journal {-brand-name} 219wide-promo-national-paper_cta-buy = Obtiens ta copie 220wide-promo-national-paper_cta-subscribe = Sâabonner 221 .href = {-url-subscribe} 222 223wide-promo-international-paper_issue = {-issue-marker} 224wide-promo-international-paper_number = {-number-format-symbol} 225wide-promo-international-paper_title = Revue {-brand-name-international} 226wide-promo-international-paper_cta-buy = Obtiens ta copie 227wide-promo-international-paper_cta-subscribe = Sâabonner 228 .href = {-url-subscribe-idom} 229 230
231## Homepage: join form 232 233join-form_title1 = Je veux rejoindre 234join-form_title2 = les communistes! 235 236join-form_label-name = Nom 237join-form_label-email = Courriel 238join-form_label-phone = Téléphone 239join-form_label-social-media = Profil sur les médias sociaux (URL) 240join-form_label-city = Ville 241join-form_label-province = Province 242join-form_label-neighborhood-campus = Quartier/campus 243join-form_label-lead-source = Comment as-tu entendu parler de nous? 244join-form_label-why = Pourquoi veux-tu nous rejoindre? 245join-form_label-how = Comment peux-tu aider à construire le Parti communiste révolutionnaire? 246join-form_label-submit = Rejoindre maintenant! 247 248join-form_error-field-required = Veuillez remplir ce champ obligatoire 249join-form_error-generic = Il semble y avoir un problème. Vérifier tous les champs, puis réessayer. Si le problème persiste, merci dâenvoyer un courriel à <a data-l10n-name="error-email" href="mailto:[email protected]">[email protected]</a> avec une explication du problème. 250 251join-form_success-title = Nous avons bien reçu ta candidature. Merci! 252join-form_success-leader = Un de nos militants communiquera avec toi dâici 24 à 48h. 253join-form_success-next-steps-header = Dâici là : 254join-form_success-next-steps-subscribe = Abonne-toi à notre <a data-l10n-name="sub-national" href="{-url-subscribe}">journal mensuel</a> ou à notre <a data-l10n-name="sub-international" href="{-url-subscribe-idom}">magazine théorique trimestriel</a>. 255join-form_success-next-steps-podcast = Ãcoute notre <a data-l10n-name="podcast" href="{-url-social-spotify}">podcast</a> et abonne-toi à notre chaîne. 256join-form_success-next-steps-read = Lis nos derniers articles et partage-les sur les réseaux sociaux. 257 258join-form_follow-header = Suis-nous 259 260 261## Homepage: Trotsky banner 262 263trotsky-banner_quote = « La vie est belle. Que les générations futures la nettoient de tout mal, de toute oppression et de toute violence, et en jouissent pleinement. » 264trotsky-banner_author = Léon Trotsky 265 266 267## Article page 268 269article_root-breadcrumb = Nouvelles et analyses 270 .href = {-url-archive} 271article_root-breadcrumb-current-url = 272 .href = {-url-category}/{ $category } 273article_share-dropdown-title = Partager 274article_share-copy-link = Copier lien 275article_share-share-x = Partager sur X 276article_share-share-facebook = Partager sur Facebook 277 278article_context-related-articles-heading = Lire plus sur le sujet 279article_context-top-articles-heading = Les plus consultés 280 281 282## Footer 283 284footer-logo_horizontal = 285 .src = /assets/footer/brand/revolution-communiste-logo-horizontal.svg 286 .alt = Logo de Révolution communiste, la voix du Parti communiste révolutionnaire 287 288footer-logo_initials = 289 .src = /assets/footer/brand/rc-logo-initials.svg 290 .alt = Logo de Révolution communiste, la voix du Parti communiste révolutionnaire 291 292footer-links_join = Rejoindre 293 .href = {-url-join} 294footer-links_subscribe = Sâabonner 295 .href = {-url-subscribe} 296footer-links_donate = Faire un don 297 .href = {-url-donate} 298footer-links_program = Notre programme 299 .href = {-url-program} 300footer-links_store = Catalogue 301 .href = {-url-store} 302 303footer-social-links_instagram = 304 .href = {-url-social-instagram} 305footer-social-links_tiktok = 306 .href = {-url-social-tiktok} 307footer-social-links_youtube = 308 .href = {-url-social-youtube} 309footer-social-links_spotify = 310 .href = {-url-social-spotify} 311footer-social-links_x = 312 .href = {-url-social-x} 313footer-social-links_facebook = 314 .href = {-url-social-facebook} 315 316 317## Social icons 318 319social-icon_instagram = 320 .href = {-url-social-instagram} 321social-icon_tiktok = 322 .href = {-url-social-tiktok} 323social-icon_youtube = 324 .href = {-url-social-youtube} 325social-icon_spotify = 326 .href = {-url-social-spotify} 327social-icon_x = 328 .href = {-url-social-x} 329social-icon_facebook = 330 .href = {-url-social-facebook} 331 332 333search = recherche 334 .placeholder = Tapez votre recherche 335search_by-relevance = Par pertinence 336search_by-date = Par date 337search_label = Rechercher 338search_today = Aujourd'hui 339search_article = Article de 340search_contribution = Contribution de 341search-bar_clear = Effacer 342search-bar_more = Voir tous les résultats 343search-results_title = Rechercher 344search-results_more = Appuyez sur Entrée pour afficher tous les résultats. 345search-results_click-more = Voir tous les résultats 346search_no-results-title = Aucun résultat 347search_no-results-message = Aucun résultat ne correspondant à votre recherche. Essayez autre chose. 348 349# Article loader button 350 351article-loader-button_no-action = Fin de la liste 352article-loader-button_load-more = Voir plus dâarticles 353 354load-more = Voir plus dâarticles 355 356# Financial collection 357 358financial-collection_title = Aide à financer le PCR! 359financial-collection_amount = Montant 360financial-collection_frequency_monthly = Mensuel 361financial-collection_frequency_onetime = Don unique 362financial-collection_read-more-opt-text = à propos de la campagne de financement 363financial-collection_progress-complete = { $campaign-total }  <b>objectif atteint!</b> 364financial-collection_donate-long = Faire un don maintenant 365financial-collection_donate-short = Faire un don 366 367# Join page 368 369join-page_title = Rejoins les communistes! | Révolution communiste 370join-page_heading = Es-tu <em>communiste?</em> Si oui, rejoins-nous! 371join-page_action-button = Je veux rejoindre 372join-page_subhead1 = Les communistes à travers le pays sâunissent au sein du Parti communiste révolutionnaire 373join-page_subhead2 = Si tu es communiste et que tu veux nous aider à renverser ce système, tu dois rejoindre le parti. 374join-page_lead-photo = 375 .alt = Drapeau rouge communiste flotte devant une masse de manifestant 376join-page_lead1 = 377 Le capitalisme nous dirige droit vers le précipice. Tous les pans de la société se détériorent. Où que lâon regarde, on 378 peut voir la guerre, la pauvreté, lâexploitation. Une génération entière nâa connu que la crise, les coupes et la 379 catastrophe climatique. Et pourtant, les riches continuent de sâenrichir à une vitesse vertigineuse. 380join-page_lead2 = 381 Devant cette situation, des millions de gens commencent à réaliser que la source du problème est le capitalisme. Plus 382 dâun million de jeunes au Canada sont aujourdâhui dâavis que le communisme est le système économique idéal. 383join-page_body-photo = 384 .alt = Camarades au congrès de fondation du PCR en mai 2024 385join-page_body-heading = Il nous <em>faut</em> un parti! 386join-page_body1 = 387 La classe ouvrière commence à riposter. Des révolutions et des soulèvements populaires éclatent dans un pays après 388 lâautre. Ce nâest quâune question de temps avant que cela se produise ici aussi. La patience des travailleurs a une 389 limite. 390join-page_body2 = 391 Mais on ne pourra pas se débarrasser du capitalisme sur un coup de tête. Pour y arr
391iver, les travailleurs auront 392 besoin dâêtre guidés par un parti révolutionnaire. Voilà pourquoi nous travaillons à bâtir le leadership 393 révolutionnaire dont la classe ouvrière a besoin : le PCR. 394join-page_body3 = 395 Rejoins-nous. Isolés, nous ne pouvons rien faire – unis, nous pouvons changer le monde. Rejoins le 396 Parti communiste révolutionnaire et battons-nous pour jeter ce système pourri à la poubelle de lâhistoire. 397join-page_map-heading = Trouve des <em>communistes</em> près de toi 398 399# Contributions Page 400 401contributions-header = 402 .data-text = Contributions 403contributions-title = Ãcris pour Révolution communiste! 404contributions-about = Les membres du PCR bâtissent les forces du communisme à travers le pays. Tu trouveras ici des rapports sur notre activité révolutionnaire. As-tu une contribution à partager? Nous voulons entendre ce que tu as à dire! Envois tes contributions à <a data-l10n-name="contributions-link" href="{-url-write}">{-link-contributions}</a> 405 406# Program Page 407program-page_title = Ce pour quoi nous nous battons 408program-page_body-heading = Ce pour quoi nous nous <em> battons </em> 409 410program-page_our-program-image = 411 .alt = Camarades au congrès de fondation du PCR en mai 2024 412program-page_photo1 = 413 alt = RCP comrades at a rally in Toronto 414program-page_photo2 = 415 alt = RCP comrades with the Communist Revolution paper in Toronto 416program-page_photo3 = 417 alt = RCP comrades with the Communist Revolution paper in Toronto 418program-page_photo4 = 419 alt = RCP comrades at a pro-palestinian rally in Toronto 420 421program-page_header = Notre programme 422 423program-page_lead1 = 424 Le système capitaliste est la cause première de la pauvreté, du racisme, de la violence, de la destruction de lâenvironnement et de la guerre. 425 Les communistes luttent pour renverser ce système pourri et le remplacer par une nouvelle société sans classes basée sur le principe « de chacun selon ses capacités, à chacun selon ses besoins ». 426 427program-page_lead2 = 428 Pour y parvenir, nous luttons pour un gouvernement ouvrier basé sur le programme suivant. 429 La tâche du Parti communiste révolutionnaire est de jeter les bases dâun parti communiste de masse, qui permettra à la classe ouvrière de mettre en Åuvre ce programme. 430 431program-page_body1 = 432 <strong>Mettons fin à la dictature patronale !</strong> 433 Exproprier les 200 plus grandes 434 entreprises. Pour un plan de 435 production socialiste démocratique 436 sous gestion et contrôle ouvriers. 437 438program-page_body2 = 439 <strong>Pas de pauvreté parmi lâabondance !</strong> 440 Exproprier les banques et 441 rebâtir les services sociaux, les 442 infrastructures et le système de 443 santé en ruine. 444 445program-page_body3 = 446 <strong>Sauvons la planète en planifiant lâéconomie !</strong> 447 Mettre en Åuvre une expansion 448 massive de la production et une 449 transition vers les énergies propres 450 sans pertes dâemplois. Bâtir un 451 réseau massif de transports en 452 commun gratuits. 453 454program-page_body4 = 455 <strong>Mettons fin à la crise du logement !</strong> 456 Exproprier les propriétaires 457 et promoteurs parasitaires. 458 Faire payer les patrons pour un 459 programme à grande échelle de 460 construction de logements. 461 462program-page_body5 = 463 <strong>Des bons emplois pour tous !</strong> 464 Ãtablir un salaire minimum de 465 deux tiers du salaire moyen indexé 466 sur lâinflation. Fixer lââge de la 467 retraite à 55 ans et instaurer la 468 semaine de 30 heures sans perte 469 de salaire. 470 471program-page_body6 = 472 <strong>De lâéducation gratuite pour tous !</strong> 473 Annuler toutes les dettes 474 étudiantes. Placer les écoles et 475 les universités sous le contrôle 476 démocratique des enseignants, du 477 personnel et des étudiants. 478 479program-page_body7 = 480 <strong>Combattons toutes les formes dâoppression !</strong> 481 Mettre fin aux politiques 482 dâimmigration et aux contrôles 483 aux frontières racistes. Un salaire 484 égal pour un travail égal. Pour des 485 services de garde et des soins de 486 santé reproductive gratuits et de
487 qualité, y compris l'avortement. 488 489program-page_body8 = 490 <strong>Pour une solution communiste à lâoppression des Autochtones !</strong> 491 Arrêtons lâempiètement capitaliste 492 sur les réserves. Mettons fin à 493 la pauvreté, à lâintérieur et à 494 lâextérieur des réserves. 495 496program-page_body9 = 497 <strong>Pour une union socialiste volontaire des peuples !</strong> 498 En finir avec lâÃtat fédéral 499 capitaliste qui opprime à la 500 fois les travailleurs québécois 501 et canadiens. Le droit à 502 lâautodétermination du Québec. 503 504program-page_body10 = 505 <strong>Renversons les fauteurs de guerre !</strong> 506 Arrêtons la course folle vers 507 la guerre. Pas un sou pour les 508 bombes. Aucun soutien au régime 509 meurtrier dâIsraël. 510 511# Contribution Write page 512 513contribution-write_title = Ãcrire pour Révolution communiste 514contribution-write_hero = Ãcrivez-nous 515contribution-write_heading = Ãcrire pour <em>Révolution communiste</em> 516contribution-write_lead-1 = <em>Révolution communiste</em> a besoin de contributions de ses lecteurs. En particulier, nous 517 souhaitons publier des contributions qui présentent le point de vue des travailleurs sur la réalité du capitalisme. 518 Cela ajoute de la couleur et des détails à nos éditoriaux et articles théoriques, et donne vie aux pages du journal. 519contribution-write_lead-2 = Envoyez-nous de courtes lettres qui illustrent les injustices quotidiennes de la vie sous le 520 capitalisme, démasquent l'hypocrisie et les mensonges des patrons et de leurs représentants politiques, et montrent la 521 colère explosive qui couve juste sous la surface de la société. Faites-nous part des luttes dans votre région, des 522 piquets de grève et des manifestations auxquels vous avez participé, des anecdotes significatives sur votre lieu de 523 travail, ou aidez-nous à illustrer le journal avec des dessins et des photos ! 524contribution-write_lead-3 = En utilisant ce formulaire, vous acceptez d'accorder au comité de rédaction de <em>Révolution 525 communiste</em> le droit de publier votre contribution, en partie ou en totalité. Cependant, nous ne publions pas toutes 526 les contributions. Nous recevons de nombreuses lettres chaque mois, nous ne pouvons donc pas toutes les publier. Mais 527 chaque lettre compte : nous les lisons toutes et chacune d'entre elles nous aide à mieux comprendre l'évolution de la 528 société. Le comité de rédaction se réserve également le droit de modifier le matériel avant sa publication. 529contribution-write-form_contact-information_full-name_label = Nom complet 530contribution-write-form_contact-information_full-name_information = Merci d'indiquer si vous utilisez un pseudonyme ou 531 si vous souhaitez rester anonyme. 532contribution-write-form_contact-information_email_label = Adresse courriel 533contribution-write-form_contact-information_phone_label = Numéro de téléphone 534contribution-write-form_contact-information_city_label = Ville 535contribution-write-form_contact-information_province_label = Province 536contribution-write-form_contact-information_neighbourhood_label = Quartier et syndicat, lieu de travail ou école 537contribution-write-form_contact-information_contribution-type_label = Quel genre de contribution souhaitez-vous nous envoyer? 538contribution-write-form_contact-information_title_label = Titre ou sujet 539contribution-write-form_contact-information_content_label = Texte de la contribution 540contribution-write-form_contact-information_content_description = 541 Ãcrivez dans un style simple et accessible. Si vous vous adressiez directement à un jeune nouveau au communisme ou à un 542 travailleur nouvellement radicalisé, vous trouverait-il intéressant et authentique? 543contribution-write-form_contact-information_content_information = { $max } mots maximum. 544contribution-write-form_dropzone_file_label = Téléverser des photos ou fichiers vidéo ou audio pour accompagner votre contribution 545contribution-write-form_dropzone_instruction = Glisser et déposer vos fichiers ici ou <span data-l10n-name="contribution-write-form_dropzone_instruction_underline">parcourir vos fichiers</span> 546contribution-write-form_dropzone_instruction-alt = Cliquer pour téléverser 547contribution-write-form_dropzone_information = 548 Taille maximum de 5 Mo. Types de fichiers acceptés : .aac, .avi, .jpg, .mov, .mp3, .mp4, .mpeg, .png, .svg, .webm, .webp. 549contribution-write-form_submit = Déposer 550 551contribution-write-success_heading = Merci pour votre contribution! 552contribution-write-success_lead = Nous sommes reconnaissants de votre contribution. Nous lisons toutes les contributions et avons hâte de lire la vôtre. Si vous devez communiquer avec nous à propos de votre contribution, écrivez-nous à <a data-l10n-name="contrib-email" href="{-mailto-contributions}">{-email-contributions}</a>. 553 554contribution-write-success_follow-1 = Si vous ne l'avez pas déjà fait ⦠555contribution-write-success_follow-2 = Abonnez-vous à notre <a data-l10n-name="cr-subscribe" href="{-url-subscribe}">journal mensuel</a> et à notre <a data-l10n-name="idom-subscribe" href="{-url-subscribe}">magazine théorique</a>. 556contribution-write-success_follow-3 = Suivez et écoutez notre <a data-l10n-name="podcast-url" href="{-url-social-spotify}">podcast</a>. 557contribution-write-success_follow-4 = Lisez nos derniers articles et partagez-les. 558contribution-write-success_follow-social_heading = Suis-nous 559 560contribution-write-form_contact-information_contribution-type_workplace_title = Témoignage sur votre syndicat ou milieu de travail 561contribution-write-form_contact-information_contribution-type_workplace_description = 562 Envoyez-nous vos témoignages sur votre syndicat ou milieu de travail. Ãtes-vous en grève? Votre patron refuse-t-il de 563 vous payer? Essayez-vous de syndiquer votre milieu de travail? Avez-vous visité un piquet de grève?<br/><br/> 564  • Si possible, donnez la parole à vos collègues et intégrez des citations. 565contribution-write-form_contact-information_contribution-type_party_title = Rapport d'activité dans le parti 566contribution-write-form_contact-information_contribution-type_party_description = 567 Envoyez-nous des rapports sur votre travail de construction du parti. Avez-vous organisé une activité réussie? 568 Ãtes-vous en train de défricher une nouvelle aire de travail? Partagez avec les autres communistes vos succès ou défis
569 et les leçons que vous avez apprises.<br/><br/> 570  • Gardez en tête que ce rapport vise à être public. Ãcrivez-le d'une façon qui soit compréhensible 571 pour quelqu'un qui rencontre le parti pour la première fois. 572contribution-write-form_contact-information_contribution-type_boss_title = Mon salaud de patron/proprio 573contribution-write-form_contact-information_contribution-type_boss_description = 574 Votre patron ou propriétaire agit-il d'une façon particulièrement odieuse? Ou avez-vous lu sur un tel cas dans les 575 nouvelles? Racontez-nous.<br/><br/> 576  • Gardez en tête que cette rubrique ne vise pas à se plaindre de son travail. Elle vise à souligner 577 la dictature des patrons que constitue le capitalisme. 578contribution-write-form_contact-information_contribution-type_anecdote_title = Entendu dans... (la rue, etc.) 579contribution-write-form_contact-information_contribution-type_anecdote_description = 580 Envoyez-nous une petite anecdote révélant l'état d'esprit actuel dans la société et les changements dans la conscience 581 de classe. 582contribution-write-form_contact-information_contribution-type_class_title = Eux contre nous 583contribution-write-form_contact-information_contribution-type_class_description = 584 Cette rubrique vise à souligner le comportement terrible des politiciens bourgeois et à démontrer la nature de la 585 démocratie bourgeois. 586contribution-write-form_contact-information_contribution-type_unmask_title = Ce qu'ils pensent tout bas 587contribution-write-form_contact-information_contribution-type_unmask_description = 588 Cette rubrique met en lumière des cas tirés de l'actualité où des représentants bourgeois ont admis la vraie nature du capitalisme. 589contribution-write-form_contact-information_contribution-type_media_title = Mensonges médiatiques 590contribution-write-form_contact-information_contribution-type_media_description = 591 Cette rubrique démasque les mensonges des médias et leur rôle dans le maintien du système capitaliste. 592contribution-write-form_contact-information_contribution-type_corruption_title = Les affaires c'est les affaires 593contribution-write-form_contact-information_contribution-type_corruption_description = 594 Cette rubrique met en lumière des cas tirés de l'actualité qui démontrent la corruption capitaliste. 595contribution-write-form_contact-information_contribution-type_solidarity_title = L'union fait la force 596contribution-write-form_contact-information_contribution-type_solidarity_description = 597 Partagez des histoires inspirantes de luttes victorieuses, tirées des nouvelles ou d'expériences personnelles. 598contribution-write-form_contact-information_contribution-type_poetry_title = Poésie 599contribution-write-form_contact-information_contribution-type_poetry_description = 600 Partagez-nous votre poésie, ou faites découvrir à d'autres communistes des poèmes qui vous ont marqué.<br/><br/> 601  • Gardez en tête que nous avons un espace limité.<br/> 602  • L'art n'a pas besoin d'appeler directement à la révolution pour être révolutionnaire. Comme disait Lénine, la vérité est révolutionnaire. 603contribution-write-form_contact-information_contribution-type_culture_title = Critique culturelle 604contribution-write-form_contact-information_contribution-type_culture_description = 605 Avez-vous lu un roman, regardé un film ou une émission de télévision que vous souhaitez recommander? Avez-vous visité 606 une exposition ou assisté à une pièce de théâtre qui vous a marqué par son message? Dites-nous pourquoi.<br/><br/> 607  • L'art doit être jugé selon ses propres critères. Ãvitez les critiques du genre « ce n'était pas 608 assez communiste à mon goût ». 609contribution-write-form_contact-information_contribution-type_cartoon_title = Dessin ou photo 610contribution-write-form_contact-information_contribution-type_cartoon_description = 611 En tant que journal autofinancé, nous n'avons pas les moyens de nous procurer des photos avec droits d'auteur 612 dispendieuses. Aidez-nous à illustrer le journal avec vos propres photos, dessins ou caricatures. 613contribution-write-form_contact-information_contribution-type_letter_title = Lettre 614contribution-write-form_contact-information_contribution-type_letter_description = 615 Mettez vos pensées sur papier. Dites-nous ce que vous pensez des enjeux d'actualité, partagez des anecd
615otes de votre 616 vie ou racontez-nous ce qui se passe dans votre ville ou votre quartier qui nourrit votre radicalisation, ou tout 617 autre sujet qui pourrait intéresser nos lecteurs. 618 619# Subscribe Page 620subscribe-page_title = Sâabonner à Révolution communiste 621subscribe-page_ticker-text = La voix du Parti communiste révolutionnaire 622subscribe-page_action = Sâabonner maintenant 623 .href = {-url-subscribe-checkout} 624subscribe-page_yearly = par année 625 626subscribe-page_hero_word = Abonnement 627 628subscribe-page_content-lead1 = Les capitalistes ont leur voix dans les médias. 629subscribe-page_content-lead2 = <em>Les travailleurs doivent avoir la leur.</em> 630 631subscribe-page_pricing-format = Prix selon le support 632subscribe-page_pricing-print = Papier 633subscribe-page_pricing-digital = Numérique 634 635subscribe-page_cr-logo = 636 .alt = Logo de Révolution Communiste 637 .src = /assets/subscribe/rc-logo.svg 638 639subscribe-page_cr-lead = <i>Révolution communiste</i> est le journal officiel du Parti communiste révolutionnaire. Câest un journal sans son pareil au Québec et au Canada. Un vaste réseau de correspondants communistes à travers le pays participe à sa création. Il sâagit dâun outil politique pour militer dans les rues, les manifestations et les grèves, et pour bâtir des cellules communistes dans nos quartiers, nos milieux de travail et nos campus. 640 641subscribe-page_idom-logo = 642 .alt = Logo de Défense du Marxisme 643 .src = /assets/subscribe/ddm-logo.png 644 645subscribe-page_idom-lead = <i>Défense du marxisme</i> est le magazine théorique de <a data-l10n-name="marxist-com" href={-url-marxist-com}>lâInternationale communiste révolutionnaire</a>. Comme disait Lénine, sans théorie révolutionnaire, pas de mouvement révolutionnaire. <i>Défense du marxisme</i> offre une analyse marxiste sérieuse de questions théoriques et dâenjeux dâactualité brûlants. Il nous sert de guide pour lâaction afin de renverser le capitalisme à lâéchelle mondiale. 646 647subscribe-page_combination-head = <em>Abonnement double</em> 648subscribe-page_combination-subhead = Sâabonner aux deux publications 649 650subscribe-page_manage1 = Vous voulez gérer ou annuler votre abonnement? 651subscribe-page_manage2 = Gérer mon abonnement. 652subscribe-page_contact-us = Pour toute question ou préoccupation, nâhésitez pas à nous contacter à <a data-l10n-name="subscribe-page_contact-us-email" data-10n-attrs="href" href="[email protected]">[email protected]</a>. 653 654## Subscribe Checkout 655 656subscribe-checkout_title = {subscribe-page_title} 657subscribe-checkout_heading = Abonnement à <em>Révolution communiste</em> 658subscribe-checkout_heading-magazine = Abonnement à <em>Défense du marxisme</em> 659subscribe-checkout_heading-combination = Abonnement <em>double</em> 660subscribe-checkout_lead = Remplissez le formulaire pour valider votre abonnement. 661subscribe-checkout-form_subscription-details_heading = Choix dâabonnement 662subscribe-checkout-form_subscription-details_format_label = Support 663subscribe-checkout-form_subscription-details_format_option_paper = Papier 664subscribe-checkout-form_subscription-details_format_option_digital = Numérique 665subscribe-checkout-form_subscription-details_donation_heading = Faire <em>un don</em> mensuel au PCR 666subscribe-checkout-form_subscription-details_donation_description = 667 Aidez-nous à bâtir le Parti communiste révolutionnaire! Les dons mensuels nous aident à payer le salaire de nos 668 employés, le loyer de nos bureaux, et toutes sortes dâautres dépenses nécessaires pour bâtir un parti révolutionnaire 669 solide. 670subscribe-checkout-form_subscription-details_donation_button = Ajouter un don 671subscribe-checkout-form_subscription-details_contact-information_heading = Coordonnées 672subscribe-checkout-form_subscription-details_contact-information_full-name = 673 .data-validation-valueMissing = {-input-error_valueMissing} 674subscribe-checkout-form_subscription-details_contact-information_full-name_label = Nom 675subscribe-checkout-form_subscription-details_contact-information_email = 676 .data-validation-typeMismatch = {-input-error_typeMismatch} 677 .data-validation-valueMissing = {-input-error_valueMissing}
678subscribe-checkout-form_subscription-details_contact-information_email_label = Courriel 679subscribe-checkout-form_subscription-details_contact-information_phone-number_label = Numéro de téléphone 680subscribe-checkout-form_subscription-details_contact-information_reference = 681 .data-validation-valueMissing = {-input-error_valueMissing} 682subscribe-checkout-form_subscription-details_contact-information_reference_label = Comment avez-vous entendu parler de nous? 683subscribe-checkout-form_subscription-details_contact-information_contact_label = Ãtes-vous en contact avec un membre du PCR? 684subscribe-checkout-form_subscription-details_contact-information_contact_option_1 = Non 685subscribe-checkout-form_subscription-details_contact-information_contact_option_2 = Oui 686subscribe-checkout-form_subscription-details_contact-information_contact_comrade-name_label = Quel est son nom? 687subscribe-checkout-form_subscription-details_mailing-address_heading = Adresse postale 688subscribe-checkout-form_subscription-details_mailing-address-text = 689 Veuillez entrer l'adresse postale pour la livraison de vos copies papier. En tant qu'abonné papier, vous recevrez 690 aussi la version numérique par courriel. 691subscribe-checkout-form_subscription-details_mailing-address_address-line-1 = 692 .data-validation-valueMissing = {-input-error_valueMissing} 693subscribe-checkout-form_subscription-details_mailing-address_address-line-1_label = Adresse ligne 1 694subscribe-checkout-form_subscription-details_mailing-address_address-line-2_label = Adresse ligne 2 695subscribe-checkout-form_subscription-details_mailing-address_province = 696 .data-validation-valid = Veuillez choisir une province. 697subscribe-checkout-form_subscription-details_mailing-address_province_label = Province 698subscribe-checkout-form_subscription-details_mailing-address_city = 699 .data-validation-valueMissing = {-input-error_valueMissing} 700subscribe-checkout-form_subscription-details_mailing-address_city_label = Ville 701subscribe-checkout-form_subscription-details_mailing-address_postal-code_label = Code postal 702subscribe-checkout-form_subscription-details_mailing-address_postal-code = 703 .data-validation-patternMismatch = Veuillez choisir un code postal canadien valide. 704subscribe-checkout-form_subscription-details_join_heading = Rejoindre le PCR 705subscribe-checkout-form_subscription-details_join_label = Je veux rejoindre le PCR 706subscribe-checkout-form_subscription-details_join_information = Un membre vous contactera dâici 24 à 48 heures pour discuter de comment devenir membre du parti. 707subscribe-checkout-form_cart_heading = Votre panier 708subscribe-checkout-form_cart_subtotal = Total partiel 709subscribe-checkout-form_cart_remove-button = Retirer 710subscribe-checkout-form_cancel-button = Annuler 711subscribe-checkout-form_checkout-button = Passer à la caisse 712subscribe-checkout_item-preset_paper = Abonnement : Révolution communiste 713subscribe-checkout_item-preset_magazine = Abonnement : Défense du marxisme 714subscribe-checkout_item-preset_combination = Abonnement double : Révolution communiste et Défense du marxisme 715subscribe-checkout_item-preset_donation = Don mensuel au PCR 716subscribe-checkout_item-preset_donation-description = Facturé chaque mois comme transaction distincte de lâabonnement au journal. 717subscribe-checkout_item-preset_digital = Numérique 718subscribe-checkout_item-preset_print = Papier 719subscribe-checkout_item-preset_yearly = Annuel 720subscribe-checkout_donation-notice = Votre don mensuel de {$amount} a été ajouté à votre panier. 721subscribe-checkout_error-notice = 722 Une erreur sâest produite. Veuillez vérifier tous les champs et réessayer. Si lâerreur persiste, veuillez envoyer un 723 courriel à <a href="mailto:[email protected]">[email protected]</a> avec une explication du problème. 724subscribe-checkout_success-pathname = /abonnement/commande?receipt= 725subscribe-checkout_failure-pathname = /abonnement/commande 726 727subscribe-checkout-confirmation_title = Merci 728subscribe-checkout-confirmation_heading = <em>Confirmation</em> de la commande 729subscribe-checkout-confirmation_lead = Merci de vous être abonné. 730subscribe-checkout-confirmation_lead-alt = 731 Merci de vous être abonné et de soutenir le Parti communiste révolutionnaire. 732subscribe-checkout-confirmation_summary_heading = Résumé de la commande 733subscribe-checkout-confirmation_subtotal_heading = Total partiel 734subscribe-checkout-confirmation_payment_heading = Paiement
735subscribe-checkout-confirmation_mailing-address_heading = Adresse postale 736subscribe-checkout-confirmation_confirmation-notice = Si vous avez besoin de modifier votre commande ou de la modifier, vous pouvez le faire 737subscribe-checkout-confirmation_confirmation-notice-link = ici. 738 .href = { $stripe-subscription-management-href } 739 740 741# School 742mws-2025_page-title = Ãcole marxiste dâhiver de Montréal 2025 | Les piliers du communisme 743mws-2025_page-description = Rejoignez-nous au plus grand événement marxiste au Québec et au Canada! 744mws-2025_page-og-img = /assets/school/mws/2025/fb-share-fr.png 745 746mws-2025_hero-title = Les piliers<br>du communisme 747mws-2025_hero-subtitle = Ãcole Marxiste d'hiver de Montréal 2025 748mws-2025_hero-date = 14â16 février 749mws-2025_register-btn = Inscrivez-vous dès maintenant! 750mws-2025_register-now-btn = Inscris-toi maintenant 751mws-2025_join-btn = Rejoins les communistes 752 .href = {-url-join} 753 754mws-2025_description-quote = « Sans théorie révolutionnaire, pas de mouvement révolutionnaire. » â Lénine 755mws-2025_description-body = 756 Partout où lâon regarde, le système se fissure, et les piliers qui soutiennent le capitalisme sont sur le point de s'effondrer. La crise capitaliste amène un regain de tensions entre les puissances impérialistes, qui affûtent leurs armes pour défendre leurs marchés, sphères d'influence et les profits de leurs grandes entreprises. La guerre en Ukraine et le massacre en Palestine sont des symptômes sanglants dâun système qui pousse lâhumanité vers la barbarie. 757 <br><br> 758 Pour ce faire, notre action doit absolument reposer sur de solides piliers théoriques. Comme lâa dit Lénine : sans théorie révolutionnaire, pas de mouvement révolutionnaire. Câest pourquoi le Parti communiste révolutionnaire organise pour la 15e année consécutive lâÃcole marxiste dâhiver de Montréal, le plus grand événement marxiste au pays. 759 <br><br> 760 Au fil des années, lâÃcole est devenue LE rassemblement éducatif incontournable pour les révolutionnaires de partout au pays et dâailleurs. Plus de 600 personnes ont participé à lâédition 2024. 761 <br><br> 762 Depuis lâan dernier, un nombre impressionnant de jeunes et travailleurs se sont joints aux forces communistes. Cet événement sera donc un moment important pour la formation dâune large couche de militants aux idées révolutionnaires et aux méthodes de la lutte des classes. Sous le thème des piliers du communisme, nous approfondirons les fondements de la théorie marxiste : philosophie, économie, histoire, et plus encore. 763 764mws-2025_discussion-topics-title = Sujets de discussion 765mws-2025_discussion-topics-text = Cette année, nous ajoutons <strong>trois présentations supplémentaires</strong> à lâhoraire, pour un total de <strong>10 présentations</strong> inspirantes. Toute les plénières, et quelques séances simultanées, seront tenues en français et en anglais, avec traduction consécutive. Dans toutes les discussions, peu importe la langue de la présentation, les participants pourront intervenir en français ou en anglais. 766 767mws-2025_suggested-readings-title = Lectures recommandées 768mws-2025_further-readings-title = Pour aller plus loin 769 770mws-2025_topic-materialist-history = La conception matérialiste de l'histoire (Anglais) 771mws-2025_topic-materialist-history_description = Peut-on comprendre lâhistoire dâun point de vue scientifique? La science moderne nous montre que tous les domaines de la nature sont dictés par des lois objectives, de la physique quantique à la biologie moléculaire. Mais la plupart des historiens traditionnels refusent d'admettre qu'il en va de même pour la société humaine.<br><br>Comme l'a dit Marx : « Les hommes font leur propre histoire, mais ils ne la font pas arbitrairement, dans les conditions choisies par eux ». L'histoire n'est pas seulement le fruit du libre arbitre de grands individus. Elle n'est pas non plus un chaos insensé, comme les penseurs postmodernes voudraient le faire croire. La structure économique d'une société donnée jette les bases du développement historique. Les grands changements politiques et culturels trouvent leurs racines dans les changements dans la production. En étudiant cette relation, nous pouvons développer les outils dont nous avons besoin pour laisser notre propre marque sur l'histoire. 772mws-2025_topic-materialist-history_time = Samedi 15 février à 14h30 EST 773mws-2025_topic-workers-exploitation = Comment les travailleurs sont-ils exploités? (Français) 774mws-2025_topic-workers-exploitation_description = Tout au long de sa vie, Karl Marx a étudié en profondeur les rouages de l'économie capitaliste. Il a passé au crible les travaux de tous les économistes bourgeois classiques, réfuté ce qui était erroné dans leurs idées et développé ce qui était correct. Il a prouvé que le profit est basé sur l'exploitation de la classe ouvrière et que les crises périodiques sont inévitables sous le capitalisme. Les économistes modernes ont beau tordre la réalité pour éviter d'en arr
774iver à cette conclusion, la vérité demeure.<br><br>Les révolutionnaires doivent comprendre le fonctionnement du capitalisme pour pouvoir le renverser. Les écrits économiques de Marx représentent un outil inestimable dans notre lutte contre l'exploitation aujourd'hui. 775mws-2025_topic-workers-exploitation_time = Samedi 15 février à 14h30 EST 776mws-2025_topic-id-pols = La lutte contre l'oppression : unité de classe ou politiques identitaires? (Français) 777mws-2025_topic-id-pols_description = Les politiques identitaires sont en vogue actuellement. Tout comme le courant connexe de lâintersectionnalité, ces idées soulignent lâimportance de lâexpérience individuelle, de comment une personne sâidentifie, et des différentes formes dâoppression que subissent les gens en fonction de leur couleur de peau, de leur sexe, de leur genre et dâautres facteurs. Sur quoi se fondent les politiques identitaires? Pourquoi sont-elles si populaires auprès des jeunes en particulier? Et quel est leur rapport avec la méthode marxiste de solidarité et de lutte des classes? 778mws-2025_topic-id-pols_time = Samedi 15 février à 14h30 EST 779mws-2025_topic-imperialism = Trump et la crise de lâimpérialisme américain (Bilingue) 780mws-2025_topic-imperialism_description = L'assaut d'Israël sur Gaza et le Liban, avec le soutien de l'impérialisme occidental, est l'exemple le plus récent et le plus flagrant de la sauvagerie du capitalisme. Après nous avoir cassé les oreilles à propos de la défense des « valeurs occidentales » et de « l'ordre international fondé sur des règles » dans le cas de l'Ukraine, les impérialistes occidentaux fournissent argent et aide militaire à Israël dans son massacre génocidaire des Palestiniens.<br><br>Ces guerres ne sont pas menées pour des « valeurs » ou des « principes », mais pour des profits. Alors que le capitalisme s'enfonce de plus en plus dans la crise, les gangsters impérialistes mènent des guerres sanglantes pour protéger leur part de plus en plus réduite du butin â des guerres dont les travailleurs et les opprimés font les frais.<br><br>Comment les révolutionnaires peuvent-ils mener la classe ouvrière au renversement de ces profiteurs et semeurs de guerre? 781mws-2025_topic-imperialism_time = Samedi 15 février à 9h EST 782mws-2025_topic-philosophy = Aux racines philosophiques : Comment Marx est devenu marxiste (Bilingue) 783mws-2025_topic-philosophy_description = Avec Friedrich Engels, Karl Marx a transformé à jamais le paysage de la philosophie, de lâéconomie politique et de lâhistoire. Fondateur du socialisme scientifique, il a jeté les bases théoriques qui ont permis aux opprimés et aux exploités de se libérer une fois pour toutes des chaînes de la société de classes.<br><br>Près de 150 ans après sa mort, une étude approfondie des idées de Marx reste essentielle pour quiconque cherche à comprendre et à changer le monde. Mais Marx nâest pas né marxiste. Il sâest créé lui-même, consciemment et laborieusement, à travers des années dâétude et de critique intenses de la société capitaliste et de toute lâhistoire des idées qui lâont précédé. Ce faisant, il est devenu le premier à développer une méthode véritablement scientifique pour étudier la nature, la société et la pensée dans leur mouvement et leur développement perpétuels. La méthode de Marx est aujourdâhui essentielle pour quiconque souhaite comprendre et changer le monde.<br><br>Aujourdâhui, en tant que révolutionnaires, nous devons maîtriser la méthode de Marx pour nous-mêmes. Pourquoi Marx a-t-il pu en arriver à ses conclusions révolutionnaires? Et que pouvons-nous apprendre de lâévolution du premier marxiste? 784mws-2025_topic-philosophy_time = Dimanche 16 février à 14h EST 785mws-2025_topic-bolshevism-vs-stalinism = Bolchevisme contre Stalinisme (Anglais) 786mws-2025_topic-bolshevism-vs-stalinism_description = Les défenseurs du capitalisme se plaisent à attaquer le communisme en rappelant les atrocités perpétrées par le régime stalinien en URSS. Le bolchevisme â les idées et les méthodes de Lénine â ne peut aboutir quâà une dictature totalitaire, nous dit-on. Quant au capitalisme, il nây a pas dâalternative.<br><br>En réalité, une rivière de sang sépare le bolchevisme du stalinisme. Cette présentation expliquera les véritables traditions de Lénine et de son parti bolchevique, traditions grâce auxquelles les bolcheviks ont conduit la classe ouvrière russe à vaincre le capitalisme sur un territoire englobant un sixième de la planète. Et elle expliquera comment le régime mis en place par la révolution russe â le régime le plus démocratique de lâhistoire â a été vidé de sa substance, remplacé par la caricature grotesque du régime stalinien. 787mws-2025_topic-bolshevism-vs-stalinism_time = Samedi 15 février à 14h30 EST 788mws-2025_topic-communist-international = Lénine, Trotsky et lâInternationale communiste (Français) 789mws-2025_topic-communist-international_description = Le communisme est internationaliste, ou il n'est rien. Déjà , à l'aube de notre mouvement, dans les pages du Manifeste du Parti communiste, Marx et Engels expliquaient que les travailleurs n'ont pas de patr
789ie. C'est pourquoi le PCR a participé à la fondation de l'Internationale communiste révolutionnaire en juin 2024.<br><br>Peu après avoir pris le pouvoir en Russie, Lénine, Trotsky et les bolcheviks ont fondé l'Internationale communiste en mars 1919. En l'espace de quelques années, des partis communistes ont été fondés dans le monde entier, armés des idées nécessaires pour mener la lutte pour le communisme. Des tactiques syndicales à la lutte contre le réformisme, en passant par la lutte contre l'impérialisme et le colonialisme à la question de lâémancipation des femmes, les premières années de l'Internationale communiste sont une mine dâor de leçons pour les révolutionnaires d'aujourd'hui. 790mws-2025_topic-communist-international_time = Samedi 15 février à 14h30 EST 791mws-2025_topic-capitalist-state = L'Ãtat capitaliste et la crise de la démocratie bourgeoise (Bilingue) 792mws-2025_topic-capitalist-state_description = Si lâéconomie mondiale est en crise profonde, sa « démocratie » libérale lâest tout autant. Dans tous les pays, le statu quo politique se discrédite de jour en jour. Des voyous anti-establishment comme Donald Trump violent tout le décorum traditionnel et les « règles » de la politique mondiale. Les libéraux se prétendent horrifiés par son comportement autoritaire, mais ils ne sont pas mieux que lui. Tandis quâils crient au « fascisme » devant Trump, ils privent les travailleurs de leur droit de grève, répriment le mouvement pro-palestinien à coup de brutalité policière et dâarrestations.<br><br>LâÃtat et la « démocratie » sâexposent de plus en plus pour ce quâils sont : des outils au service de la classe capitaliste. Il appartient aux communistes dâexpliquer cette crise et dâoffrir une solution révolutionnaire à celle-ci. 793mws-2025_topic-capitalist-state_time = Dimanche 16 février à 9h EST 794mws-2025_topic-marxism-morality = Le marxisme et la morale (Bilingue) 795mws-2025_topic-marxism-morality_description = Les communistes ont toujours été accusés d'être des monstres sanguinaires qui recherchent la violence. Mais nos accusateurs, les capitalistes, sont responsables d'un nombre incalculable de morts et de souffrances.<br><br>De la colonisation aux deux guerres mondiales en passant par le génocide à Gaza, la classe dirigeante a toujours soutenu que la violence qu'elle impose est pour le plus grand bien. Inversement, tout ce que font les opprimés pour riposter est indéfendable.<br><br>Quelle est l'approche des communistes vis-à -vis de la guerre et de la violence? Quâest-ce que la morale, et d'où vient-elle? 796mws-2025_topic-marxism-morality_time = Dimanche 16 février à 9h EST 797mws-2025_topic-palestine = Histoire du communisme en Palestine (Bilingue) 798mws-2025_topic-palestine_description = Depuis plus de cent ans, la lutte pour la libération de la Palestine et le mouvement communiste sont étroitement liés. Les organisations communistes comme le Parti communiste palestinien et le FPLP (Front populaire de libération de la Palestine) ont, à certains moments de lâhistoire, occupé le premier rang dans la lutte pour libérer les Palestiniens du joug de lâimpérialisme israélien et occidental.<br><br>Leur histoire déborde de détermination et de sacrifices héroïques, mais elle est aussi parsemée dâerreurs qui ont conduit le mouvement de libération à la défaite et à la démoralisation. En tant que marxistes, nous devons être capables dâexaminer de manière critique lâhistoire du mouvement communiste en Palestine et dâen tirer toutes les leçons nécessaires qui peuvent nous guider aujourdâhui dans notre lutte pour libérer le peuple palestinien une fois pour toutes. 799mws-2025_topic-palestine_time = Vendredi 14 février à 19h EST 800 801mws-2025_event-details-title = Détails de l'événement et inscription 802mws-2025_event-details-text = Veuillez lire attentivement les informations suivantes avant d'acheter vos billets. 803mws-2025_event-location-title = Lieu et hébergement 804mws-2025_event-location-text = Nous fournirons plus d'information sur le lieu et sur l'hébergement dans les prochaines semaines.<br><br>Nous avons obtenu des rabais de groupe pour les participants dans plusieurs auberges de jeunesse dans les environs.
804Consultez la <a data-l10n-name="accomodations-page" href="https://www.marxiste.qc.ca/hebergement-ecole-marxiste-dhiver-de-montreal-2025">page sur l'hébergement</a> pour plus d'information. 805mws-2025_event-finances-title = Prix des billets et financement communiste 806mws-2025_event-finances-text = Le prix de base est établi de façon à ce que lâévénement ne soit pas déficitaire. Avec lâinflation, les dépenses liées à lâorganisation dâun tel événement ont augmenté considérablement, particulièrement en ce qui concerne les frais reliés à la nourriture et la location des salles. Nous devons aussi couvrir les frais de déplacement des conférenciers internationaux, dont la participation permet dâenrichir les discussions politiques. Enfin, comme nous ne voulons pas que les finances constituent une barrière à la participation, nous mettons de côté un certain montant pour pouvoir subventionner la participation de ceux qui nâont pas les moyens de payer la totalité des frais.<br><br>Cela dit, <strong>afin de maximiser la participation à lâévénement, nous avons choisi de conserver les mêmes prix que lâan dernier, malgré que nous devons débourser davantage pour ajouter des séances supplémentaires.</strong> Le prix de base de l'école est donc de 120$ pour les Montréalais et de 60$ pour les personnes venant de l'extérieur de Montréal. Ce prix comprend lâaccès à lâévénement, en plus du dîner et du souper du samedi ainsi que le dîner du dimanche (trois repas au total).<br><br>Pour maintenir notre indépendance politique, notre indépendance financière est essentielle. Nous n'avons pas de gros bailleurs de fonds. Nous comptons exclusivement sur les dons de nos membres et sympathisants, câest-à -dire de ceux qui veulent le renversement révolutionnaire du système capitaliste. Dans cette perspective, pour aider à soutenir notre activité révolutionnaire, nous encourageons les participants à faire un don supplémentaire lors de lâachat des billets. Pour nous aider à construire une organisation communiste au Québec et au Canada, nous vous encourageons également à vous procurer un <a data-l10n-name="solidarity-subscription" href="{-url-subscribe}">abonnement solidaire</a> à notre journal. 807mws-2025_event-subsidies-title = Subvention 808mws-2025_event-subsidies-text = Nous ne souhaitons pas que les finances soient un obstacle à la participation à cet événement et personne ne sera refusé pour des raisons financières. Veuillez nous contacter à <a data-l10n-name="subsidies-email" href="mailto:[email protected]">[email protected]</a> ou 438-722-3501 pour obtenir une subvention. 809 810mws-2025_cta-and = Et 811mws-2025_cta-today = aujourd'hui! 812 813 814 815# ======================================== 816# Winter school 2026 817mws-2026_page-title = Ãcole marxiste dâhiver de Montréal 2026 | Réforme ou Révolution 818mws-2026_page-description = Rejoignez-nous au plus grand événement marxiste au Québec et au Canada! 819mws-2026_page-og-img = /assets/school/mws/2026/og-image-fr.jpg 820 821mws-2026_hero-title = 822 .aria-label = Réforme ou Révolution 823mws-2026_hero-title-line-1 = 824 .src = /assets/school/mws/2026/reform-or-fr.svg 825mws-2026_hero-title-line-2 = 826 .src = /assets/school/mws/2026/revolution-fr.svg 827 828mws-2026_hero-subtitle = Ãcole Marxiste d'hiver de Montréal 2026 829mws-2026_hero-date = 13–15 février 830mws-2026_hero-description = Onze présentations sur lâhistoire et la théorie Marxiste pour ceux qui veulent changer le monde 831mws-2026_register-btn = Inscrivez-vous dès maintenant! 832mws-2026_register-now-btn = Inscris-toi maintenant 833mws-2026_join-btn = Rejoins les communistes 834 .href = {-url-join} 835 836mws-2026_description-quote = « Sans théorie révolutionnaire, pas de mouvement révolutionnaire. » 837mws-2026_description-quote-author = â Lénine 838mws-2026_description-body = 839 Nous sommes à un moment charnière de lâhistoire. Le capitalisme traverse une crise qui plonge le monde entier dans le chaos. Les inégalités atteignent des niveaux effarants. De nouvelles lignes de fracture apparaissent entre les puissances impérialistes, qui noient des régions entières dans le sang à la recherche de nouveaux marchés et de profits. Pendant ce temps, le capitalisme détruit la planète, posant une menace existentielle à lâhumanité même. 840 <br><br>Des millions de gens commencent à remettre le système en question et cherchent une voie de sortie. De nouvelles personnalités de gauche promettent des réformes audacieuses â mais lâhistoire montre que le capitalisme en crise ne tolère pas la moindre concession. 841 <br><br>En même temps, une nouvelle génération de jeunes révolutionnaires fait son apparition. De lâIndonésie à Madagascar en passant par lâItalie, des mouvements de masse font irruption à travers le monde. Notre époque en est une de révolutions â et la révolution arrivera au Canada aussi un jour ou lâautre. 842 <br><br>Dans ce contexte, « Réforme ou révolution? » est une question brûlante. Ce sera justement le thème de la 16ᵉ édition de lâÃcole marxiste dâhiver de Montréal, le plus grand rassemblement marxiste au Canada. Au cours de cette fin de semaine, nous aborderons des sujets clés pour les révolutionnaires : lâhistoire révolutionnaire, les expérience
842s réformistes du passé et la philosophie marxiste. 843 <br><br>Aucun mouvement révolutionnaire ne peut réussir sans ancrage théorique ferme. LâÃcole marxiste dâhiver de Montréal vise à former la nouvelle génération aux idées qui mèneront les luttes de lâavenir à la victoire. 844 <br><br>Avec 600 participants lors de la dernière édition, lâÃcole marxiste est un événement incontournable pour quiconque souhaite sérieusement transformer la société. LâÃcole 2026 représentera une étape importante dans la formation des futurs leaders de la révolution. 845 <br><br>Si vous souhaitez mettre fin au capitalisme, vous <em>devez</em> y participer! 846 847mws-2026_discussion-topics-title = Sujets de discussion 848mws-2026_discussion-topics-text = Cette année, nous aurons un total de <strong>11 présentations inspirantes</strong> sur la théorie marxiste et l'histoire. Toutes les plénières, ainsi que certains ateliers, seront bilingues. Veuillez noter que pendant les discussions, les participants pourront s'exprimer en français ou en anglais, quelle que soit la langue de la présentation. 849 850 851mws-2026_event-details-title = Détails de l'événement et inscription 852mws-2026_event-details-text = Veuillez lire attentivement les informations suivantes avant d'acheter vos billets. 853mws-2026_event-location-title = Lieu et hébergement 854mws-2026_event-location-text = Lâévénement aura lieu à Montréal. Nous fournirons plus d'informations sur le lieu dans les prochaines semaines. <br><br>Nous avons obtenu des tarifs réduits dans certaines auberges à proximité pour les participants à l'école. Consultez la page sur <a data-l10n-name="accomodations-page" href="https://www.marxiste.qc.ca/hebergement-ecole-marxiste-dhiver-de-montreal-2026">l'hébergement</a> pour plus d'informations. 855mws-2026_event-finances-title = Prix des billets et financement communiste 856mws-2026_event-finances-text = 857 Le prix de base est établi de façon à ce que lâévénement ne soit pas largement déficitaire. Avec lâinflation, les dépenses liées à lâorganisation dâun tel événement ont augmenté considérablement, notamment en ce qui concerne la location des lieux. 858 <br><br>Le prix de base de l'école est donc de 130$ pour les résidents du Grand Montréal, qui n'ont pas à payer leur hébergement, de 90$ pour ceux qui font le voyage depuis le reste du Québec et de l'Ontario, et de 60$ pour ceux qui viennent de l'extérieur des deux provinces. Ce prix comprend lâaccès à lâévénement pour les trois jours. 859 <br><br><strong>Aucun repas ne sera fourni.</strong> 860 <br><br><strong>Pour maintenir notre indépendance politique, notre indépendance financière est essentielle</strong>. Nous n'avons pas de gros bailleurs de fonds. Nous comptons exclusivement sur les dons de nos membres et sympathisants, câest-à -dire de ceux qui veulent voir le renversement révolutionnaire du système capitaliste. Dans cette perspective, pour aider à soutenir notre activité révolutionnaire et soutenir le coût énorme de cette école, <strong>nous encourageons les participants à acheter un billet à prix solidaire ou à faire un don supplémentaire lors de lâachat des billets.</strong> Pour nous aider à construire une organisation communiste au Québec et au Canada, nous vous encourageons également à vous procurer un <a data-l10n-name="solidarity-subscription" href={-url-subscribe}>abonnement solidaire</a> à notre journal. 861mws-2026_event-subsidies-title = Subvention 862mws-2026_event-subsidies-text = Nous ne souhaitons pas que les finances soient un obstacle à la participation à cet événement et personne ne sera refusé pour des raisons financières. Veuillez nous contacter à <a data-l10n-name="subsidies-email" href="mailto:[email protected]">[email protected]</a> ou 438-722-3501 pour obtenir une subvention. 863 864mws-2026_cta-and = Et 865mws-2026_cta-today = aujourd'hui! 866 867# Education page revamped 868edu-page-title = Théorie et éducation 869edu-page-title-small = 870 .data-text = Théorie et éducation 871edu-page-subtext = Approfondissez votre compréhension du marxisme en plongeant dans notre bibliothèque. Notre c
871ollection contient des classiques du marxisme de même que des écrits modernes incontournables produits par lâInternationale communiste révolutionnaire. 872edu-page-collections-title = Collections 873edu-page-featured-title = En vedette 874edu-page-library-title = Bibliothèque 875edu-page-know-what-your-looking-for = Vous savez ce que vous cherchez? 876edu-page-browse-library-text = <a data-l10n-name="edu-page-browse-our-library" href="#library">Parcourez notre bibliothèque</a> et filtrez par sujet, format ou auteur. 877edu-page-filter-by = Filtrer par 878edu-page-clear-filters = Réinitialiser les filtres 879edu-page-all-tab = Tous 880edu-page-filter-format = 881 .label-prefix = Format: 882 .placeholder = Format 883 .back-button-label = Revenir au menu précédent 884edu-page-filter-topic = 885 .label-prefix = Sujet: 886 .placeholder = Sujet 887 .back-button-label = Revenir au menu précédent 888edu-page-filter-author = 889 .label-prefix = Auteur: 890 .placeholder = Auteur 891 .back-button-label = Revenir au menu précédent 892edu-page-no-results = Aucun résultat trouvé 893edu-page-cta-read = Lire en ligne 894edu-page-cta-buy = Acheter une copie 895edu-page-cta-watch = Regarder 896edu-page-cta-listen = Ãcouter 897edu-page-filters-btn = <oc-with-icon data-l10n-name="edu-page-filters-btn-text">Filtres</oc-with-icon> 898edu-page-related-title = Connexe 899 900# ======================================== 901# ======================================== 902# Generic School page 903# 904 905school_register-btn = Inscrivez-vous dès maintenant! 906school_register-now-btn = Inscris-toi maintenant 907school_join-btn = Rejoins les communistes 908 .href = {-url-join} 909 910school_event-details-title = Event details and registration 911 912school_cta-and = Et 913school_cta-today = aujourd'hui! 914 915school_discussion-topics-title = Sujets de discussion 916school_suggested-readings-title = Lectures recommandées 917 918 919## Other 920 921loading = Chargement 922 923-input-error_typeMismatch = N'oubliez pas d'inclure un @ dans l'adresse courriel. 924-input-error_valueMissing = Veuillez remplir ce champ. 925 926province_ab = Alberta 927province_bc = Colombie-Britannique 928province_mb = Manitoba 929province_nb = Nouveau-Brunswick 930province_nl = Terre-Neuve-et-Labrador 931province_ns = Nouvelle-Ãcosse 932province_on = Ontario 933province_pe = Ãle-du-Prince-Ãdouard 934province_qc = Québec 935province_sk = Saskatchewan 936province_nt = Territoires du Nord-Ouest 937province_nu = Nunavut 938province_yt = Yukon 939`; 940 if (!window.october) window.october = {}; 941 window.october.bundle = getFluentBundle(source); 942</script>
942 943<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"><meta name="description" content="Site web de Révolution communiste, le journal du Parti communiste révolutionnaire au Québec et au Canada. Es-tu communiste? Rejoins ton parti!"><meta property="og:locale" content="fr-CA"><meta property="og:type" content="website"><meta property="og:title" content="Révolution communiste"><meta property="og:description" content="Site web de Révolution communiste, le journal du Parti communiste révolutionnaire au Québec et au Canada. Es-tu communiste? Rejoins ton parti!"><meta property="og:image" content="/assets/facebook-share-fr-CA.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta name="utils_marxist_ca_url" content="https://nf8mekk4w0.execute-api.us-east-1.amazonaws.com/api/integrations/join"></head> 944 945<body> 946 <oc-nav id="page-nav" data-nav-content="{"featured-topic":{"title":"featured-topic","url":"#","children":[{"title":"Palestine","url":"/categorie/international/palestine/","children":[]}]},"by-location-canada":{"title":"by-location-canada","url":"#","children":[{"title":"Fédéral","url":"/categorie/nouvelles/federal/","children":[]},{"title":"Colombie-Britannique","url":"/categorie/nouvelles/colombie-britannique/","children":[]},{"title":"Maritimes","url":"/categorie/nouvelles/maritimes/","children":[]},{"title":"Ontario","url":"/categorie/nouvelles/ontario/","children":[]},{"title":"Prairies","url":"/categorie/nouvelles/prairies/","children":[]},{"title":"Québec","url":"/categorie/nouvelles/quebec/","children":[]}]},"by-location-international":{"title":"by-location-international","url":"#","children":[{"title":"Afrique","url":"/categorie/international/afrique/","children":[]},{"title":"Amérique latine et Caraïbes","url":"/categorie/international/amerique/","children":[]},{"title":"Asie","url":"/categorie/international/asie/","children":[]},{"title":"Ãtats-Unis","url":"/categorie/international/usa/","children":[]},{"title":"Europe","url":"/categorie/international/europe/","children":[]},{"title":"Moyen Orient","url":"/categorie/international/moyen-orient/","children":[]},{"title":"Océanie","url":"/categorie/international/oceanie/","children":[]}]},"by-topic":{"title":"by-topic","url":"#","children":[{"title":"Philosophie et science","url":"/categorie/theorie/philosophie/","children":[]},{"title":"Histoire","url":"/categorie/theorie/histoire/","children":[]},{"title":"Ãconomie","url":"/categorie/theorie/economie/","children":[]},{"title":"Art et culture","url":"/categorie/theorie/art-et-culture/","children":[]},{"title":"La lutte contre les oppressions","url":"/categorie/la-lutte-contre-oppressions/","children":[]},{"title":"Luttes autochtones","url":"/categorie/nouvelles/luttes-autochtones/","children":[]},{"title":"Question nationale","url":"/categorie/question-nationale/","children":[]},{"title":"Environnement","url":"/categorie/environnement/","children":[]},{"title":"Perspectives","url":"/categorie/theorie/perspectives/","children":[]},{"title":"
946Tactique et stratégie révolutionnaires","url":"/categorie/theorie/strategie/","children":[]},{"title":"Luttes syndicales","url":"/categorie/luttes-syndicales/","children":[]},{"title":"Luttes étudiantes","url":"/categorie/luttes-etudiantes/","children":[]},{"title":"Lâimpérialisme et lâÃtat","url":"/categorie/theorie/imperialisme-et-etat/","children":[]},{"title":"Nos campagnes et événements","url":"/categorie/nouvelles/nos-campagnes-et-evenements/","children":[]}]}}" data-flow="homepage"> 947 <div id="search-bar" slot="search"> 948 <span class="search_label" data-l10n-id="search_label">Rechercher</span> 949 <oc-search-bar data-contribution-tag-id="515"> 950 <button id="search-bar_close" slot="start-extra" class="btn-icon" style="width: 18px; height: 18px"> 951 <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 952 <path d="M17 8H4.83L10.42 2.41L9 1L1 9L9 17L10.41 15.59L4.83 10H17V8Z" fill="currentColor"></path> 953 </svg> 954 </button> 955 <input slot="input" type="text" id="search-input" data-l10n-id="search" data-l10n-attrs="placeholder" autocomplete="off" placeholder="Tapez votre recherche"> 956 </oc-search-bar> 957 </div> 958 <oc-paper-promo number="28" image="/at-attachment?baseId=appOL9Xy3vy26fyqc&tableName=Paper&recordId=rec33JqPfAwIDaSRN&columnName=image&size=large" link="https://store.marxist.ca/fr/products/revolution-communiste-no-28" slot="nav-news-frame-promo"></oc-paper-promo></oc-nav> 959 <header id="page-header"><div class="page-header-hero" role="banner"> 960 <div class="hero-head-video-container"> 961 <video autoplay="true" loop="true" playsinline="true" muted="true" id="banner-bg-video"> 962 <source src="/assets/homepage-hero/bg-video.webm"> 963 </video> 964 </div> 965 <div class="hero-head-video-overlay"></div> 966 <img data-l10n-id="hero_logo" data-l10n-attrs="src" class="hero-head-logo" src="/assets/homepage-hero/logo-fr.svg"> 967 <nav class="hero-nav"> 968 <h2 class="ayac-subhead" data-l10n-id="hero_subhead">Es-tu communiste? Rejoins le PCR!</h2> 969 <div class="btn-apply-mobile"> 970 <a class="btn btn-primary" data-l10n-id="hero-nav_join" data-l10n-attrs="href" href="/rejoindre">Devenir membre</a> 971 </div> 972 <ul class="btn-strip"> 973 <li> 974 <a data-l10n-id="hero-nav_subscribe" data-l10n-attrs="href" class="btn btn-secondary-reverse btn-outline" href="/abonnement">Sâabonner</a> 975 </li> 976 <li> 977 <a data-l10n-id="hero-nav_donate" data-l10n-attrs="href" class="btn btn-secondary-reverse btn-outline" href="/donner">Faire un don</a> 978 </li> 979 <li> 980 <a data-l10n-id="hero-nav_educate" data-l10n-attrs="href" class="btn btn-secondary-reverse btn-outline" href="/education">S'éduquer</a> 981 </li> 982 <li> 983 <a data-l10n-id="hero-nav_write-to-us" data-l10n-attrs="href" class="btn btn-secondary-reverse btn-outline" href="/contribuer">Ãcris-nous</a> 984 </li> 985 <li> 986 <a data-l10n-id="hero-nav_build" data-l10n-attrs="href" class="btn btn-secondary-reverse btn-outline" href="/article/comment-construire-une-cellule-communiste">Construis dans ta région</a> 987 </li> 988 <li> 989 <a data-l10n-id="hero-nav_join" data-l10n-attrs="href" class="btn btn-primary btn-apply-desktop" href="/rejoindre">Devenir membre</a> 990 </li> 991 </ul> 992 </nav> 993</div> 994
995<script> 996 window.addEventListener("pageshow", () => { 997 var video = document.getElementById("banner-bg-video"); 998 video.play(); 999 }); 1000</script>
1000 1001 1002<style> 1003 .page-header-hero { 1004 height: 100vh; 1005 display: grid; 1006 grid-template-rows: 1fr auto; 1007 grid-template-areas: 1008 "main" 1009 "nav"; 1010 justify-items: center; 1011 align-items: center; 1012 } 1013 1014 .page-header-hero .hero-head-video-container { 1015 grid-area: main; 1016 overflow: hidden; 1017 max-width: 100%; 1018 max-height: 100%; 1019 1020 display: grid; 1021 justify-content: center; 1022 align-content: center; 1023 } 1024 1025 .page-header-hero .hero-head-video-container video { 1026 width: 1040px; 1027 } 1028 1029 .page-header-hero .hero-head-video-overlay { 1030 width: 100%; 1031 height: 100%; 1032 grid-area: main; 1033 1034 background: linear-gradient( 1035 0deg, 1036 var(--brand-charcoal) 0%, 1037 color-mix(in srgb, var(--brand-charcoal) 40%, transparent) 20% 1038 ); 1039 position: relative; 1040 } 1041 1042 .page-header-hero .hero-head-logo { 1043 grid-area: main; 1044 width: 22rem; 1045 position: relative; 1046 } 1047 1048 /* Hero navbar */ 1049 1050 .page-header-hero .hero-nav { 1051 grid-area: nav; 1052 background-color: var(--brand-charcoal); 1053 color: #fff; 1054 width: 100%; 1055 } 1056 1057 .page-header-hero .btn-strip { 1058 display: flex; 1059 flex-wrap: wrap; 1060 list-style-type: none; 1061 gap: 0.5rem; 1062 padding-inline-start: 0; /* TODO make this part of the reset? */ 1063 } 1064 1065 .page-header-hero .hero-nav { 1066 display: flex; 1067 flex-direction: column; 1068 gap: 1rem; 1069 padding: 2rem 1.5rem; 1070 } 1071 1072 .page-header-hero .ayac-subhead { 1073 color: var(--brand-yellow); 1074 font-weight: 400; 1075 font-size: 1.75rem; 1076 line-height: 1; 1077 font-family: "Teko", sans-serif; 1078 text-transform: uppercase; 1079 letter-spacing: 0.07125rem; 1080 } 1081 1082 .page-header-hero .ayac-subhead .emph { 1083 text-decoration: underline; 1084 } 1085 1086 .page-header-hero .btn-apply-desktop { 1087 display: none; 1088 } 1089 1090 @media screen and (min-width: 500px) { 1091 .page-header-hero .hero-head-video-container video { 1092 width: 1920px; 1093 } 1094 } 1095 1096 @media screen and (min-width: 1920px) { 1097 .page-header-hero .hero-head-video-container video { 1098 width: 100vw; 1099 } 1100 } 1101 1102 @media screen and (min-width: 768px) { 1103 .page-header-hero .hero-head-logo { 1104 width: 42rem; 1105 } 1106 1107 .page-header-hero .hero-nav { 1108 gap: 2rem; 1109 padding: 2.5rem 1.5rem; 1110 } 1111 1112 .page-header-hero .ayac-subhead { 1113 font-size: 2.375rem; 1114 text-align: center; 1115 } 1116 1117 .page-header-hero .btn-apply-desktop { 1118 display: block; 1119 } 1120 1121 .page-header-hero .btn-apply-mobile { 1122 display: none; 1123 } 1124 1125 .page-header-hero .btn-strip { 1126 justify-content: center; 1127 gap: 2rem; 1128 } 1129 } 1130</style> 1131</header> 1132 <section id="page-content"><!-- Ticker text is added in render from the airtable --> 1133<oc-ticker data-text="La voix du Parti communiste révolutionnaire"> 1134 <oc-with-icon data-name="hamsic" style="--gap: 4px; --icon-height: 20px; --icon-vertical-adjustment: 3px; margin-left: 3px; color: var(--brand-red)"></oc-with-icon> 1135</oc-ticker> 1136 1137<div class="main-wrapper page-wrapper-default"> 1138 <oc-banner data-banner-id="leaderboard_a" data-url="https://www.tickettailor.com/events/rcp/2325544" data-desktop-src="/at-attachment?baseId=appOL9Xy3vy26fyqc&tableName=Banner+ads&recordId=rec6i2Kpjwo71CTjf&columnName=image_desktop&size=full" data-mobile-src="/at-attachment?baseId=appOL9Xy3vy26fyqc&tableName=Banner+ads&recordId=rec6i2Kpjwo71CTjf&columnName=image_mobile&size=full"></oc-banner> 1139 <div id="feed"> 1140 <h2 class="heading-2" data-l10n-id="article-feed_title">Dernier article</h2> 1141 <div id="feed-articles"> 1142 <div class="article-cards"> 1143 <div> 1144 <div class="article-card-wrapper" data-wrapper-index="0"><oc-article-card data-id="22631" data-title="Les communistes envahissent les campus!" data-author="Parti communiste révolutionnaire" data-category="Nos campagnes et événements" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/10/Copy-of-P9020270_11zon-scaled.webp" data-style="featured"><a href="/article/les-communistes-envahissent-les-campus">Les communistes envahissent les campus!</a><div slot="excerpt">Cent personnes ont accepté de se joindre au PCR au cours des cinq dernières semaines!</div></oc-article-card></div> 1145 </div> 1146 <div> 1147 <div class="article-card-wrapper" data-wrapper-index="1"><oc-article-card data-id="22626" data-title="Un nouveau projet de loi sâattaque au droit de grève â préparons-nous à riposter!" data-author="Elliott Frith" data-category="Fédéral" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/09/COVER_STEAMROLLER-1-1024x815_FR_11zon.webp" data-style="standard"><a href="/article/un-nouveau-projet-de-loi-sattaque-au-droit-de-greve-preparons-nous-a-riposter">Un nouveau projet de loi sâattaque au droit de grève â préparons-nous à riposter!</a><div slot="excerpt">En réalité, il ne sâagit pas dâun cadeau fait aux travailleurs, mais de la codification dâun pouvoir qui reposait auparavant sur des base
1147s fragiles.</div></oc-article-card><oc-article-card data-id="22622" data-title="LâAlberta des travailleurs et lâAlberta des patrons" data-author="Daniel DaRosa" data-category="Prairies" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/09/two-albertas-3-600x400-1.webp" data-style="standard"><a href="/article/lalberta-des-travailleurs-et-lalberta-des-patrons">LâAlberta des travailleurs et lâAlberta des patrons</a><div slot="excerpt">Les discussions autour de la séparation sont devenues un exutoire pour tout le mécontentement accumulé des Albertains ordinaires.</div></oc-article-card></div> 1148 </div> 1149 <div> 1150 <div class="article-card-wrapper" data-wrapper-index="2"><oc-article-card data-id="22616" data-title="La Russie de Schrödinger" data-author="Alexandra Sablina" data-category="Europe" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/09/Schrodinger-Russia_11zon.webp" data-style="compact"><a href="/article/la-russie-de-schrodinger">La Russie de Schrödinger</a><div slot="excerpt">« La Russie sâécroulera demain » â « et envahira lâEurope dans cinq ans ».</div></oc-article-card><oc-article-card data-id="22546" data-title="Figaro et la Révolution française" data-author="Alan Woods" data-category="Art et culture" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/09/Capture-decran-2026-09-14-113848.webp" data-style="compact"><a href="/article/figaro-et-la-revolution-francaise">Figaro et la Révolution française</a><div slot="excerpt">On peut lutter contre les tyrans en leur coupant la tête, comme en 1793. Mais lorsque des remèdes aussi drastiques ne sont pas disponibles, il est possible dâutiliser lâarme du ridicule, ce que Beaumarchais et Mozart firent avec beaucoup dâefficacité.</div></oc-article-card><oc-article-card data-id="22609" data-title="Les élections québécoises et la crise du « modèle québécois »" data-author="Hélène Bissonnette et Benoît Tanguay" data-category="Québec" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/09/Ball-of-the-Unloved-crop_11zon.webp" data-style="compact"><a href="/article/les-elections-quebecoises-et-la-crise-du-modele-quebecois">Les élections québécoises et la crise du « modèle québécois »</a><div slot="excerpt">La ruine de lâÃtat-providence nâest pas que le produit dâune simple incompétence administrative ni dâun pur manque de financement : câest un symptôme direct du contrôle de lâÃtat par la classe capitaliste.</div></oc-article-card><oc-article-card data-id="22605" data-title="Le PQ dénonce la cancel culture tout en sâacharnant à canceller une psychiatre" data-author="Vincent Beaudoin" data-category="Québec" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/09/Liberte-dexpression-PQ.webp" data-style="compact"><a href="/article/le-pq-denonce-la-cancel-culture-tout-en-sacharnant-a-canceller-une-psychiatre">Le PQ dénonce la cancel culture tout en sâacharnant à canceller une psychiatre</a><div slot="excerpt">Devant les caméras, le PQ dénonce la culture de lâannulation chaque fois que ses positions réactionnaires sont critiquées. En coulisse, il tente de faire taire ses adversaires politiques et la gauche en se plaignant aux autorités.</div></oc-article-card><oc-article-card data-id="22581" data-title="Ukraine : drones, délires et défaite" data-author="Ben Curry" data-category="Europe" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/09/Smoke_piles_over_moscow_july_2026_1_11zon.webp" data-style="compact"><a href="/article/ukraine-drones-delires-et-defaite">Ukraine : drones, délires et défaite</a><div slot="excerpt">La guerre de drones était un pur spectacle, un prétexte politique pour permettre aux impérialistes européens de « gagner du temps ».</div></oc-article-card></div> 1151 <div class="more-wrapper"> 1152 <a data-l10n-id="article-feed_more-articles" data-l10n-attrs="href" class="btn-ghost more-link" href="/archive"><oc-with-icon data-name="btn-ghost-chevron" data-l10n-name="more-text">Plus dâarticles</oc-with-icon></a> 1153 </div> 1154 </div> 1155 </div> 1156 </div> 1157 <div id="feed-video">
1158 <span id="feed-video-title"> 1159 <h3 data-l10n-id="article-feed_video-title" class="heading-3">Vidéo</h3> 1160 <svg width="12" height="14" viewbox="0 0 12 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> 1161 <path d="M12 7L1.78017e-07 13.9282L1.27811e-08 0.071797L12 7Z" fill="#D71920"></path> 1162 </svg> 1163 </span> 1164 <div> 1165 <div class="video-card-wrapper"></div> 1166 <div class="more-wrapper"> 1167 <a data-l10n-id="article-feed_more-videos" data-l10n-attrs="href" class="btn-ghost more-link" href="https://www.youtube.com/@revcommuniste"><oc-with-icon data-name="btn-ghost-chevron" data-l10n-name="more-text">Plus de vidéos</oc-with-icon></a> 1168 </div> 1169 </div> 1170 </div> 1171 <div id="feed-contributions"> 1172 <div> 1173 <h3 class="heading-4 context-heading-accented" data-l10n-id="article-feed_contributions-title">Contributions</h3> 1174 <p id="contributions-leader" data-l10n-id="article-feed_contributions-leader">Nous voulons tâentendre. <a data-l10n-name="write-us-link" data-l10n-attrs="href" href="/contribuer">Ãcris-nous!</a></p> 1175 <div id="contributions-wrapper" class="article-card-list"><oc-article-card data-id="22538" data-title="La puissance des idées communistes à lâUdeM" data-author="Alexandre Eyrolle, Montréal" data-category="Contributions" data-style="tiny"><a href="/article/la-puissance-des-idees-communistes-a-ludem">La puissance des idées communistes à lâUdeM</a><div slot="excerpt">Si 26 % des jeunes ont un avis favorable envers le communisme, alors, parmi les 70 000 étudiants de lâUdeM, nous avons au moins 18 000 étudiants sur le campus à qui nous devons parler.</div></oc-article-card><oc-article-card data-id="22518" data-title="Les citoyens de Montréal-Nord contre le SPVM" data-author="Simon Berger, Montréal" data-category="Contributions" data-style="tiny"><a href="/article/les-citoyens-de-montreal-nord-contre-le-spvm">Les citoyens de Montréal-Nord contre le SPVM</a><div slot="excerpt">« Combien ça va prendre de plaintes contre des policiers avant que le SPVM cesse de considérer ces actes comme des âincidents isolésâ ? » â Anastasia Marcellin</div></oc-article-card><blockquote id="contributions-excerpt"><span>Lorsque la classe ouvrière entrera en action, elle balayera ces ultra-riches dâune simple pichenette. Toutes leurs richesses, produites par nous mais appropriées par nos exploiteurs, seront alors mises au service de lâhumanité.</span> <cite>â Vincent R Beaudoin, Montréal</cite></blockquote><oc-article-card data-id="22511" data-title="Si tu veux⦠tu ne peux pas" data-author="Landry B., Calgary" data-category="Contributions" data-style="tiny"><a href="/article/si-tu-veux-tu-ne-peux-pas">Si tu veux⦠tu ne peux pas</a><div slot="excerpt">Un homme dâallure plutôt soignée, originaire du Nouveau-Brunswick, mâa demandé une cigarette à la gare. Il mâa expliqué quâil était venu ici pour travailler dans le secteur de la construction, mais que « maintenant que toutes les maisons sont construites pour lâété, je me retrouve sans emploi ». Dans sa ville natale, il avait lâhabitude dâattendre le [â¦]</div></oc-article-card><oc-article-card data-id="22483" data-title="Vingt-sept milliardaires dominent le Québec" data-author="Vincent R. Beaudoin" data-category="Contributions" data-style="tiny"><a href="/article/vingt-sept-milliardaires-dominent-le-quebec">Vingt-sept milliardaires dominent le Québec</a><div slot="excerpt">Le Québec est présentement dominé par 27 milliardaires. On pourrait estimer leur fortune personnelle totale à environ 160 milliards de dollars, ce qui équivaut presque au budget de dépenses du gouvernement du Québec cette année. Et ce montant nâinclut pas la totalité des profits de leurs entreprises, seulement leur fortune personnelle. On peut compter parmi ces parasites [â¦]</div></oc-article-card><oc-article-card data-id="22466" data-title="Lâoffensive de la rentrée à Sherbrooke commence en force!" data-author="Julie C." data-category="Contributions" data-style="tiny"><a href="/article/loffensive-de-la-rentree-a-sherbrooke-commence-en-for
1175ce">Lâoffensive de la rentrée à Sherbrooke commence en force!</a><div slot="excerpt">Armés de nos journaux, de notre bannière rouge « révolution contre les milliardaires » et de nos drapeaux, nous ne sommes pas passés inaperçus.</div></oc-article-card></div> 1176 </div> 1177 <div class="more-wrapper"> 1178 <a data-l10n-id="article-feed_more-contributions" data-l10n-attrs="href" class="btn-ghost more-link" href="/contributions"><oc-with-icon data-name="btn-ghost-chevron" data-l10n-name="more-text">Plus de contributions</oc-with-icon></a> 1179 </div> 1180 </div> 1181 </div> 1182 <span id="financial-collection-banner"></span> 1183 <oc-banner data-banner-id="leaderboard_b"></oc-banner> 1184 <div id="content-hub"> 1185 <h2 class="heading-2" data-l10n-id="content-hub_title">La révolution se prépare</h2> 1186 <div id="content-hub_video"> 1187 <div id="content-hub_video_wrapper"> 1188 <iframe id="content-hub_video-iframe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" src="https://www.youtube.com/embed/qxcVBWsUfIU?si=2ZeR52Mk__s25IRw"></iframe> 1189 </div> 1190 <div id="content-hub_socials"> 1191 <div id="content-hub_socials_title"> 1192 <h3 class="heading-3" data-l10n-id="content-hub_socials_title">Suis nos pages de médias sociaux</h3> 1193 </div> 1194 <oc-social-media-links data-color="parchment"> 1195 </oc-social-media-links></div> 1196 </div> 1197 <div id="content-hub_events"> 1198 <div> 1199 <div id="upcoming-events"><oc-upcoming-events data-events="[{"_table":{"_base":{"_airtable":{},"_id":"appOL9Xy3vy26fyqc"},"id":null,"name":"Events"},"id":"rec3eMASZm14GNP9u","_rawJson":{"id":"rec3eMASZm14GNP9u","createdTime":"2026-08-18T21:15:15.000Z","fields":{"id":170,"region":"Québec","title":"Ãcole communiste de Québec","date":"2026-10-24T13:30:00.000Z","location":"Québec","date_end":"2026-10-25T21:00:00.000Z","site":"fr","url":"https://www.tickettailor.com/events/rcp/2325544"}},"fields":{"id":170,"region":"Québec","title":"Ãcole communiste de Québec","date":"2026-10-24T13:30:00.000Z","location":"Québec","date_end":"2026-10-25T21:00:00.000Z","site":"fr","url":"https://www.tickettailor.com/events/rcp/2325544"}}]"></oc-upcoming-events></div> 1200 </div> 1201 <oc-banner data-banner-id="square_a"></oc-banner> 1202 </div> 1203 </div> 1204 <div id="promotions-section"><oc-book-promo title="Histoire de la philosophie" adline="Livre en vedette" image="/at-attachment?baseId=appOL9Xy3vy26fyqc&tableName=Book+promo&recordId=reczBmiM9S7VEMkPt&columnName=book_image&size=large" link="https://catalogue.marxiste.qc.ca/fr/products/nouveau-histoire-de-la-philosophie-un-point-de-vue-marxiste"></oc-book-promo><oc-paper-promo number="28" image="/at-attachment?baseId=appOL9Xy3vy26fyqc&tableName=Paper&recordId=rec33JqPfAwIDaSRN&columnName=image&size=large" link="https://store.marxist.ca/fr/products/revolution-communiste-no-28"></oc-paper-promo><oc-substack-promo></oc-substack-promo><oc-podcast-promo title="23. Alberta Separatism: How to fight it, and how not to" image="https://image-cdn-ak.spotifycdn.com/image/ab6772ab000015be04a81a1f63b4383a35a7fbee" link="https://open.spotify.com/episode/2ch7UkrBTNgkcm4yOBLPUt?si=R5FTobCEQhGccIxBR3IZnw"></oc-podcast-promo></div> 1205 <oc-education-section></oc-education-section> 1206 <div id="relevant-theory-articles"><oc-article-card data-id="22177" data-title="La débâcle de lâimpérialisme américain en Iran" data-author="Jules Legendre" data-category="Moyen Orient" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/06/trump_iran_image_own_work-1200x800-1.webp" data-style="simple"><a href="/article/la-debacle-de-limperialisme-americain-en-iran">La débâcle de lâimpérialisme américain en Iran</a><div slot="excerpt">Lâaccord conclu mi-juin entre les Ãtats-Unis et lâIran marque une défaite historique pour lâimpérialisme américain. Pour sâen convaincre, il suffit dâénumérer les objectifs quâavait publiquement annoncés Donald Trump au début de la guerre : la destruction du programme nucléaire de lâIran; la destruction de son complexe de missiles balistiques et de drones; la rupture des liens [â¦]</div></oc-article-card><oc-article-card data-id="22111" data-title="Lumière sur la «
1206classe Epstein » : comment la classe dirigeante exerce son pouvoir" data-author="Ben Gliniecki" data-category="Lâimpérialisme et lâÃtat" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/06/Epstein-1-600x400-1.png" data-style="simple"><a href="/article/lumiere-sur-la-classe-epstein-comment-la-classe-dirigeante-exerce-son-pouvoir">Lumière sur la « classe Epstein » : comment la classe dirigeante exerce son pouvoir</a><div slot="excerpt">Lâintérêt des dossiers Epstein réside dans le fait quâils nous montrent le tissu social à travers lequel circulent la richesse et le pouvoir.</div></oc-article-card><oc-article-card data-id="22035" data-title="Le Canada et le nouvel ordre mondial" data-author="Parti communiste révolutionnaire" data-category="Perspectives" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2026/05/perspectives-website-illo-2-768x509-1.png" data-style="simple"><a href="/article/le-canada-et-le-nouvel-ordre-mondial-2">Le Canada et le nouvel ordre mondial</a><div slot="excerpt">Dans la dernière période, les illusions envers le système ont subi des assauts violents dans les esprits des masses.</div></oc-article-card><oc-article-card data-id="18702" data-title="Manifeste du Parti communiste révolutionnaire" data-author="La rédaction" data-category="Analyses" data-featured-image-url="https://admin.marxiste.qc.ca/wp-content/uploads/2024/05/manifesto-website-FR-copy.jpg" data-style="simple"><a href="/article/manifeste-du-parti-communiste-revolutionnaire-2">Manifeste du Parti communiste révolutionnaire</a><div slot="excerpt">Lors du Congrès de fondation du PCR, les délégués rassemblés ont voté à lâunanimité pour adopté le Manifeste du Parti communiste révolutionnaire en tant que document fondateur. Câest sur les principes et avec les méthodes qui y sont détaillés que nous allons construire le parti dont la classe ouvrière a besoin pour renverser le capitalisme!</div></oc-article-card></div> 1207 <div id="wide-promotions"><oc-wide-paper-promo number="28" image="/at-attachment?baseId=appOL9Xy3vy26fyqc&tableName=Paper&recordId=rec33JqPfAwIDaSRN&columnName=image&size=large" link="https://store.marxist.ca/fr/products/revolution-communiste-no-28"></oc-wide-paper-promo><oc-wide-magazine-promo number="10" image="/at-attachment?baseId=appOL9Xy3vy26fyqc&tableName=Paper&recordId=reczqvpqIrx8V7Hls&columnName=image&size=large" link="https://store.marxist.ca/fr/products/defense-du-marxisme-no-10"></oc-wide-magazine-promo></div> 1208 <div id="join-form"> 1209 <oc-join-form> 1210 </oc-join-form></div> 1211</div> 1212<div id="trotsky-banner"> 1213 <div id="trotsky-banner-bg"> 1214 <div id="trotsky-pose"></div> 1215 <div id="trotsky-quote-container"> 1216 <blockquote> 1217 <span data-l10n-id="trotsky-banner_quote">« La vie est belle. Que les générations futures la nettoient de tout mal, de toute oppression et de toute violence, et en jouissent pleinement. »</span> 1218 </blockquote> 1219 <cite>â <span data-l10n-id="trotsky-banner_author">Léon Trotsky</span></cite> 1220 </div> 1221 </div> 1222</div> 1223
1224<script src="/library/components/articleCard/articleCard.ts" type="module"></script>
vendor: 1 bytes, line 1224
1224
1225<script src="/library/components/videoCard/videoCard.ts" type="module"></script>
vendor: 1 bytes, line 1225
1225
1226<script src="/library/components/joinForm/joinForm.ts" type="module"></script>
1226 1227 1228<style> 1229 .hidden { 1230 display: none; 1231 } 1232 1233 /* Remove navbar-height padding on the homepage */ 1234 section#page-content { 1235 padding-top: 0; 1236 } 1237 @media screen and (min-width: 768px) { 1238 section#page-content { 1239 padding-top: 0; 1240 } 1241 } 1242 1243 #ticker { 1244 margin: 24px 0; 1245 1246 font-size: 1.125rem; 1247 text-transform: uppercase; 1248 font-family: Barlow, sans-serif; 1249 font-weight: 700; 1250 } 1251 1252 .main-wrapper { 1253 container-name: main; 1254 container-type: inline-size; 1255 margin: 3em auto; 1256 display: flex; 1257 flex-direction: column; 1258 gap: 64px; 1259 } 1260 1261 #feed { 1262 display: grid; 1263 grid-template-areas: 1264 "title title" 1265 "articles contributions" 1266 "video contributions"; 1267 grid-template-columns: auto minmax(20%, 290px); 1268 } 1269 1270 #feed h2 { 1271 grid-area: title; 1272 margin-bottom: 2rem; 1273 } 1274 1275 #feed-articles { 1276 border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); 1277 container-name: articles; 1278 container-type: inline-size; 1279 grid-area: articles; 1280 padding-bottom: 1em; 1281 } 1282 1283 #feed-video { 1284 grid-area: video; 1285 margin-top: 1em; 1286 display: grid; 1287 gap: 16px; 1288 } 1289 1290 #feed-video-title h3 { 1291 display: inline; 1292 } 1293 1294 #feed-video-title svg { 1295 transform: translateY(-3px); 1296 margin-left: 8px; 1297 } 1298 1299 #feed-contributions { 1300 border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent); 1301 grid-area: contributions; 1302 margin-left: 1em; 1303 padding-left: 1em; 1304 1305 display: flex; 1306 flex-direction: column; 1307 justify-content: space-between; 1308 } 1309 1310 #contributions-leader { 1311 color: var(--brand-grey-1); 1312 font-style: italic; 1313 font-size: 0.875rem; 1314 font-weight: 500; 1315 margin: 0.5rem 0 1rem; 1316 } 1317 1318 #feed-contributions oc-article-card:nth-child(2) { 1319 border: none; 1320 } 1321 1322 blockquote#contributions-excerpt { 1323 font-family: "Barlow", sans-serif; 1324 font-size: 1.25rem; 1325 font-weight: 500; 1326 line-height: 1.2; 1327 font-style: italic; 1328 1329 padding-bottom: 1rem; 1330 } 1331 1332 blockquote#contributions-excerpt span { 1333 background-color: var(--brand-parchment); 1334 } 1335 1336 blockquote#contributions-excerpt cite { 1337 font-size: 0.875rem; 1338 color: var(--brand-red); 1339 display: block; 1340 margin-top: 0.5rem; 1341 } 1342 1343 #content-hub { 1344 display: grid; 1345 grid-template-areas: 1346 "title title" 1347 "video events"; 1348 1349 grid-template-columns: 1fr 280px; 1350 grid-template-rows: auto 3fr; 1351 gap: 32px; 1352 margin-top: 1em; 1353 } 1354 1355 @media screen and (max-width: 800px) { 1356 #content-hub { 1357 grid-template-areas: 1358 "title" 1359 "video" 1360 "events"; 1361 grid-template-columns: 1fr; 1362 grid-template-rows: auto auto auto; 1363 } 1364 } 1365 1366 #content-hub h2 { 1367 grid-area: title; 1368 } 1369 1370 #content-hub #content-hub_video_wrapper { 1371 grid-area: video; 1372 position: relative; 1373 width: 100%; 1374 height: 0; 1375 /* 16:9 */ 1376 padding-bottom: 56.25%; 1377 } 1378 1379 #content-hub #content-hub_video_wrapper iframe { 1380 position: absolute; 1381 top: 0; 1382 left: 0; 1383 width: 100%; 1384 height: 100%; 1385 } 1386 1387 #content-hub #content-hub_socials { 1388 background-color: var(--brand-charcoal); 1389 position: relative; 1390 padding: 4rem 0; 1391 display: flex; 1392 flex-direction: column; 1393 gap: 32px; 1394 justify-content: center; 1395 align-items: center; 1396 } 1397 1398 @media screen and (max-width: 800px) { 1399 #content-hub #content-hub_socials { 1400 padding: 32px 24px; 1401 gap: 24px; 1402 } 1403 } 1404 1405 #content-hub #content-hub_socials::before { 1406 pointer-events: none; 1407 1408 content: ""; 1409 display: block; 1410 width: 100%; 1411 height: 100%; 1412 position: absolute; 1413 top: 0; 1414 left: 0; 1415 mix-blend-mode: overlay; 1416 opacity: 0.6; 1417 background: url(/assets/education/paper-wide.jpg) lightgray 0% 100% / cover 1418 no-repeat; 1419 } 1420 1421 #content-hub #content-hub_socials_title { 1422 background-color: red; 1423 padding: 2px 4px 0px 4px; 1424 } 1425 1426 #content-hub #content-hub_socials_title * { 1427 color: var(--brand-parchment); 1428 filter: drop-shadow(2px 2px 0 var(--brand-charcoal)); 1429 } 1430 1431 #content-hub #content-hub_socials oc-social-media-links { 1432 display: flex; 1433 gap: 1rem; 1434 } 1435 1436 #content-hub #content-hub_socials img { 1437 width: 32px; 1438 height: 32px; 1439 } 1440 1441 #content-hub #content-hub_events { 1442 grid-area: events; 1443 display: flex; 1444 flex-direction: column; 1445 gap: 1.5rem; 1446 } 1447 1448 .article-cards { 1449 display: grid; 1450 grid-auto-columns: 583px auto; 1451 grid-auto-rows: min-content min-content; 1452 grid-gap: 1em; 1453 grid-template-areas: 1454 "featured overflow" 1455 "standard overflow"; 1456 } 1457 1458 .article-cards .article-card-wrapper { 1459 display: grid; 1460 grid-auto-flow: row; 1461 grid-gap: 1em; 1462 grid-template-rows: min-content; 1463 } 1464 1465 .article-cards .article-card-wrapper[data-wrapper-index="1"] oc-article-card, 1466 .article-cards .article-card-wrapper[data-wrapper-index="2"] oc-article-card { 1467 border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); 1468 padding-bottom: 1em; 1469 } 1470 1471 .article-cards 1472 .article-card-wrapper[data-wrapper-index="1"] 1473 oc-article-card:last-child, 1474 .article-cards 1475 .article-card-wrapper[data-wrapper-index="2"] 1476 oc-article-card:last-child { 1477 border-bottom: none; 1478 padding-bottom: 0; 1479 } 1480 1481 .article-cards div:first-child { 1482 grid-area: featured; 1483 } 1484 1485 .article-cards div:nth-child(2) { 1486 grid-area: standard; 1487 } 1488 1489 .article-cards div:nth-child(3) { 1490 border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent); 1491 display: flex; 1492 flex-direction: column; 1493 grid-area: overflow; 1494 justify-content: space-between; 1495 padding-left: 1rem; 1496 } 1497 1498 .article-cards .article-card-wrapper[data-wrapper-index="0"] { 1499 margin-bottom: 0.5em; 1500 } 1501 1502 .article-cards .article-card-wrapper[data-wrapper-index="2"] { 1503 grid-template-rows: repeat(5, min-content); 1504 } 1505 1506 .video-card-wrapper { 1507 display: grid; 1508 grid-auto-flow: column; 1509 grid-template-columns: 1fr 1fr 1fr; 1510 grid-gap: 1em; 1511 } 1512 .more-wrapper { 1513 display: flex; 1514 justify-content: end; 1515 } 1516 1517 a.more-link { 1518 display: block; 1519 text-align: right; 1520 padding: 0; 1521 } 1522 1523 a.more-link.btn-ghost:active { 1524 background: transparent; 1525 } 1526 1527 #feed-video a.more-link { 1528 margin-top: 1em; 1529 } 1530 1531 #promotions-section { 1532 margin: 1em 0; 1533 display: grid; 1534 grid-template-columns: repeat(4, 1fr); 1535 gap: 1rem; 1536 } 1537 1538 #trotsky-banner { 1539 container-name: trotsky-banner; 1540 container-type: inline-size;
1541 border-top: 4px solid var(--brand-charcoal); 1542 background: var(--brand-red); 1543 overflow: hidden; 1544 } 1545 1546 #trotsky-banner-bg::before { 1547 display: block; 1548 content: ""; 1549 background: url(/assets/trotsky-banner/bg-parchment-texture.png) repeat-x; 1550 position: absolute; 1551 width: 100vw; 1552 height: 100%; 1553 left: 0; 1554 clip-path: polygon(166px 0%, -20px 100%, 100% 100%, 100% 0%); 1555 } 1556 1557 #trotsky-banner-bg { 1558 width: 100%; 1559 max-width: 960px; 1560 height: 249px; 1561 background-position: calc(43% + 120px) 50%; 1562 margin: 0 auto; 1563 position: relative; 1564 display: flex; 1565 } 1566 1567 #trotsky-pose { 1568 flex-basis: 180px; 1569 height: 100%; 1570 background: url(/assets/trotsky-banner/[email protected]) no-repeat; 1571 background-position-y: bottom; 1572 background-size: cover; 1573 background-position-x: right; 1574 position: relative; 1575 flex-shrink: 0; 1576 } 1577 1578 #trotsky-quote-container { 1579 margin-left: 43vw; 1580 padding: 16px; 1581 display: flex; 1582 flex-direction: column; 1583 align-items: flex-start; 1584 justify-content: center; 1585 gap: 16px; 1586 height: 100%; 1587 max-width: 330px; 1588 } 1589 1590 #trotsky-banner blockquote { 1591 font-family: "Barlow", sans-serif; 1592 font-size: 1.25rem; 1593 font-style: italic; 1594 font-weight: 600; 1595 line-height: 1; 1596 letter-spacing: 0.0375rem; 1597 } 1598 1599 #trotsky-banner cite { 1600 font-weight: 500; 1601 color: var(--brand-red); 1602 letter-spacing: 0.0375rem; 1603 } 1604 1605 #trotsky-quote-container { 1606 width: 100%; 1607 max-width: 969px; 1608 margin: 0 auto; 1609 position: relative; 1610 } 1611 1612 @container trotsky-banner (min-width: 969px) { 1613 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 1614 #trotsky-pose { 1615 flex-basis: 266px; 1616 background-size: contain; 1617 background-image: url(/assets/trotsky-banner/[email protected]); 1618 } 1619 } 1620 1621 #trotsky-quote-container blockquote { 1622 font-size: 2rem; 1623 letter-spacing: 0.06rem; 1624 } 1625 1626 #trotsky-quote-container cite { 1627 font-size: 1.5rem; 1628 } 1629 1630 #trotsky-banner-bg::before { 1631 clip-path: polygon(266px 0%, 80px 100%, 100% 100%, 100% 0%); 1632 } 1633 } 1634 1635 @container main (max-width: 1045px) { 1636 #promotions-section { 1637 grid-template-columns: repeat(2, 1fr); 1638 } 1639 } 1640 1641 @container main (max-width: 500px) { 1642 #promotions-section { 1643 grid-template-columns: 1fr; 1644 } 1645 } 1646 1647 @container main (max-width: 800px) { 1648 #feed { 1649 grid-template-areas: 1650 "title" 1651 "articles" 1652 "video" 1653 "contributions"; 1654 grid-template-columns: 1fr; 1655 } 1656 1657 #feed-articles { 1658 border-bottom: none; 1659 padding-bottom: 0; 1660 } 1661 1662 #feed-video { 1663 margin-top: 1.5rem; 1664 } 1665 #feed-contributions { 1666 border-left: none; 1667 margin-left: 0; 1668 padding-left: 0; 1669 margin-top: 1.5rem; 1670 } 1671 .more-wrapper { 1672 padding-top: 0.5rem; 1673 } 1674 a.more-link.btn-ghost { 1675 padding: 0.75rem; 1676 } 1677 } 1678 1679 @container main (max-width: 760px) { 1680 .video-card-wrapper { 1681 grid-auto-flow: row; 1682 grid-template-columns: 1fr; 1683 } 1684 } 1685 1686 @container articles (max-width: 800px) { 1687 .article-cards { 1688 grid-auto-columns: auto; 1689 grid-auto-rows: auto auto auto; 1690 grid-template-areas: 1691 "featured" 1692 "standard" 1693 "overflow"; 1694 } 1695 1696 .article-cards 1697 .article-card-wrapper[data-wrapper-index="1"] 1698 oc-article-card:last-child { 1699 border-bottom: 1px solid 1700 color-mix(in srgb, currentColor 15%, transparent); 1701 padding-bottom: 1em; 1702 } 1703 1704 .article-cards div:nth-child(3) { 1705 border-left: none; 1706 padding-left: 0; 1707 } 1708 } 1709 1710 #relevant-theory-articles { 1711 gap: 32px; 1712 display: grid; 1713 grid-template-columns: repeat(4, 1fr); 1714 } 1715 1716 @media screen and (max-width: 900px) { 1717 #relevant-theory-articles { 1718 grid-template-columns: repeat(2, 1fr); 1719 margin: 0 2rem; 1720 } 1721 } 1722 1723 @media screen and (max-width: 768px) { 1724 #relevant-theory-articles { 1725 margin: 0; 1726 } 1727 } 1728 @media screen and (max-width: 560px) { 1729 #relevant-theory-articles { 1730 grid-template-columns: 1fr; 1731 } 1732 } 1733 1734 #wide-promotions { 1735 display: grid; 1736 grid-template-columns: 1fr 1fr; 1737 gap: 1rem; 1738 } 1739 1740 @media screen and (max-width: 1020px) { 1741 #wide-promotions { 1742 grid-template-columns: 1fr; 1743 } 1744 } 1745</style> 1746</section> 1747 <footer id="page-footer"><div class="footer-standard"> 1748 <div class="footer-content-wrapper"> 1749 <div class="column one"> 1750 <div class="logo-wrapper en"> 1751 <img data-l10n-id="footer-logo_horizontal" data-l10n-attrs="src" class="footer-logo horizontal" src="/assets/footer/brand/revolution-communiste-logo-horizontal.svg"> 1752 <img data-l10n-id="footer-logo_initials" data-l10n-attrs="src" class="footer-logo initials" src="/assets/footer/brand/rc-logo-initials.svg"> 1753 </div> 1754 </div> 1755 <div class="column two"> 1756 <p class="text-body"> 1757 <a data-l10n-id="footer-links_join" data-l10n-attrs="href" class="link" href="/rejoindre">Rejoindre</a> 1758 </p> 1759 <p class="text-body"> 1760 <a data-l10n-id="footer-links_subscribe" data-l10n-attrs="href" class="link" href="/abonnement">Sâabonner</a> 1761 </p> 1762 </div> 1763 <div class="column three"> 1764 <p class="text-body"> 1765 <a data-l10n-id="footer-links_donate" data-l10n-attrs="href" class="link" href="/donner">Faire un don</a> 1766 </p> 1767 <p class="text-body"> 1768 <a data-l10n-id="footer-links_program" data-l10n-attrs="href" class="link" href="/programme">Notre programme</a> 1769 </p> 1770 </div> 1771 <div class="column four"> 1772 <p class="text-body"> 1773 <a data-l10n-id="footer-links_store" data-l10n-attrs="href" class="link" href="https://catalogue.marxiste.qc.ca/fr">Catalogue</a> 1774 </p> 1775 <oc-social-media-links class="social-media-wrapper"></oc-social-media-links> 1776 </div> 1777 </div> 1778</div> 1779<style> 1780 .footer-standard { 1781 background-color: var(--brand-charcoal); 1782 width: 100%; 1783 display: grid; 1784 grid-template-columns: 1fr minmax(10px, 1200px) 1fr; 1785 grid-template-rows: auto; 1786 gap: 2rem; 1787 padding: 2rem 0; 1788 } 1789 .footer-standard a.link { 1790 color: var(--brand-parchment); 1791 text-decoration: none; 1792 } 1793 .footer-standard a.link:visited { 1794 color: var(--brand-parchment); 1795 } 1796 .footer-standard a.link:hover { 1797 text-decoration: underline; 1798 } 1799 .footer-standard a.link:active { 1800 color: var(--brand-yellow); 1801 } 1802 .footer-content-wrapper { 1803 display: inline-grid; 1804 grid-template-columns: 2fr 1fr 1fr 2fr; 1805 gap: 2rem; 1806 grid-column: 2; 1807 } 1808 .column.one { 1809 grid-column: 1; 1810 align-self: center; 1811 } 1812 .column.two { 1813 grid-column: 2; 1814 } 1815 .column.three { 1816 grid-column: 3; 1817 } 1818 .column.four { 1819 grid-column: 4; 1820 } 1821 .column p { 1822 margin-bottom: 1rem; 1823 } 1824 .column p:last-child { 1825 margin-bottom: 0; 1826 } 1827 .logo-wrapper { 1828 max-width: 275px; 1829 } 1830 .footer-logo.horizontal { 1831 width: 100%; 1832 } 1833 .footer-logo.initials { 1834 display: none; 1835 } 1836 @media screen and (max-width: 768px) { 1837 .footer-standard { 1838 display: block; 1839 padding: 2rem 1.5rem; 1840 } 1841 .footer-content-wrapper { 1842 display: flex; 1843 flex-direction: column; 1844 text-align: center; 1845 align-items: center; 1846 gap: 1rem; 1847 } 1848 .column { 1849 text-align: center; 1850 } 1851 .footer-logo.initials { 1852 display: block; 1853 } 1854 .footer-logo.horizontal { 1855 display: none; 1856 } 1857 } 1858</style> 1859</footer> 1860 1861 1862<style> 1863 :root {
1864 --brand-red: #D71920; 1865 --brand-charcoal: #231F20; 1866 --brand-parchment: #F6ECC0; 1867 --brand-yellow: #FFCC2B; 1868 --brand-blue: #275A8B; 1869 --brand-light-red: #F7D1D2; 1870 --brand-grey-1: #626060; 1871 --brand-grey-2: #777575; 1872 --brand-grey-3: #9D9C9C; 1873 --brand-grey-4: #E5E5E5; /* 10% screen on black */ 1874 --brand-grey-5: #EAEAEA; 1875 } 1876 1877 body { 1878 background-color: #FFFFFF; 1879 font-family: "Barlow", sans-serif; 1880 margin: 0; 1881 padding: 0; 1882 } 1883 1884 body.no-scroll { 1885 overflow-y: hidden; 1886 } 1887 1888 oc-article-card { 1889 --category-color: var(--brand-red); 1890 --category-color-contrast: #FFFFFF; 1891 --category-font-family: "Teko", sans-serif; 1892 --image-background-color: #F6ECC0; 1893 } 1894 1895 /** Reset **/ 1896 1897 /* Box sizing rules */ 1898 *, 1899 *::before, 1900 *::after { 1901 box-sizing: border-box; 1902 } 1903 1904 /* Remove default margin */ 1905 body, 1906 h1, 1907 h2, 1908 h3, 1909 h4, 1910 h5, 1911 h6, 1912 p, 1913 figure, 1914 blockquote, 1915 dl, 1916 dd, 1917 ul, 1918 li { 1919 margin: 0; 1920 padding: 0; 1921 } 1922 1923 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ 1924 ul[role='list'], 1925 ol[role='list'] { 1926 list-style: none; 1927 } 1928 1929 /* Set core root defaults */ 1930 html:focus-within { 1931 scroll-behavior: smooth; 1932 } 1933 1934 /* Set core body defaults */ 1935 body { 1936 min-height: 100vh; 1937 text-rendering: optimizeSpeed; 1938 line-height: 1.5; 1939 } 1940 1941 /* A elements that don't have a class get default styles */ 1942 a:not([class]) { 1943 text-decoration-skip-ink: auto; 1944 } 1945 1946 /* Make images easier to work with */ 1947 img, 1948 picture { 1949 max-width: 100%; 1950 display: block; 1951 } 1952 1953 /* Inherit fonts for inputs and buttons */ 1954 input, 1955 button, 1956 textarea, 1957 select { 1958 font: inherit; 1959 } 1960 1961 button, 1962 input[type="button"] { 1963 border: none; 1964 } 1965 1966 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ 1967 @media (prefers-reduced-motion: reduce) { 1968 html:focus-within { 1969 scroll-behavior: auto; 1970 } 1971 1972 *, 1973 *::before, 1974 *::after { 1975 animation-duration: 0.01ms !important; 1976 animation-iteration-count: 1 !important; 1977 transition-duration: 0.01ms !important; 1978 scroll-behavior: auto !important; 1979 } 1980 } 1981 1982 /* Nav elements */ 1983 1984 #page-nav { 1985 z-index: 9000; 1986 } 1987 1988 /* Navbar-height padding for page content; unset on the homepage */ 1989 #page-content { 1990 padding-top: calc(var(--nav-masthead-height) + 8px); 1991 } 1992 @media screen and (min-width: 768px) { 1993 #page-content { 1994 padding-top: calc(var(--nav-masthead-height) + var(--nav-menu-height) + 16px); 1995 } 1996 } 1997 1998 oc-nav oc-paper-promo { 1999 display: none; 2000 } 2001 2002 #page-nav button { 2003 color: inherit; 2004 } 2005 2006 /* Disable scrolling if the mobile nav is open */ 2007 @media screen and (max-width: 768px) { 2008 html[data-scroll-disable], 2009 html[data-scroll-disable] body { 2010 overflow: hidden; 2011 } 2012 } 2013</style>
2014<script type="module"> 2015 import "/library/components/banner/banner.ts"; 2016 import "/library/components/financialCollectionBanner/financialCollectionBanner.ts"; 2017 import "/library/components/formInput/formInput.ts"; 2018 import "/library/components/joinForm/joinForm.ts"; 2019 import "/library/components/localizable/localizable.ts"; 2020 import "/library/components/navigation/navigation.ts"; 2021 import "/library/components/promos/cards/index.ts"; 2022 import "/library/components/searchBar/searchBar.ts"; 2023 import "/library/components/socialMediaLinks/socialMediaLinks.ts"; 2024 import "/library/components/upcomingEvents/upcomingEvents.ts" 2025 import "/library/components/withIcon/withIcon.ts"; 2026 import "/library/components/ticker/ticker.ts"; 2027 import "/library/theme/searchBar.ts"; 2028 import "/library/components/winterSchool/session.ts"; 2029 import "/library/components/picker/picker.ts"; 2030 import "/library/components/school/schoolSession.ts"; 2031</script>
vendor: 1 bytes, line 2031
2031
2032<script> 2033 if (["local", "development"].includes(window.october.environment.type)) { 2034 const SERVER_URL = "localhost:8080"; 2035 const debounce = (f, timeout = 300) => { 2036 let t; 2037 return (...xs) => { 2038 if (!t) { 2039 f(...xs); 2040 } 2041 clearTimeout(t); 2042 t = setTimeout(() => { 2043 t = undefined; 2044 }, timeout); 2045 }; 2046 }; 2047 2048 const debouncedReload = debounce(() => { 2049 globalThis.location.reload(); 2050 }); 2051 2052 const socket = new WebSocket(`ws://${SERVER_URL}/development/socket`); 2053 2054 socket.addEventListener("message", (event) => { 2055 // Reloads page on file system updates. 2056 if (event.data.startsWith("e=fs;")) { 2057 debouncedReload(); 2058 } 2059 }); 2060 } 2061</script>
2061 2062 2063 2064<template name="article-card.html"><a class="card" href=""> 2065 <img data-featured-image="" width="600" height="400"> 2066 <div data-category=""></div> 2067 <div class="card__details"> 2068 <h3 data-title=""></h3> 2069 <div class="meta"> 2070 <span data-author=""></span> 2071 </div> 2072 <slot name="excerpt"></slot> 2073 </div> 2074</a> 2075 2076<style> 2077 :host { 2078 --category-color: black; 2079 --category-color-contrast: white; 2080 --category-font-family: inherit; 2081 --image-background-color: beige; 2082 display: block; 2083 font-family: inherit; 2084 font-size: 1rem; 2085 height: fit-content; 2086 } 2087 2088 :host ::slotted([slot="excerpt"]) { 2089 display: none; 2090 } 2091 2092 :host([data-style="featured"]) ::slotted([slot="excerpt"]) { 2093 display: block; 2094 } 2095 2096 a { 2097 text-decoration: none; 2098 } 2099 2100 a:link, a:visited { 2101 color: currentColor; 2102 } 2103 2104 a:hover { 2105 color: var(--brand-red); 2106 } 2107 2108 .card { 2109 display: grid; 2110 grid-template-rows: auto min-content; 2111 grid-gap: 0.5rem; 2112 height: 100%; 2113 position: relative; 2114 } 2115 2116 [data-category] { 2117 font-family: var(--category-font-family); 2118 color: var(--category-color); 2119 grid-area: category; 2120 text-transform: uppercase; 2121 font-size: 1.125rem; 2122 letter-spacing: 0.03375rem; 2123 line-height: 1; 2124 } 2125 2126 [data-featured-image] { 2127 aspect-ratio: 1.5; 2128 background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iOTIiIHZpZXdCb3g9IjAgMCA2NSA5MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTY0LjY5MSAzOS4wNzI3QzY0LjY5MSAxNS41NzI4IDQ0LjUyNTEgMCAyNi44Njk4IDBDMTEuMDUwMyAwIDAuOTM1ODU1IDkuNDg3MDEgMC45MzU4NTUgOS40ODcwMUMxMS42NTMyIDUuMjc4NjIgMTkuODg2OSA1LjM4NzQ2IDI3Ljc3ODcgNi41MzkzMkMzOS41MjE5IDguMjYyNTggNTMuNzU3NyAyMC43NDI2IDUyLjAwMyAzOC43MjhDNTEuNDQ1IDQzLjQzNTMgNDguOTM0NCA1MS41ODkgNDIuNTA5NCA1Ny41NjZMMzEuMjI1MiAzOS44ODlMMzMuODM0OCAzOC4xOTI5TDQwLjA3OTggMjguODMyOUwzNC40MTk3IDE5Ljk0NDVMMjMuMzYwNCAyMS43ODU3TDIwLjc1MDggMjMuNDcyNkw5LjY2NDUxIDMwLjY0NjhMNi45NzM5MiAzMi4zODgyTDAuNzI4ODg3IDQxLjc3NTVMNi4zODkwMSA1MC42NjM5TDE3LjQ4NDMgNDguNzk1NUwyMC4xMjk5IDQ3LjA5MDRMMzAuODM4MiA2My45MjM5QzI0LjU0ODIgNjUuNTY1NiAxNi41MjE0IDY1LjQ5MyA2LjMyNjAyIDYyLjQ2MzdMMCA5MS4yOTY2TDEzLjY5NTkgOTEuMzIzOEwxNi43Mzc0IDc3LjA4NDJDMjIuNzM5NSA3OC40NzE5IDMwLjQ3ODMgNzcuODQ2MSAzNy45OTIxIDc1LjE1MjNMNDguMjc3NSA5MS4zMTQ3SDY0LjA3MDFMNDkuNzQ0MyA2OC44NzZDNTguMzExIDYyLjQ3MjggNjQuNyA1Mi41OTU4IDY0LjcgMzkuMDYzNkw2NC42OTEgMzkuMDcyN1oiIGZpbGw9IiNFREQ5ODEiLz4KPC9zdmc+Cg==) 2129 var(--image-background-color); 2130 background-position: center center; 2131 background-repeat: no-repeat; 2132 display: block; 2133 grid-area: image; 2134 height: auto; 2135 object-fit: cover; 2136 width: 100%; 2137 } 2138 2139 [data-title] { 2140 -webkit-box-orient: vertical; 2141 -webkit-line-clamp: 3; 2142 display: -webkit-box; 2143 margin: 0; 2144 overflow-y: hidden; 2145 padding-bottom: 2px; /* prevent text cutoff on last line */ 2146 2147 font-size: 1rem; 2148 line-height: 1.1; 2149 font-weight: 600; 2150 } 2151 2152 .card__details { 2153 grid-area: details; 2154 display: flex; 2155 flex-direction: column; 2156 gap: 0.5rem; 2157 } 2158 2159 .meta { 2160 font-size: 0.8125rem; 2161 color: var(--brand-grey-1); 2162 } 2163 2164 slot[name="excerpt"] { 2165 grid-area: excerpt; 2166 font-size: 1rem; 2167 line-height: 1.3; 2168 -webkit-box-orient: vertical; 2169 -webkit-line-clamp: 5; 2170 /* In most cases, the excerpt is hidden */ 2171 display: none; 2172 margin: 0; 2173 overflow-y: hidden; 2174 padding-bottom: 2px; /* prevent text cutoff on last line */ 2175 } 2176 2177 :host([data-style="featured"]) .card { 2178 display: grid; 2179 grid-template-areas: 2180 "image" 2181 "details"; 2182 grid-template-rows: auto auto; 2183 grid-row-gap: 0.5rem; 2184 } 2185 2186 :host([data-style="featured"]) [data-featured-image] { 2187 margin-bottom: 0.5rem; 2188 } 2189 2190 :host([data-style="featured"]) [data-category] { 2191 background-color: var(--category-color); 2192 color: var(--category-color-contrast); 2193 font-size: 1.5rem; 2194 letter-spacing: 0.045rem; 2195 grid-area: image; 2196 position: absolute; 2197 top: 0; 2198 left: 0; 2199 border-radius: 0 0 2px 0; 2200 font-weight: 400; 2201 height: auto; 2202 padding: 5px 8px 2px 8px; 2203 } 2204 2205 :host([data-style="featured"]) h3[data-title] { 2206 font-size: 1.5rem; 2207 line-height: 1.1; 2208 } 2209 2210 :host([data-style="standard"]) .card, 2211 :host([data-style="search"]) .card { 2212 display: grid; 2213 grid-column-gap: 1rem; 2214 grid-template-areas: 2215 "image category" 2216 "image details"; 2217 grid-template-columns: 144px 1fr; 2218 grid-template-rows: auto auto; 2219 grid-row-gap: 0.5rem; 2220 height: 100%; 2221 font-size: 1rem; 2222 position: relative; 2223 } 2224 2225 :host([data-style="tiny"]) [data-category] { 2226 display: none; 2227 } 2228 2229 :host([data-style="tiny"]) .card__details { 2230 gap: 6px; 2231 } 2232 2233 :host([data-style="standard"]) h3[data-title], 2234 :host([data-style="search"]) h3[data-title] { 2235 font-size: 1.25rem; 2236 line-height: 1.1; 2237 } 2238 2239 :host([data-style="compact"]) .card { 2240 grid-template-areas: 2241 "category" 2242 "details"; 2243 grid-template-rows: 1.2rem auto; 2244 } 2245 2246 :host([data-style="tiny"]) .card { 2247 grid-template-areas: "details"; 2248 grid-template-rows: auto; 2249 } 2250 2251 :host([data-style="tiny"]) h3[data-title] { 2252 font-weight: 500; 2253 } 2254 2255 :host([data-style="compact"]) img, 2256 :host([data-style="tiny"]) img { 2257 display: none; 2258 } 2259 2260 :host([data-style="simple"]) .card { 2261 grid-column-gap: 1rem; 2262 grid-template-areas: 2263 "image" 2264 "details"; 2265 grid-template-columns: 1fr; 2266 grid-template-rows: 1fr auto; 2267 } 2268 :host([data-style="simple"]) .card__details { 2269 gap: 0; 2270 } 2271 2272 @container (500px > width) { 2273 [data-category] { 2274 font-size: 1rem; 2275 letter-spacing: 0.03rem; 2276 } 2277 2278 :host([data-style="featured"]) { 2279 margin-left: calc((-100vw + 100%) / 2); 2280 margin-right: calc((-100vw + 100%) / 2); 2281 width: 100vw; 2282 } 2283 2284 :host([data-style="featured"]) .card__details { 2285 background-color: white; 2286 box-shadow: 4px 4px 0 0 black; 2287 left: 0; 2288 margin-inline: 1.5rem; 2289 padding: 1.5rem 1rem 1rem 1rem; 2290 position: relative; 2291 top: -2rem; 2292 } 2293 2294 :host([data-style="featured"]) [data-category] { 2295 background-color: var(--category-color); 2296 color: var(--category-color-contrast); 2297 font-size: 1rem; 2298 position: absolute; 2299 padding: 6px 8px 4px 8px; 2300 text-transform: uppercase; 2301 z-index: 100; 2302 grid-area: details; 2303 left: 3rem; 2304 top: -2.75rem; 2305 border-radius: 2px; 2306 height: auto; 2307 line-height: 1; 2308 } 2309 2310 :host([data-style="featured"]) h3[data-title] { 2311 font-size: 1.375rem; 2312 } 2313 2314 :host([data-style="standard"]) .card, 2315 :host([data-style="search"]) .card { 2316 grid-template-areas: 2317 "category image" 2318 "details image"; 2319 grid-template-columns: 1fr 70px; 2320 } 2321 2322 :host([data-style="standard"]) .card [data-featured-image], 2323 :host([data-style="search"]) .card [data-featured-image] { 2324 aspect-ratio: 1/1; 2325 } 2326 2327 :host([data-style="standard"]) h3[data-title], 2328 :host([data-style="search"]) h3[data-title] { 2329 font-size: 1rem; 2330 line-height: 1.1; 2331 } 2332 } 2333</style> 2334</template><template name="article-loader-button.html"><button class="btn-ghost"> 2335 <oc-toggle-loader> 2336 <oc-with-icon data-name="chevron-down-alternate"> 2337 <slot name="default">
2338 <span data-l10n-id="article-loader-button_load-more">Voir plus dâarticles</span> 2339 </slot> 2340 </oc-with-icon> 2341 </oc-toggle-loader> 2342 <slot name="no-action"> 2343 <span data-l10n-id="article-loader-button_no-action">Fin de la liste</span> 2344 </slot> 2345</button> 2346 2347<link rel="stylesheet" href="/library/theme/buttons.css"> 2348 2349<style> 2350 /* Reset should be moved to the theme to be easier to pull in */ 2351 button { 2352 border: none; 2353 } 2354 2355 slot[name="no-action"] { 2356 display: none; 2357 } 2358 2359 :host([data-state="no-action"]) oc-toggle-loader { 2360 display: none; 2361 } 2362 2363 :host(:not([data-state="default"])) button { 2364 cursor: default; 2365 } 2366 2367 :host([data-state="no-action"]) slot[name="no-action"] { 2368 color: var(--brand-grey-1); 2369 display: block; 2370 font-style: italic; 2371 } 2372</style> 2373</template><template name="banner.html"><div> 2374 <a id="banner-desktop" href="#"></a> 2375 <a id="banner-mobile" href="#"></a> 2376</div> 2377 2378<style> 2379 :host { 2380 display: block; 2381 } 2382 2383 img { 2384 width: 100%; 2385 } 2386 2387 #banner-mobile { 2388 display: block; 2389 } 2390 #banner-desktop { 2391 display: none; 2392 } 2393 2394 @media screen and (min-width: 768px) { 2395 #banner-mobile { 2396 display: none; 2397 } 2398 #banner-desktop { 2399 display: block; 2400 } 2401 } 2402</style> 2403</template><template name="education-card.html"><div class="education-card" data-education-card=""> 2404 <div class="education-card-body"> 2405 <div class="wrapper-tags"> 2406 <div data-tags="" class="empty"> 2407 <span class="tag"></span> 2408 </div> 2409 <div class="wrapper-author"> 2410 <h5 class="title" data-title=""></h5> 2411 <span class="author" data-author=""></span> 2412 </div> 2413 </div> 2414 <img class="image-section" data-image=""> 2415 </div> 2416 <div class="education-card-links"> 2417 <a data-read-link="" class="cta-link"> 2418 <oc-with-icon data-name="mouse-pointer" data-position="before" data-l10n-id="edu-page-cta-read">Lire en ligne</oc-with-icon> 2419 </a> 2420 <a data-buy-link="" class="cta-link"> 2421 <oc-with-icon data-name="book-open" data-position="before" data-l10n-id="edu-page-cta-buy">Acheter une copie</oc-with-icon> 2422 </a> 2423 <a data-listen-link="" class="cta-link"> 2424 <oc-with-icon data-name="headphones" data-position="before" data-l10n-id="edu-page-cta-listen">Ãcouter</oc-with-icon> 2425 </a> 2426 <a data-watch-link="" class="cta-link"> 2427 <oc-with-icon data-name="video" data-position="before" data-l10n-id="edu-page-cta-watch">Regarder</oc-with-icon> 2428 </a> 2429 </div> 2430 <div class="education-card-related empty" data-related=""> 2431 <span class="related" data-l10n-id="edu-page-related-title">Connexe</span> 2432 </div> 2433</div> 2434 2435<style> 2436 .education-card { 2437 box-sizing: border-box; 2438 display: flex; 2439 flex-direction: column; 2440 align-items: flex-start; 2441 padding: 32px; 2442 padding-bottom: 24px; 2443 gap: 16px; 2444 background: #ffffff; 2445 border: 1px solid #231f20; 2446 height: 100%; 2447 justify-content: space-between; 2448 } 2449 2450 .education-card.featured { 2451 box-shadow: 4px 4px var(--brand-charcoal); 2452 } 2453 2454 .education-card-body { 2455 width: 100%; 2456 display: flex; 2457 justify-content: space-between; 2458 align-items: center; 2459 gap: 2rem; 2460 } 2461 2462 .education-card-body { 2463 .title { 2464 font-family: "Barlow"; 2465 font-style: normal; 2466 font-weight: 600; 2467 font-size: 20px; 2468 line-height: 110%; 2469 color: #231f20; 2470 overflow: hidden; 2471 text-overflow: ellipsis; 2472 display: -webkit-box; 2473 -webkit-line-clamp: 2; 2474 -webkit-box-orient: vertical; 2475 } 2476 2477 .author { 2478 font-family: "Barlow"; 2479 font-style: normal; 2480 font-weight: 500; 2481 font-size: 16px; 2482 line-height: 130%; 2483 color: #626060; 2484 overflow: hidden; 2485 text-overflow: ellipsis; 2486 display: -webkit-box; 2487 -webkit-line-clamp: 1; 2488 -webkit-box-orient: vertical; 2489 } 2490 2491 .tag { 2492 position: relative; 2493 box-sizing: border-box; 2494 padding: 6px 8px 1px 8px; 2495 background: #f8f1d1; 2496 border: 1px solid rgba(35, 31, 32, 0.1); 2497 border-radius: 2px; 2498 font-family: "Teko"; 2499 font-style: normal; 2500 font-weight: 500; 2501 font-size: 18px; 2502 line-height: 100%; 2503 letter-spacing: 0.03em; 2504 text-transform: uppercase; 2505 color: #9a0a0a; 2506 text-wrap: nowrap; 2507 } 2508 2509 .tag:empty { 2510 display: none; 2511 } 2512 2513 .tag span.tooltip { 2514 display: none; 2515 } 2516 2517 .tag.extra:hover span.tooltip .arrow { 2518 display: block; 2519 position: absolute; 2520 top: 0; 2521 left: 50%; 2522 transform: translate(-50%, -8px) rotate(45deg); 2523 background: var(--brand-charcoal);
2524 width: 20px; 2525 height: 20px; 2526 z-index: 1; 2527 } 2528 .tag.extra:hover span.tooltip { 2529 display: block; 2530 position: absolute; 2531 top: 150%; 2532 left: 50%; 2533 transform: translate(-50%, 0); 2534 width: auto; 2535 height: auto; 2536 background: var(--brand-charcoal); 2537 color: white; 2538 font-family: "Barlow"; 2539 text-transform: capitalize; 2540 padding: 16px; 2541 box-shadow: 0px 1px 4px 1px #0000005e; 2542 z-index: 100; 2543 font-size: 0.8em; 2544 } 2545 2546 .wrapper-author { 2547 display: flex; 2548 flex-direction: column; 2549 gap: 8px; 2550 } 2551 2552 .wrapper-tags { 2553 gap: 16px; 2554 display: flex; 2555 flex-direction: column; 2556 align-self: flex-start; 2557 } 2558 2559 .wrapper-tags div[data-tags] { 2560 gap: 8px; 2561 display: flex; 2562 flex-direction: row; 2563 flex-wrap: wrap; 2564 } 2565 .wrapper-tags div[data-tags].empty { 2566 display: none; 2567 } 2568 img { 2569 width: 100%; 2570 height: 100%; 2571 width: 100%; 2572 max-width: 120px; 2573 } 2574 2575 img[src=""] { 2576 display: none; 2577 } 2578 } 2579 2580 /* dont show tags on featured items */ 2581 .education-card.featured .education-card-body .tag { 2582 display: none; 2583 } 2584 2585 .education-card.featured .education-card-related { 2586 display: none; 2587 } 2588 2589 .cta-link { 2590 padding: 0.75rem 0 0.5rem 0; 2591 border-radius: 0.1875rem; 2592 text-align: center; 2593 font-family: "Barlow", sans-serif; 2594 font-size: 1rem; 2595 font-weight: 500; 2596 text-decoration: none; 2597 color: var(--brand-blue); 2598 cursor: pointer; 2599 display: none; 2600 } 2601 2602 .cta-link[href] { 2603 /* only show the link if it has the href supplied */ 2604 display: inline; 2605 } 2606 2607 .education-card-links { 2608 display: flex; 2609 gap: 1.5rem; 2610 } 2611 2612 .education-card-related { 2613 align-self: stretch; 2614 align-items: flex-start; 2615 border-top: 1px solid #dcdcdc; 2616 display: flex; 2617 flex-direction: row; 2618 gap: 32px; 2619 padding-left: 32px; 2620 padding-right: 32px; 2621 padding-top: 16px; 2622 padding-bottom: 0; 2623 2624 /* extend borders to edge of parent */ 2625 margin-left: -32px; 2626 margin-right: -32px; 2627 } 2628 2629 .education-card-related .related { 2630 font-family: "Teko"; 2631 font-weight: 500; 2632 text-transform: uppercase; 2633 font-size: 18px; 2634 line-height: 100%; 2635 letter-spacing: 0.03em; 2636 color: #626060; 2637 padding-top: 6px; 2638 padding-bottom: 6px; 2639 flex-shrink: 0; 2640 } 2641 2642 .education-card-related.empty { 2643 display: none; 2644 } 2645 2646 .education-card-related ul { 2647 display: grid; 2648 grid-template-columns: auto auto auto; 2649 column-gap: 24px; 2650 row-gap: 8px; 2651 padding: 0; 2652 margin: 0; 2653 list-style: none; 2654 font-size: 14px; 2655 color: #231f20; 2656 } 2657 .education-card-related li { 2658 display: contents; 2659 } 2660 .education-card-related .related-title { 2661 grid-column: 1; 2662 } 2663 .education-card-related .related-link-1 { 2664 grid-column: 2; 2665 } 2666 .education-card-related .related-link-2 { 2667 grid-column: 3; 2668 } 2669 2670 /* Mobile overrides */ 2671 @media screen and (max-width: 768px) { 2672 .education-card { 2673 padding: 1.5rem; 2674 } 2675 2676 .education-card.featured { 2677 box-shadow: none; 2678 } 2679 2680 .education-card.featured .education-card-body { 2681 flex-direction: column; 2682 gap: 1rem; 2683 } 2684 2685 .education-card:not(.featured) .education-card-body img { 2686 display: none; 2687 } 2688 .education-card.featured .education-card-body img { 2689 max-width: 100%; 2690 } 2691 .wrapper-tags { 2692 width: 100%; 2693 } 2694 2695 .education-card .education-card-links { 2696 flex-wrap: wrap; 2697 } 2698 2699 .education-card.featured .education-card-links { 2700 width: 100%; 2701 justify-content: space-around; 2702 } 2703 } 2704</style> 2705</template><template name="library.html"><div id="library-wrapper"> 2706 <section class="page-container"> 2707 <h3 class="heading-3 margin-bottom-1" data-l10n-id="edu-page-collections-title">Collections</h3> 2708 <div id="education-category-wrappers"></div> 2709 <div id="education-category-below"> 2710 <span data-l10n-id="edu-page-know-what-your-looking-for">Vous savez ce que vous cherchez?</span> 2711 <span data-l10n-id="edu-page-browse-library-text"><a id="browse-library-link" data-l10n-name="edu-page-browse-our-library" href="#library">Parcourez notre bibliothèque</a> et filtrez par sujet, format ou auteur.</span> 2712 </div> 2713 </section> 2714 2715 <section id="featured-wrapper" class="page-container empty"> 2716 <h3 class="heading-3 margin-bottom-1" data-l10n-id="edu-page-featured-title">En vedette</h3> 2717 <div id="featured-results" class="content-grid"></div> 2718 </section> 2719 2720 <section id="library"> 2721 <div class="page-container"> 2722 <h3 class="heading-3 margin-bottom-1" data-l10n-id="edu-page-library-title">Bibliothèque</h3> 2723 <div class="tabs"> 2724 <button class="tablinks" data-name="all" data-l10n-id="edu-page-all-tab">Tous</button> 2725 </div> 2726 </div> 2727 2728 <div class="tab-content-wrapper"> 2729 <div class="page-container"> 2730 <div class="small-only"> 2731 <button class="filters-btn" data-l10n-id="edu-page-filters-btn"><oc-with-icon data-name="filters" data-position="before" data-l10n-name="edu-page-filters-btn-text">Filtres</oc-with-icon></button> 2732 </div> 2733 <div class="filter-bar-wrapper" data-filters-bar=""> 2734 <div class="filters-bar">
2735 <span data-l10n-id="edu-page-filter-by">Filtrer par</span> 2736 <oc-picker name="filter-format" data-l10n-id="edu-page-filter-format" data-l10n-attrs="label-prefix, placeholder, back-button-label" label-prefix="Format:" placeholder="Format" back-button-label="Revenir au menu précédent"> 2737 <option value="">â</option> 2738 </oc-picker> 2739 <oc-picker name="filter-topic" data-l10n-id="edu-page-filter-topic" data-l10n-attrs="label-prefix, placeholder, back-button-label" label-prefix="Sujet:" placeholder="Sujet" back-button-label="Revenir au menu précédent"> 2740 <option value="">â</option> 2741 </oc-picker> 2742 <oc-picker name="filter-author" data-l10n-id="edu-page-filter-author" data-l10n-attrs="label-prefix, placeholder, back-button-label" label-prefix="Auteur:" placeholder="Auteur" back-button-label="Revenir au menu précédent"> 2743 <option value="">â</option> 2744 </oc-picker> 2745 </div> 2746 <button id="clear-filters" data-l10n-id="edu-page-clear-filters">Réinitialiser les filtres</button> 2747 </div> 2748 <div id="filtered-library-results" class="content-grid"></div> 2749 <div class="no-results" data-l10n-id="edu-page-no-results">Aucun résultat trouvé</div> 2750 </div> 2751 </div> 2752 </section> 2753</div> 2754 2755<style> 2756 #library-wrapper { 2757 display: flex; 2758 flex-direction: column; 2759 gap: 64px; 2760 } 2761 2762 #featured-wrapper.empty { 2763 display: none; 2764 } 2765 2766 #education-category-wrappers { 2767 display: flex; 2768 flex-direction: row; 2769 justify-content: space-between; 2770 gap: 2rem; 2771 } 2772 2773 .education-category { 2774 display: flex; 2775 flex-direction: column; 2776 justify-content: flex-end; 2777 width: 50%; 2778 height: 138px; 2779 position: relative; 2780 text-decoration: none; 2781 } 2782 2783 .education-category:first-of-type .education-category-title span { 2784 background: #9a0a0a; 2785 } 2786 2787 .education-category-bg { 2788 position: absolute; 2789 width: 100%; 2790 height: 100%; 2791 transition: all 0.2s ease-in-out; 2792 background-size: cover; 2793 } 2794 2795 .education-category-title { 2796 position: relative; 2797 display: flex; 2798 flex-direction: column; 2799 align-items: start; 2800 justify-content: start; 2801 font-size: 3rem; 2802 line-height: 80%; 2803 padding: 8px; 2804 letter-spacing: 0.06em; 2805 } 2806 2807 .education-category-title span { 2808 background: #2a6988; 2809 color: #fbf7e6; 2810 padding: 3px 3px 0px 3px; 2811 } 2812 2813 .education-category { 2814 overflow: hidden; 2815 } 2816 2817 .education-category:hover .education-category-bg { 2818 transform: scale(1.05); 2819 } 2820 2821 #education-category-below { 2822 color: #231f20; 2823 margin-top: 2rem; 2824 display: flex; 2825 flex-direction: row; 2826 justify-content: center; 2827 gap: 1.5rem; 2828 } 2829 2830 #education-category-below span:first-child { 2831 border-left: 3px solid #d71920; 2832 letter-spacing: 0.03em; 2833 text-transform: uppercase; 2834 font-family: "Teko"; 2835 font-weight: 400; 2836 font-size: 24px; 2837 line-height: 18px; 2838 padding-left: 12px; 2839 padding-top: 5px; 2840 } 2841 2842 #education-category-below span:last-child { 2843 font-family: "Barlow"; 2844 font-style: normal; 2845 font-weight: 500; 2846 font-size: 16px; 2847 line-height: 130%; 2848 } 2849 2850 #library { 2851 scroll-margin-top: calc( 2852 calc(var(--nav-masthead-height) + var(--nav-menu-height)) + 1rem 2853 ); 2854 } 2855 2856 @media screen and (max-width: 768px) { 2857 #library { 2858 scroll-margin-top: calc(calc(var(--nav-masthead-height) + 1rem)); 2859 } 2860 } 2861 2862 .content-grid { 2863 display: grid; 2864 grid-template-columns: repeat(2, 1fr); 2865 gap: 2rem; 2866 } 2867 2868 @media screen and (max-width: 768px) { 2869 .content-grid { 2870 grid-template-columns: auto; 2871 } 2872 } 2873 2874 .education-category { 2875 cursor: pointer; 2876 } 2877 2878 .tabs { 2879 display: flex; 2880 flex-direction: row; 2881 gap: 1.5rem; 2882 } 2883 .tabs button { 2884 font-family: "Teko"; 2885 font-style: normal; 2886 font-weight: 500; 2887 font-size: 20px; 2888 line-height: 100%; 2889 text-align: center; 2890 text-transform: uppercase; 2891 color: #626060; 2892 background: transparent; 2893 padding: 0.4rem 0; 2894 border-bottom: solid 2px transparent; 2895 cursor: pointer; 2896 } 2897 2898 .tabs button.active { 2899 color: var(--brand-charcoal); 2900 border-bottom: solid 2px var(--brand-red); 2901 } 2902 2903 .tab-content-wrapper { 2904 background: #f8f8f8; 2905 width: 100%; 2906 padding: 32px 0px; 2907 display: flex; 2908 flex-direction: column; 2909 gap: 2rem; 2910 } 2911 2912 .tab-content { 2913 display: none; 2914 } 2915 2916 .tab-content.active { 2917 display: block; 2918 } 2919 2920 .filter-bar-wrapper { 2921 display: flex; 2922 flex-direction: row; 2923 align-items: center; 2924 justify-content: space-between; 2925 margin-bottom: 2rem; 2926 } 2927 2928 .filter-bar-wrapper.hidden { 2929 display: none; 2930 } 2931 2932 .filters-bar { 2933 display: flex; 2934 flex-direction: row; 2935 gap: 1rem;
2936 align-items: center; 2937 } 2938 2939 .filters-bar oc-picker::part(dropdown) { 2940 max-height: round( 2941 calc(85dvh - calc(155px + var(--nav-masthead-height))), 2942 40px 2943 ); 2944 } 2945 2946 .content-grid { 2947 display: grid; 2948 grid-template-columns: repeat(2, 1fr); 2949 gap: 2rem; 2950 grid-template-rows: 1fr; 2951 } 2952 2953 @media screen and (max-width: 768px) { 2954 .content-grid { 2955 grid-template-columns: auto; 2956 } 2957 2958 .filters-bar oc-picker::part(dropdown) { 2959 max-height: 90dvh; 2960 } 2961 } 2962 2963 .no-results { 2964 padding: 64px; 2965 padding-bottom: 100px; 2966 width: 100%; 2967 text-align: center; 2968 width: 100%; 2969 display: none; 2970 } 2971 2972 #filtered-library-results:empty + .no-results { 2973 display: block; 2974 } 2975 2976 #clear-filters { 2977 background: none; 2978 color: var(--brand-blue); 2979 opacity: 0.7; 2980 transition: all 0.2s; 2981 } 2982 2983 #clear-filters.highlight { 2984 opacity: 1; 2985 cursor: pointer; 2986 } 2987 2988 #clear-filters.highlight:hover { 2989 color: var(--brand-charcoal); 2990 } 2991 2992 .filters-bar select { 2993 padding: 8px; 2994 border-radius: 4px; 2995 background: none; 2996 } 2997 2998 /* Mobile overrides */ 2999 @media screen and (max-width: 768px) { 3000 #education-wrapper { 3001 gap: 32px; 3002 } 3003 3004 #education-category-wrappers { 3005 flex-direction: column; 3006 width: 100%; 3007 gap: 1rem; 3008 } 3009 #education-category-wrappers .education-category { 3010 width: 100%; 3011 } 3012 3013 #education-category-below { 3014 display: flex; 3015 flex-direction: column; 3016 } 3017 3018 .content-grid { 3019 margin: 0 -1.5rem; 3020 } 3021 3022 #featured-results { 3023 gap: 0; 3024 } 3025 3026 #featured-results .education-card { 3027 border-left: none; 3028 border-right: none; 3029 border-top: none; 3030 } 3031 3032 .page-container { 3033 position: relative; 3034 } 3035 3036 .filter-bar-wrapper { 3037 flex-direction: column; 3038 align-items: stretch; 3039 gap: 1rem; 3040 position: relative; 3041 z-index: 100; 3042 top: 0; 3043 left: 0; 3044 display: none; 3045 } 3046 3047 .filter-bar-wrapper.active { 3048 display: flex; 3049 } 3050 3051 .filter-bar-wrapper.hidden { 3052 display: none; 3053 } 3054 3055 .filters-bar { 3056 flex-direction: column; 3057 align-items: stretch; 3058 } 3059 3060 .filters-btn { 3061 width: 100%; 3062 margin-bottom: 2rem; 3063 padding: 8px; 3064 border: solid 1px var(--brand-charcoal); 3065 border-radius: 4px; 3066 background: none; 3067 } 3068 3069 .filters-btn.hidden { 3070 display: none; 3071 } 3072 3073 button.filters-btn:active { 3074 background: #00000038; 3075 } 3076 3077 #filtered-library-results { 3078 gap: 0.5rem; 3079 } 3080 3081 .tabs { 3082 overflow-x: scroll; 3083 } 3084 .tabs button { 3085 text-wrap: nowrap; 3086 } 3087 } 3088</style> 3089
3090<script src="/library/components/educationCard/educationCard.ts" type="module"></script>
3090 3091</template><template name="financial-collection-banner.html"><div id="container"> 3092 <section> 3093 <h1 class="area-title" data-l10n-id="financial-collection_title">Aide à financer le PCR!</h1> 3094 <div class="area-progress progress-wrapper"> 3095 <progress id="progress" max="175000" value="70000"></progress> 3096 <div class="progress_meta"> 3097 <span id="pledge_total"></span> 3098 <span>/</span> 3099 <span id="campaign_total"></span> 3100 </div> 3101 <div class="progress_complete"> 3102 <span id="progress-complete_message"></span> 3103 </div> 3104 </div> 3105 <div class="area-information"> 3106 <span id="read-more-link"> 3107 <oc-with-icon id="read-more" data-name="chevron-right-alternate"> 3108 <a id="read-more-anchor" href="" target="_blank"> 3109 <span data-l10n-id="financial-collection_read-more-opt-text">à propos de la campagne de financement</span> 3110 </a> 3111 </oc-with-icon> 3112 <a id="read-more-icon" href="" target="_blank"> 3113 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill="none"> 3114 <path d="M10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0ZM10 14C9.73478 14 9.48043 14.1054 9.29289 14.2929C9.10536 14.4804 9 14.7348 9 15C9 15.2652 9.10536 15.5196 9.29289 15.7071C9.48043 15.8946 9.73478 16 10 16C10.2652 16 10.5196 15.8946 10.7071 15.7071C10.8946 15.5196 11 15.2652 11 15C11 14.7348 10.8946 14.4804 10.7071 14.2929C10.5196 14.1054 10.2652 14 10 14ZM10 4.5C9.03859 4.5 8.11656 4.88192 7.43674 5.56174C6.75692 6.24156 6.375 7.16359 6.375 8.125C6.375 8.39022 6.48036 8.64457 6.66789 8.83211C6.85543 9.01964 7.10978 9.125 7.375 9.125C7.64022 9.125 7.89457 9.01964 8.08211 8.83211C8.26964 8.64457 8.375 8.39022 8.375 8.125C8.37533 7.83004 8.45594 7.54072 8.60818 7.28809C8.76043 7.03545 8.97857 6.82902 9.2392 6.69092C9.49984 6.55282 9.79316 6.48827 10.0877 6.50419C10.3822 6.52011 10.6669 6.61589 10.9111 6.78127C11.1553 6.94666 11.35 7.1754 11.4741 7.44297C11.5982 7.71054 11.6472 8.00686 11.6157 8.30014C11.5843 8.59342 11.4736 8.87261 11.2955 9.10777C11.1175 9.34292 10.8788 9.52518 10.605 9.635C9.929 9.905 9 10.597 9 11.75V12C9 12.2652 9.10536 12.5196 9.29289 12.7071C9.48043 12.8946 9.73478 13 10 13C10.2652 13 10.5196 12.8946 10.7071 12.7071C10.8946 12.5196 11 12.2652 11 12C11 11.756 11.05 11.634 11.261 11.53L11.348 11.49C12.1288 11.1759 12.776 10.6 13.1787 9.86092C13.5814 9.12188 13.7145 8.26578 13.5551 7.43938C13.3958 6.61299 12.9539 5.86776 12.3052 5.33147C11.6566 4.79518 10.8416 4.50122 10 4.5Z" fill="white"></path> 3115 </svg> 3116 </a> 3117 </span> 3118 </div> 3119 <form id="pledge-form" class="area-form" action=""> 3120 <div class="form-element-container"> 3121 <div> 3122 <oc-input-proxy data-style="minimal"> 3123 <span slot="extra-start"> 3124 <svg width="9" height="15" viewbox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg"> 3125 <path d="M8.24 10.572C8.24 11.404 7.97333 12.092 7.44 12.636C6.91733 13.1693 6.18667 13.4893 5.248 13.596C5.20533 13.596 5.184 13.6173 5.184 13.66L5.2 14.78C5.2 14.8867 5.14667 14.94 5.04 14.94H3.984C3.87733 14.94 3.824 14.8867 3.824 14.78L3.84 13.644C3.84 13.6013 3.81867 13.58 3.776 13.58C2.82667 13.452 2.08533 13.1213 1.552 12.588C1.01867 12.044 0.752 11.3507 0.752 10.508V10.044C0.752 9.93733 0.805333 9.884 0.912 9.884H2.016C2.12267 9.884 2.176 9.93733 2.176 10.044V10.428C2.176 10.972 2.4 11.42 2.848 11.772C3.296 12.124 3.904 12.3 4.672 12.3C5.36533 12.3 5.888 12.1453 6.24 11.836C6.60267 11.5267 6.784 11.1213 6.784 10.62C6.784 10.2893 6.69333 10.0067 6.512 9.772C6.33067 9.53733 6.064 9.324 5.712 9.132C5.36 8.92933 4.848 8.68933 4.176 8.412C3.42933 8.11333 2.84267 7.84133 2.416 7.596C1.98933 7.35067 1.632 7.03067 1.344 6.636C1.06667 6.23067 0.928 5.724 0.928 5.116C0.928 4.30533 1.17867 3.64933 1.68 3.148C2.18133 2.636 2.864 2.32133 3.728 2.204C3.77067 2.204 3.792 2.18267 3.792 2.14L3.776 0.907999C3.776 0.801332 3.82933 0.747999 3.936 0.747999H4.976C5.08267 0.747999 5.136 0.801332 5.136 0.907999L5.12 2.156C5.12 2.19867 5.14133 2.22533 5.184 2.236C6.10133 2.364 6.82133 2.70533 7.344 3.26C7.87733 3.81467 8.144 4.51333 8.144 5.356V5.676C8.144 5.78267 8.09067 5.836 7.984 5.836H6.864C6.75733 5.836 6.704 5.78267 6.704 5.676V5.436C6.704 4.88133 6.496 4.42267 6.08 4.06C5.664 3.68667 5.08267 3.5 4.336 3.5C3.70667 3.5 3.22133 3.63867 2.88 3.916C2.53867 4.18267 2.368 4.572 2.368 5.084C2.368 5.436 2.45333 5.724 2.624 5.948C2.80533 6.172 3.06133 6.37467 3.392 6.556C3.73333 6.72667 4.25067 6.95067 4.944 7.228C5.66933 7.52667 6.25067 7.804 6.688 8.06C7.136 8.30533 7.504 8.636 7.792 9.052C8.09067 9.45733 8.24 9.964 8.24 10.572Z" fill="white"></path> 3126 </svg> 3127 </span>
3128 <span slot="label" data-l10n-id="financial-collection_amount">Montant</span> 3129 <input type="number" name="amount" id="amount" min="1" max="100000"> 3130 </oc-input-proxy> 3131 </div> 3132 <div> 3133 <oc-input-proxy data-style="minimal"> 3134 <select name="frequency" id="frequency"> 3135 <option value="monthly" data-l10n-id="financial-collection_frequency_monthly">Mensuel</option> 3136 <option value="onetime" data-l10n-id="financial-collection_frequency_onetime">Don unique</option> 3137 </select> 3138 </oc-input-proxy> 3139 </div> 3140 <div id="button-container"> 3141 <button name="submit" class="btn btn-secondary btn-small" type="submit"> 3142 <span class="button-container_large" data-l10n-id="financial-collection_donate-long">Faire un don maintenant</span> 3143 <span class="button-container_small" data-l10n-id="financial-collection_donate-short">Faire un don</span> 3144 </button> 3145 </div> 3146 </div> 3147 </form> 3148 </section> 3149</div> 3150 3151<link rel="stylesheet" href="/library/theme/buttons.css">
3152<script src="/library/components/form/inputProxy.ts" type="module"></script>
3152 3153 3154<style> 3155 :host { 3156 --color: white; 3157 --color-contrast: black; 3158 --heading-font-family: inherit; 3159 --heading-stroke-color: black; 3160 --progress-background: transparent; 3161 --progress-border: gold; 3162 --progress-color: gold; 3163 --pledge-display-ratio: auto; 3164 --pledge-char: 6ch; 3165 --campaign-align: inherit; 3166 font-family: inherit; 3167 color: inherit; 3168 min-height: 150px; 3169 } 3170 3171 #container { 3172 container-name: container; 3173 container-type: inline-size; 3174 } 3175 3176 .area-title { 3177 grid-area: title; 3178 } 3179 3180 .area-progress { 3181 align-self: flex-end; 3182 grid-area: progress; 3183 max-width: 450px; 3184 } 3185 3186 .area-information { 3187 grid-area: information; 3188 } 3189 3190 .area-form { 3191 align-self: flex-end; 3192 grid-area: form; 3193 justify-self: end; 3194 max-width: 450px; 3195 width: 100%; 3196 } 3197 3198 button, 3199 input[type="button"] { 3200 border: none; 3201 } 3202 3203 input[type="number"]::-webkit-inner-spin-button { 3204 appearance: none; 3205 -moz-appearance: textfield; 3206 -webkit-appearance: none; 3207 } 3208 3209 /* Won't style properly as a slotted element */ 3210 input::-webkit-input-placeholder, 3211 input::placeholder { 3212 color: color-mix(in srgb, currentColor, transparent 25%); 3213 } 3214 3215 section { 3216 background-image: url("/library/components/financialCollectionBanner/assets/background.png"); 3217 background-size: cover; 3218 background-position: center center; 3219 box-sizing: border-box; 3220 color: var(--color); 3221 display: grid; 3222 font-weight: 500; 3223 grid-template-areas: 3224 "title information" 3225 "progress form"; 3226 grid-template-columns: 1fr 1fr; 3227 grid-gap: 0 2em; 3228 padding: 1.75em 2em; 3229 width: 100%; 3230 } 3231 3232 section .area-information, section .area-form { 3233 text-align: end; 3234 } 3235 3236 section h1 { 3237 text-shadow: 0.25rem 0.25rem 0px var(--heading-stroke-color); 3238 font-family: var(--heading-font-family); 3239 font-size: clamp(3em, 5vw, 3.5em); 3240 font-style: normal; 3241 font-weight: inherit; 3242 line-height: 100%; 3243 margin-block: 0; 3244 text-transform: uppercase; 3245 -webkit-text-stroke-width: 1; 3246 -webkit-text-stroke-color: var(--heading-stroke-color); 3247 } 3248 3249 section progress { 3250 border: 1px solid var(--progress-border); 3251 border-radius: 0.25rem; 3252 background: var(--progress-background); 3253 color: var(--progress-color); 3254 height: 1.5em; 3255 width: 100%; 3256 -webkit-appearance: none; 3257 -moz-appearance: none; 3258 } 3259 3260 section progress[value]::-webkit-progress-bar { 3261 background: var(--progress-background); 3262 } 3263 3264 section progress[value]::-webkit-progress-value { 3265 background: var(--progress-color); 3266 } 3267 3268 section progress[value]::-moz-progress-bar { 3269 background: var(--progress-color); 3270 } 3271 3272 .form-element-container { 3273 align-items: end; 3274 display: grid; 3275 grid-template-columns: 1fr 1fr 1fr; 3276 grid-gap: 1em; 3277 } 3278 3279 .form-element-container oc-input-proxy { 3280 width: 100%; 3281 } 3282 3283 .form-element-container button[type="submit"] { 3284 white-space: nowrap; 3285 } 3286 3287 #pledge_total, #campaign_total { 3288 display: inline-block; 3289 } 3290 3291 #pledge_total { 3292 font-weight: 700; 3293 padding-inline-start: 0.5em; 3294 } 3295 3296 #campaign_total { 3297 padding-inline-end: 0.5em; 3298 text-align: var(--campaign-align); 3299 } 3300 3301 #read-more-icon { 3302 display: none; 3303 } 3304 3305 .progress-wrapper { 3306 position: relative; 3307 } 3308 3309 .progress_meta { 3310 display: grid; 3311 grid-gap: 0.25em; 3312 grid-template-columns: auto auto auto; 3313 left: 0; 3314 position: absolute; 3315 top: 0; 3316 width: 100%; 3317 } 3318 3319 a:link, a:visited { 3320 color: inherit; 3321 font-style: italic; 3322 text-decoration: underline currentColor; 3323 } 3324 3325 .progress_complete { 3326 color: var(--color-contrast); 3327 display: none; 3328 left: 0; 3329 position: absolute; 3330 top: 0; 3331 width: 100%; 3332 text-align: center; 3333 text-transform: uppercase; 3334 } 3335 3336 .button-container_large { 3337 display: block; 3338 } 3339 3340 .button-container_small { 3341 display: none; 3342 } 3343 3344 :host([data-state="initial"]) .progress_meta { 3345 grid-template-columns: auto auto 1fr; 3346 margin-left: var(--pledge-display-ratio); 3347 } 3348 3349 :host([data-state="ongoing"]) .progress_meta { 3350 grid-template-columns: 3351 minmax(var(--pledge-display-ratio), var(--pledge-char)) 1fr auto; 3352 text-align: end; 3353 } 3354 3355 :host([data-state="ongoing"]) #pledge_total { 3356 color: var(--color-contrast); 3357 margin-inline-end: 0.5em; 3358 } 3359 3360 :host([data-state="almost-complete"]) .progress_meta { 3361 color: var(--color-contrast); 3362 grid-template-columns: 1fr auto 1fr; 3363 } 3364 3365 :host([data-state="almost-complete"]) #pledge_total { 3366 text-align: end; 3367 } 3368 3369 :host([data-state="complete"]) .progress_meta { 3370 display: none; 3371 } 3372 3373 :host([data-state="complete"]) .progress_complete { 3374 display: block; 3375 } 3376 3377 @container container (721px > width) { 3378 section { 3379 grid-gap: 1.5em; 3380 grid-template-areas: 3381 "title form form" 3382 "title progress information"; 3383 grid-template-columns: 40% 1fr auto; 3384 grid-template-rows: auto auto; 3385 } 3386 3387 .area-form { 3388 align-self: flex-start; 3389 } 3390 3391 .area-information { 3392 align-self: flex-end; 3393 } 3394 3395 #read-more { 3396 display: none; 3397 } 3398 3399 #read-more-icon { 3400 display: block; 3401 } 3402 3403 .form-element-container { 3404 grid-template-columns: 1fr 1fr auto; 3405 } 3406 3407 .button-container_large { 3408 display: none; 3409 } 3410 3411 .button-container_small { 3412 display: block; 3413 } 3414 } 3415 3416 @container container (650px > width) { 3417 section { 3418 grid-gap: 1.5em; 3419 grid-template-areas: 3420 "information" 3421 "title" 3422 "progress" 3423 "form"; 3424 grid-template-columns: 1fr; 3425 } 3426 3427 .area-progress { 3428 max-width: 100%; 3429 } 3430 3431 .area-form { 3432 max-width: 100%; 3433 } 3434 3435 .area-information { 3436 align-self: initial; 3437 } 3438 3439 #read-more { 3440 display: block; 3441 } 3442 3443 #read-more-icon { 3444 display: none; 3445 } 3446 3447 .button-container_large { 3448 display: block; 3449 } 3450 3451 .button-container_small { 3452 display: none; 3453 } 3454 } 3455</style> 3456</template><template name="form-input.html"><label class="label"> 3457 <slot name="label" id="label-text"></slot> 3458 <slot name="input"></slot> 3459 <!-- form input element (input or textarea) --> 3460 <slot name="description" id="description-text"></slot> 3461 <oc-with-icon data-name="error" data-position="before" id="error-wrapper" style="--gap: 4px; --icon-height: 16px"> 3462 <slot name="error" id="error-text"></slot> 3463 </oc-with-icon> 3464</label> 3465 3466<style> 3467 /******** General styles ********/ 3468 .hidden { 3469 display: none; 3470 } 3471 3472 /******** Input and textarea styles ********/ 3473 :host ::slotted([slot="input"]) { 3474 width: 100%; 3475 margin-top: 0.25em; 3476 /* Space between label and input */ 3477 padding: 10px 16px; 3478 border: none; 3479 outline: 1px solid var(--brand-charcoal); 3480 background-color: white; 3481 } 3482 3483 :host([data-required]) ::slotted([slot="label"])::after { 3484 /* non-breaking space */ 3485 content: "\00a0*"; 3486 display: inline-block; 3487 } 3488 3489 :host ::slotted(input) { 3490 min-height: 2.5em; 3491 } 3492 3493 :host ::slotted(select) { 3494 /* Because of weird select styling */ 3495 min-height: calc(2.5em + 4px); 3496 } 3497 3498 :host ::slotted(textarea) { 3499 min-height: 8em; 3500 resize: none; 3501 } 3502 3503 :host ::slotted([slot="input"]:focus) { 3504 outline: 2px solid var(--brand-blue); 3505 } 3506 3507 :host #error-wrapper :not(::slotted([slot="error"])) { 3508 /* If the error wrapper is appearing without an error element in it, that's 3509 a bug (make it super visible) */ 3510 outline: 5px solid green; 3511 } 3512 3513 /*********** Description + error text styles ***********/ 3514 :host ::slotted([slot="description"]) { 3515 color: var(--brand-grey-1); 3516 } 3517 3518 :host ::slotted([slot="description"]), 3519 :host ::slotted([slot="error"]) { 3520 font-size: 13px; 3521 } 3522 3523 /*********** Error styles ***********/ 3524 3525 :host([data-error]) * { 3526 color: var(--brand-red); 3527 } 3528 3529 :host([data-error]) #error-wrapper { 3530 color: var(--brand-red); 3531 } 3532 3533 :host([data-error]) ::slotted([slot="input"]), 3534 :host([data-error]) ::slotted([slot="input"]:focus) { 3535 outline: 2px solid var(--brand-red); 3536 } 3537 3538 /*********** Disabled styles ***********/ 3539 :host([data-disabled]) * { 3540 color: var(--brand-grey-2); 3541 } 3542 3543 :host([data-disabled]) ::slotted([slot="input"]), 3544 :host([data-disabled]) ::slotted([slot="input"]:focus) { 3545 color: var(--brand-grey-2); 3546 outline: 1px solid var(--brand-grey-2); 3547 } 3548 3549 :host([data-disabled]) ::slotted([slot="description"]) { 3550 color: var(--brand-grey-3); 3551 } 3552</style> 3553</template><template name="join-form.html"><div class="join-form_title_container"> 3554 <div class="join-form_title_row"> 3555 <h2 class="heading-2" data-l10n-id="join-form_title1">Je veux rejoindre</h2> 3556 </div> 3557 <div class="join-form_title_row"> 3558 <oc-with-icon data-name="hamsic" style="--gap: 0.25em; --icon-height: 1.8em; --icon-vertical-adjustment: -4px"> 3559 <h2 class="heading-2" data-l10n-id="join-form_title2">les communistes!</h2> 3560 </oc-with-icon> 3561 </div> 3562</div> 3563 3564<div id="join-form_result"> 3565 <div id="join-form_error" style="display: none"> 3566 <oc-with-icon data-name="error" data-position="before" style="--icon-height: 16.5px">
3567 <span data-l10n-id="join-form_error-generic">Il semble y avoir un problème. Vérifier tous les champs, puis réessayer. Si le problème persiste, merci dâenvoyer un courriel à <a data-l10n-name="error-email" data-l10n-attrs="href" href="mailto:[email protected]">[email protected]</a> avec une explication du problème.</span> 3568 </oc-with-icon> 3569 </div> 3570 <div id="join-form_success" style="display: none"> 3571 <div> 3572 <h3 data-l10n-id="join-form_success-title">Nous avons bien reçu ta candidature. Merci!</h3> 3573 <span data-l10n-id="join-form_success-leader" class="text-body fx-italic">Un de nos militants communiquera avec toi dâici 24 à 48h.</span> 3574 <div id="join-form_success_meantime_container"> 3575 <span id="join-form_success_meantime"><span data-l10n-id="join-form_success-next-steps-header">Dâici là :</span> 3576 <ul> 3577 <li data-l10n-id="join-form_success-next-steps-subscribe">Abonne-toi à notre <a data-l10n-name="sub-national" data-l10n-attrs="href" href="/abonnement">journal mensuel</a> ou à notre <a data-l10n-name="sub-international" data-l10n-attrs="href" href="/abonnement#ddm">magazine théorique trimestriel</a>.</li> 3578 <li data-l10n-id="join-form_success-next-steps-podcast">Ãcoute notre <a data-l10n-name="podcast" data-l10n-attrs="href" href="http://tinyurl.com/bdzjekwz">podcast</a> et abonne-toi à notre chaîne.</li> 3579 <li data-l10n-id="join-form_success-next-steps-read">Lis nos derniers articles et partage-les sur les réseaux sociaux.</li> 3580 </ul> 3581 </span> 3582 </div> 3583 <div id="join-form_follow"> 3584 <h5 class="heading-5">Follow Us</h5> 3585 <oc-social-media-links class="social-media-wrapper" style="--social-media-link-color: var(--brand-red)"></oc-social-media-links> 3586 </div> 3587 </div> 3588 </div> 3589</div> 3590 3591<form id="join-form_form" method="post" enctype="application/x-www-form-urlencoded" action="#"> 3592 <oc-form-input data-name="name" data-required=""> 3593 <span slot="label" data-l10n-id="join-form_label-name">Nom</span> 3594 <input slot="input" type="text"> 3595 <span slot="description"></span> 3596 </oc-form-input> 3597 3598 <oc-form-input data-name="email" data-required=""> 3599 <span slot="label" data-l10n-id="join-form_label-email">Courriel</span> 3600 <input slot="input" type="email"> 3601 <span slot="description"></span> 3602 </oc-form-input> 3603 3604 <oc-form-input data-name="phone" data-required=""> 3605 <span slot="label" data-l10n-id="join-form_label-phone">Téléphone</span> 3606 <input slot="input" type="tel" required=""> 3607 <span slot="description"></span> 3608 </oc-form-input> 3609 3610 <oc-form-input data-name="social_media_url"> 3611 <span slot="label" data-l10n-id="join-form_label-social-media">Profil sur les médias sociaux (URL)</span> 3612 <input slot="input" type="text"> 3613 <span slot="description"></span> 3614 </oc-form-input> 3615 3616 <oc-form-input data-name="city" data-required=""> 3617 <span slot="label" data-l10n-id="join-form_label-city">Ville</span> 3618 <input slot="input" type="text" required=""> 3619 <span slot="description"></span> 3620 </oc-form-input> 3621 3622 <oc-form-input data-name="province" data-required=""> 3623 <span slot="label" data-l10n-id="join-form_label-province">Province</span> 3624 <select name="province" slot="input" required=""> 3625 <option value="" disabled="" selected=""></option> 3626 <option value="ab" data-l10n-id="province_ab">Alberta</option> 3627 <option value="bc" data-l10n-id="province_bc">Colombie-Britannique</option> 3628 <option value="mb" data-l10n-id="province_mb">Manitoba</option> 3629 <option value="nb" data-l10n-id="province_nb">Nouveau-Brunswick</option> 3630 <option value="nl" data-l10n-id="province_nl">Terre-Neuve-et-Labrador</option> 3631 <option value="ns" data-l10n-id="province_ns">Nouvelle-Ãcosse</option> 3632 <option value="on" data-l10n-id="province_on">Ontario</option> 3633 <option value="pe" data-l10n-id="province_pe">Ãle-du-Prince-Ãdouard</option> 3634 <option value="qc" data-l10n-id="province_qc">Québec</option> 3635 <option value="sk" data-l10n-id="province_sk">Saskatchewan</option> 3636 <option value="nt" data-l10n-id="province_nt">Territoires du Nord-Ouest</option> 3637 <option value="nu" data-l10n-id="province_nu">Nunavut</option> 3638 <option value="yt" data-l10n-id="province_yt">Yukon</option> 3639 </select> 3640 <span slot="description"></span> 3641 </oc-form-input> 3642 3643 <oc-form-input data-name="campus" data-required=""> 3644 <span slot="label" data-l10n-id="join-form_label-neighborhood-campus">Quartier/campus</span> 3645 <input slot="input" type="text" required=""> 3646 <span slot="description"></span> 3647 </oc-form-input> 3648 3649 <oc-form-input data-name="referred_by" data-required=""> 3650 <span slot="label" data-l10n-id="join-form_label-lead-source">Comment as-tu entendu parler de nous?</span> 3651 <!-- Can be replaced by a dropdown menu --> 3652 <input slot="input" type="text" required=""> 3653 <span slot="description"></span> 3654 </oc-form-input> 3655 3656 <oc-form-input data-name="message" data-required=""> 3657 <span slot="label" data-l10n-id="join-form_label-why">Pourquoi veux-tu nous rejoindre?</span> 3658 <textarea slot="input" required=""></textarea> 3659 <span slot="description"></span> 3660 </oc-form-input> 3661 3662 <oc-form-input data-name="how_to_help" data-required=""> 3663 <span slot="label" data-l10n-id="join-form_label-how">Comment peux-tu aider à construire le Parti communiste révolutionnaire?</span> 3664 <textarea slot="input" required=""></textarea> 3665 <span slot="description"></span> 3666 </oc-form-input> 3667 3668 <button type="submit" data-l10n-id="join-form_label-submit" class="btn btn-primary">Rejoindre maintenant!</button> 3669</form> 3670 3671<style> 3672 #join-form { 3673 container-name: join-form; 3674 container-type: inline-size; 3675 3676 --join-form-max-width: 678px; 3677 } 3678 3679 .join-form_title_container { 3680 margin: 1em 0; 3681 display: flex; 3682 flex-direction: column; 3683 align-items: center; 3684 gap: 0.25em; 3685 } 3686 3687 .join-form_title_row { 3688 display: flex; 3689 /* The color being here also colors the hamsic */ 3690 color: var(--brand-parchment); 3691 background-color: var(--brand-red); 3692 padding: 6px 6px 0 6px; 3693 } 3694 3695 .join-form_title_row:first-of-type { 3696 background-color: var(--brand-charcoal); 3697 } 3698 3699 #join-form h2 { 3700 margin: 0; 3701 line-height: 0.8; 3702 } 3703 3704 #join-form form { 3705 max-width: var(--join-form-max-width); 3706 margin-inline: auto; 3707 container-type: inline-size; 3708 display: grid; 3709 grid-template-areas: 3710 "name email" 3711 "phone social_media_url" 3712 "city province" 3713 "campus referred_by" 3714 "message message" 3715 "how_to_help how_to_help" 3716 "action action" 3717 "button button"; 3718 grid-template-columns: 1fr 1fr; 3719 gap: 1em; 3720 } 3721 3722 #join-form form oc-form-input[data-name="name"] { 3723 grid-area: name; 3724 } 3725 3726 #join-form form oc-form-input[data-name="email"] { 3727 grid-area: email; 3728 } 3729 3730 #join-form form oc-form-input[data-name="phone"] { 3731 grid-area: phone; 3732 } 3733 3734 #join-form form oc-form-input[data-name="social_media_url"] { 3735 grid-area: social_media_url; 3736 } 3737 3738 #join-form form oc-form-input[data-name="city"] { 3739 grid-area: city; 3740 } 3741 3742 #join-form form oc-form-input[data-name="province"] { 3743 grid-area: province; 3744 } 3745 3746 #join-form form oc-form-input[data-name="campus"] { 3747 grid-area: campus; 3748 } 3749 3750 #join-form form oc-form-input[data-name="referred_by"] { 3751 grid-area: referred_by; 3752 } 3753 3754 #join-form form oc-form-input[data-name="message"] { 3755 grid-area: message; 3756 } 3757 3758 #join-form form oc-form-input[data-name="how_to_help"] { 3759 grid-area: how_to_help; 3760 } 3761 3762 #join-form form oc-form-input[data-name="action"] { 3763 grid-area: action; 3764 } 3765 3766 #join-form form button { 3767 grid-area: button; 3768 width: fit-content; 3769 margin-inline: auto; 3770 } 3771 3772 #join-form a, 3773 #join-form a:link, 3774 #join-form a:hover, 3775 #join-form a:visited { 3776 text-decoration: underline; 3777 color: var(--brand-blue); 3778 } 3779 3780 #join-form #join-form_success > *, 3781 #join-form #join-form_error {
3782 background-color: white; 3783 margin-block: 24px; 3784 margin-inline: auto; 3785 } 3786 3787 #join-form #join-form_success > * { 3788 display: grid; 3789 gap: 24px; 3790 /* width from figma */ 3791 max-width: 634px; 3792 padding: 40px 24px; 3793 outline: 1.5px solid var(--brand-charcoal); 3794 box-shadow: 4px 4px 0 2px var(--brand-charcoal); 3795 } 3796 3797 #join-form #join-form_success h3, 3798 #join-form #join-form_success span { 3799 text-align: center; 3800 } 3801 3802 #join-form #join-form_success_meantime_container { 3803 background-color: var(--brand-parchment); 3804 padding: 16px; 3805 border-radius: 4px; 3806 } 3807 3808 #join-form #join-form_success_meantime ul { 3809 text-align: start; 3810 list-style-type: disc; 3811 padding-inline-start: 24px; 3812 } 3813 3814 #join-form #join-form_follow { 3815 display: flex; 3816 flex-wrap: wrap; 3817 justify-content: center; 3818 align-items: center; 3819 gap: 24px; 3820 } 3821 3822 @media screen and (max-width: 678px) { 3823 #join-form #join-form_follow { 3824 gap: 16px; 3825 } 3826 } 3827 3828 #join-form #join-form_follow h5 { 3829 /* Adjust for line height to center with socials */ 3830 margin-top: 4px; 3831 } 3832 3833 #join-form #join-form_error { 3834 max-width: var(--join-form-max-width); 3835 padding: 16px; 3836 color: var(--brand-red); 3837 outline: 1px solid var(--brand-red); 3838 background-color: var(--brand-light-red); 3839 border-radius: 4px; 3840 } 3841 3842 #join-form #join-form_error oc-with-icon * { 3843 color: var(--fbc-primary-text); 3844 } 3845 3846 @container join-form (max-width: 678px) { 3847 #join-form form { 3848 grid-template-areas: 3849 "name" 3850 "email" 3851 "phone" 3852 "social_media_url" 3853 "city" 3854 "province" 3855 "campus" 3856 "referred_by" 3857 "message" 3858 "how_to_help" 3859 "action" 3860 "button"; 3861 grid-template-columns: 1fr; 3862 } 3863 } 3864</style> 3865</template><template name="navigation.html"><div id="nav-skeuomorphic-overlay"></div> 3866 3867<div id="nav-masthead"> 3868 <div class="logo-wrapper"> 3869 <a href="/"><img data-l10n-id="nav_logo" data-l10n-attrs="src" class="logo" src="/assets/navigation/revolution-communiste-logo-horizontal.svg"></a> 3870 </div> 3871 <div id="nav-actions"> 3872 <a data-l10n-id="nav_cta" data-l10n-attrs="href" class="btn btn-primary btn-small desktop cta" href="/rejoindre">Devenir membre</a> 3873 <div class="language-toggle action"> 3874 <span data-l10n-id="nav_language-toggle-self" class="language-switch self">FR</span> 3875 <a data-l10n-id="nav_language-toggle-other" data-l10n-attrs="href" class="language-switch" href="https://marxist.ca">EN</a> 3876 </div> 3877 <div id="search-toggle" class="action search-action" role="button"> 3878 <div class="icon search"></div> 3879 </div> 3880 <div id="nav-main-toggle" class="action" role="button"> 3881 <div class="icon menu"></div> 3882 <div class="icon close"></div> 3883 </div> 3884 </div> 3885</div> 3886 3887<div id="nav-menu"> 3888 <ul> 3889 <li> 3890 <a data-l10n-id="nav_home" href="/" class="nav-item">Accueil</a> 3891 </li> 3892 <li id="nav-get-organized" class="accordion"> 3893 <div id="nav-get-organized-heading"> 3894 <a data-l10n-id="nav_get-organized" class="nav-item">Participer</a> 3895 <div id="nav-get-organized-accordion-toggle"> 3896 <div class="icon plus"></div> 3897 <div class="icon minus"></div> 3898 </div> 3899 </div> 3900 <div id="nav-get-organized-accordion-container"> 3901 <div id="nav-get-organized-accordion"> 3902 <div id="nav-content-get-organized" class="links"> 3903 <div class="white-bg-items"> 3904 <a data-l10n-id="nav_get-org-biya" data-l10n-attrs="href" class="" href="/article/comment-construire-une-cellule-communiste">Construis dans ta région</a> 3905 <a data-l10n-id="nav_get-org-wtu" data-l10n-attrs="href" class="" href="/contribuer">Ãcris-nous</a> 3906 <a data-l10n-id="nav_get-org-donate" data-l10n-attrs="href" class="" href="/donner">Faire un don</a> 3907 <a data-l10n-id="nav_get-org-op" data-l10n-attrs="href" class="" href="/programme">Notre programme</a> 3908 </div> 3909 <a data-l10n-id="nav_get-org-atj" data-l10n-attrs="href" class="last-item" href="/rejoindre">Devenir membre!</a> 3910 </div> 3911 </div> 3912 </div> 3913 </li> 3914 <li id="nav-news" class="accordion"> 3915 <div id="nav-news-heading"> 3916 <a data-l10n-id="nav_news" class="nav-item">Nouvelles et analyses</a> 3917 <div id="nav-news-accordion-toggle"> 3918 <div class="icon plus"></div> 3919 <div class="icon minus"></div> 3920 </div> 3921 </div> 3922 <div id="nav-news-accordion-container"> 3923 <div id="nav-news-accordion"> 3924 <div id="nav-news-frame-links"> 3925 <div class="section-wrapper"> 3926 <div data-l10n-id="nav_by-location" class="heading">Région</div> 3927 <div class="double-column-link-group"> 3928 <div class="link-group"> 3929 <div data-l10n-id="nav_by-location-canada" class="sub-heading">Québec et Canada</div> 3930 <div id="nav-content-loc-canada" class="links"></div> 3931 </div> 3932 <div class="link-group"> 3933 <div data-l10n-id="nav_by-location-international" class="sub-heading">International</div> 3934 <div id="nav-content-loc-international" class="links"></div> 3935 </div> 3936 </div> 3937 </div> 3938 <div class="section-wrapper"> 3939 <div data-l10n-id="nav_by-topic" class="heading">Sujet</div> 3940 <div id="nav-content-topic" class="links"></div> 3941 </div> 3942 </div> 3943 <div id="nav-news-frame-promo"> 3944 <slot name="nav-news-frame-promo"></slot> 3945 </div> 3946 </div> 3947 </div> 3948 </li> 3949 <li id="nav-content-featured-topic"></li> 3950 <li> 3951 <a data-l10n-id="nav_theory" data-l10n-attrs="href" class="nav-item" href="/education">Théorie et éducation</a> 3952 </li> 3953 <li> 3954 <a data-l10n-id="nav_store" data-l10n-attrs="href" class="nav-item" href="https://catalogue.marxiste.qc.ca/fr">Catalogue</a> 3955 </li> 3956 <li class="cta-wrapper-mobile"> 3957 <a data-l10n-id="nav_cta" data-l10n-attrs="href" class="btn btn-primary cta" href="/rejoindre">Devenir membre</a> 3958 </li> 3959 </ul> 3960</div> 3961 3962<div id="nav-search"> 3963 <slot name="search"></slot> 3964</div> 3965 3966<style> 3967 /* Prevent a flash of unstyled content on page load */ 3968 ::slotted(oc-paper-promo) { 3969 display: inline !important; 3970 } 3971 3972 /* ------ 3973 Basic reset styles, buttons, etc. 3974 */ 3975 3976 * { 3977 box-sizing: border-box; 3978 } 3979 3980 ul, li { 3981 margin: 0; 3982 padding: 0; 3983 width: 100%; 3984 } 3985 3986 .btn.cta { 3987 display: block; 3988 width: 100%; 3989 border: none; 3990 } 3991 .btn.desktop.cta { 3992 display: none; 3993 } 3994 3995 .btn { 3996 display: inline-block; 3997 padding: 0.313rem 1rem 0.125rem; 3998 border-radius: 0.1875rem; 3999 4000 text-align: center; 4001 font-family: "Teko", sans-serif; 4002 font-size: 1.375rem; 4003 font-weight: 500; 4004 text-transform: uppercase; 4005 text-decoration: none; 4006 4007 cursor: pointer; 4008 } 4009 4010 .btn.btn-small { 4011 padding: 0.125rem 1rem 0; 4012 font-size: 1.25rem; 4013 } 4014 4015 @media screen and (min-width: 768px) { 4016 .btn { 4017 padding: 0.25rem 1.5rem 0; 4018 border-radius: 0.25rem; 4019 font-size: 1.5rem; 4020 } 4021 } 4022 4023 .btn.disabled, 4024 .btn:disabled { 4025 opacity: 0.6;
4026 cursor: not-allowed; 4027 } 4028 4029 .btn:hover:not(.disabled, :disabled) { 4030 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25); 4031 } 4032 4033 .btn:active:not(.disabled, :disabled) { 4034 box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; 4035 } 4036 4037 .btn.btn-outline:hover, 4038 .btn.btn-outline:active { 4039 box-shadow: none; 4040 } 4041 4042 .btn.btn-primary { 4043 background-color: var(--brand-red); 4044 color: #fff; 4045 } 4046 4047 .btn.btn-primary:hover:not(.disabled, :disabled) { 4048 background-color: #bf3136; 4049 } 4050 4051 .btn.btn-primary:active:not(.disabled, :disabled) { 4052 background-color: #96272b; 4053 } 4054 4055 .btn.btn-primary.btn-outline { 4056 background: transparent; 4057 color: var(--brand-red); 4058 outline: 2px solid var(--brand-red); 4059 outline-offset: -2px; 4060 } 4061 4062 .btn.btn-primary.btn-outline:hover:not(.disabled, :disabled) { 4063 background: color-mix(in srgb, var(--brand-charcoal) 30%, transparent); 4064 } 4065 4066 .btn.btn-primary.btn-outline:active:not(.disabled, :disabled) { 4067 background: var(--brand-red); 4068 color: #fff; 4069 } 4070 4071 /* --- 4072 Begin nav 4073 */ 4074 4075 /* Generics */ 4076 4077 a, a:visited { 4078 text-decoration: none; 4079 color: var(--brand-charcoal); 4080 } 4081 4082 a:hover { 4083 text-decoration: underline; 4084 opacity: 1; 4085 } 4086 4087 a:focus, a:active { 4088 color: var(--brand-red); 4089 text-decoration: underline; 4090 opacity: 1; 4091 } 4092 4093 /* :host styles */ 4094 4095 :host { 4096 width: 100%; 4097 position: fixed; 4098 --color: black; 4099 --contrast-color: white; 4100 } 4101 4102 :host([data-flow="homepage"][data-state="default"]) { 4103 transform: translateY( 4104 calc(calc(var(--nav-masthead-height) + var(--nav-menu-height)) * -1) 4105 ); 4106 } 4107 4108 :host( 4109 [data-flow="homepage"][data-state="default"][data-homepage-animate-show="forward"] 4110 ) { 4111 animation: 0.2s ease nav-animate-in; 4112 animation-fill-mode: forwards; 4113 } 4114 4115 :host( 4116 [data-flow="homepage"][data-state="default"][data-homepage-animate-show="backward"] 4117 ) { 4118 animation: 0.2s ease nav-animate-out; 4119 animation-fill-mode: forwards; 4120 } 4121 4122 @keyframes nav-animate-in { 4123 to { 4124 transform: translateY(0); 4125 } 4126 } 4127 4128 @keyframes nav-animate-out { 4129 from { 4130 transform: translateY(0); 4131 } 4132 } 4133 4134 :host([data-flow="homepage"][data-state="screen-top"]) { 4135 position: absolute; 4136 } 4137 4138 /* Top-level component structure 4139 * 4140 * The nav is organized into a series of top-level "blocks" that are 4141 * positioned on the page or offscreen based on a series of transforms, 4142 * creating the effect of sliding drawers that come in and out from below the 4143 * main nav bar. This also controls the "minimize" feature where the nav is 4144 * presented in a smaller version depending on scroll behaviour. 4145 * 4146 * In general, each block is absolutely positioned to its expected initial 4147 * state on page load, and then transformed from there. (If they were all 4148 * set to `top: 0` and transformed from there, it would create a flash of 4149 * animation on page load.) 4150 * 4151 * There is also `#nav-skeuomorphic-overlay` which is a zero-height element 4152 * with a border and drop-shadow positioned at the "bottom" of the nav. 4153 * It was necessary to place this on its own layer to allow dropdowns, which are 4154 * children of `nav-menu`, to appear as if they are sliding out from *under* 4155 * the nav despite actually being children of it (remember that all child 4156 * elements of a parent are on the same z-index stack by definition). 4157 * 4158 */ 4159 4160 #nav-masthead, 4161 #nav-menu, 4162 #nav-search, 4163 #nav-skeuomorphic-overlay { 4164 position: absolute; 4165 top: 0; 4166 left: 0; 4167 transition: transform 0.2s ease; 4168 } 4169 4170 #nav-skeuomorphic-overlay { 4171 z-index: 0; 4172 top: var(--nav-masthead-height); 4173 } 4174 4175 #nav-masthead { 4176 z-index: -1; 4177 } 4178 4179 #nav-menu { 4180 z-index: -2; 4181 top: calc(var(--nav-menu-height) * -1); 4182 } 4183 4184 /* Search is a special case -- it is displayed above the main nav on mobile, 4185 but appears as a drawer on desktop */ 4186 #nav-search { 4187 z-index: 1; 4188 top: calc(var(--nav-search-height) * -1); 4189 } 4190 4191 /* Top-level state transformations */ 4192 4193 :host([data-state="minimal"]) #nav-skeuomorphic-overlay, 4194 :host([data-state="minimal"]) #nav-masthead { 4195 transform: translateY(calc(var(--nav-masthead-height) * -1)); 4196 } 4197 4198 :host([data-expand-level]) #nav-menu { 4199 transform: translateY( 4200 calc(var(--nav-menu-height) + var(--nav-masthead-height)) 4201 ); 4202 } 4203 4204 :host([data-search-open]) #nav-search { 4205 transform: translateY(var(--nav-search-height)); 4206 } 4207 4208 @media screen and (min-width: 768px) { 4209 #nav-search { 4210 z-index: -3; 4211 } 4212 4213 #nav-skeuomorphic-overlay { 4214 top: calc(var(--nav-masthead-height) + var(--nav-menu-height)); 4215 } 4216 4217 #nav-menu { 4218 top: calc(var(--nav-masthead-height)); 4219 } 4220 4221 :host([data-state="minimal"]) #nav-skeuomorphic-overlay { 4222 transform: translateY(calc(var(--nav-menu-height) * -1)); 4223 } 4224 4225 :host([data-state="minimal"]) #nav-masthead { 4226 transform: translateY(0); 4227 } 4228 4229 :host([data-state="minimal"]) #nav-menu { 4230 transform: translateY(calc(var(--nav-menu-height) * -1)); 4231 } 4232 4233 :host([data-expand-level]) #nav-menu { 4234 transform: translateY(0); 4235 } 4236 4237 :host([data-search-open]) #nav-search { 4238 transform: translateY( 4239 calc( 4240 var(--nav-masthead-height) + var(--nav-search-height) 4241 + var(--nav-menu-height) 4242 ) 4243 ); 4244 } 4245 4246 :host([data-state="minimal"][data-search-open]) #nav-search { 4247 transform: translateY( 4248 calc(var(--nav-masthead-height) + var(--nav-search-height)) 4249 ); 4250 } 4251 4252 :host([data-flow="homepage"][data-state="screen-top"][data-search-open]) 4253 #nav-search { 4254 transform: translateY( 4255 calc(var(--nav-masthead-height) + var(--nav-search-height)) 4256 ); 4257 } 4258 4259 :host([data-flow="homepage"][data-state="screen-top"]) #nav-menu { 4260 top: calc(var(--nav-menu-height) * -1); 4261 } 4262 4263 #nav-news-accordion { 4264 position: relative; 4265 /* The extra 10px is to hide the box-shadow */ 4266 top: calc(calc(var(--nav-news-accordion-height) * -1) - 10px); 4267 transition: transform 0.2s ease; 4268 background: rgba(255, 255, 255, 0.90); 4269 backdrop-filter: blur(10px); 4270 } 4271 4272 :host([data-expand-level="2"]) #nav-news-accordion { 4273 transform: translateY(calc(var(--nav-news-accordion-height) + 10px)); 4274 } 4275 } 4276 4277 /* 4278 * Skeuomorphic border and drop-shadow overlay for the nav menu 4279 * This is necessary to create the illusion that the nav menu 4280 * is popping out from under a drawer on desktop. 4281 * Because the structure of the DOM is such that the dropdown menu 4282 * is a child of the navbar, it is not possible to position the 4283 * former underneath the latter with a z-index (they all belong to 4284 * the same stack). 4285 * This is a non-interactive piece that provides the necessary border 4286 * and shadow above the nav elements. 4287 */ 4288 #nav-skeuomorphic-overlay { 4289 border-bottom: 1px solid #d2d2d2; 4290 box-shadow: none; 4291 width: 100%; 4292 height: 0; 4293 pointer-events: none; 4294 4295 transition: border 0.2s, box-shadow 0.2s, transform 0.2s; 4296 } 4297 4298 :host([data-state="screen-top"]:not([data-expand-level])) 4299 #nav-skeuomorphic-overlay { 4300 border-bottom: 1px solid rgba(0, 0, 0, 0); 4301 box-shadow: none; 4302 } 4303 4304 :host([data-state="default"]) #nav-menu { 4305 box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1); 4306 } 4307 4308 /* #nav-masthead: the top bar containing the logo and actions */ 4309 4310 #nav-masthead { 4311 width: 100%; 4312 display: flex; 4313 justify-content: space-between; 4314 gap: 24px; 4315 padding: 0.5rem 1rem 0.5rem 1.5rem; 4316 background: white;
4317 align-items: center; 4318 } 4319 4320 @media screen and (max-width: 768px) { 4321 :host([data-state="default"]) #nav-masthead { 4322 box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1); 4323 } 4324 } 4325 4326 .logo-wrapper { 4327 display: flex; 4328 } 4329 4330 .logo-wrapper a { 4331 /* prevent a space from appearing just underneath the image */ 4332 line-height: 0; 4333 } 4334 4335 .logo-wrapper img { 4336 width: 100%; 4337 max-height: 18px; 4338 } 4339 4340 :host( 4341 [data-flow="homepage"][data-state="screen-top"][data-variant="no-masthead"] 4342 ) { 4343 #nav-masthead { 4344 display: none; 4345 } 4346 } 4347 4348 :host( 4349 [data-flow="homepage"][data-state="screen-top"]:not([data-expand-level]) 4350 ) 4351 #nav-masthead { 4352 background: linear-gradient( 4353 180deg, 4354 #231f20 0%, 4355 rgba(35, 31, 32, 0.75) 41%, 4356 rgba(35, 31, 32, 0.00) 100% 4357 ); 4358 } 4359 4360 :host( 4361 [data-flow="homepage"][data-state="screen-top"][data-search-open]:not( 4362 [data-expand-level] 4363 ) 4364 ) 4365 #nav-masthead { 4366 background: var(--brand-charcoal); 4367 } 4368 4369 :host( 4370 [data-flow="homepage"][data-state="screen-top"]:not([data-expand-level]) 4371 ) 4372 .logo-wrapper 4373 img { 4374 display: none; 4375 } 4376 4377 :host([data-expand-level]) #nav-masthead { 4378 background-color: var(--brand-parchment); 4379 } 4380 4381 @media screen and (min-width: 768px) { 4382 #nav-masthead { 4383 display: grid; 4384 grid-template-rows: 24px; 4385 grid-template-columns: 1fr; 4386 grid-template-areas: "singleton"; 4387 padding: 1rem; 4388 } 4389 4390 .logo-wrapper { 4391 grid-area: singleton; 4392 justify-self: center; 4393 align-self: center; 4394 } 4395 4396 .logo-wrapper img { 4397 max-height: none; 4398 } 4399 4400 :host([data-expand-level]) #nav-masthead { 4401 background-color: white; 4402 } 4403 } 4404 4405 /* #nav-actions: interactive tools that change the nav state, etc. */ 4406 4407 #nav-actions { 4408 display: flex; 4409 gap: 0.5rem; 4410 justify-content: space-between; 4411 align-items: center; 4412 } 4413 4414 #nav-actions .action { 4415 opacity: 80%; 4416 display: flex; 4417 width: 2.25rem; 4418 height: 2.25rem; 4419 align-items: center; 4420 justify-content: center; 4421 cursor: pointer; 4422 } 4423 4424 #nav-actions .action .icon { 4425 background-color: var(--brand-charcoal); 4426 width: 1.5rem; 4427 height: 1.5rem; 4428 display: inline-block; 4429 } 4430 4431 #nav-actions .action .icon.search { 4432 mask: url("/assets/navigation/search.svg"); 4433 } 4434 4435 #nav-actions .action .icon.menu { 4436 mask: url("/assets/navigation/hamburger-menu.svg"); 4437 height: calc(1rem + 4px); 4438 visibility: visible; 4439 } 4440 4441 #nav-actions .action .icon.close { 4442 mask: url("/assets/navigation/close.svg"); 4443 visibility: hidden; 4444 width: 0; 4445 } 4446 4447 #nav-actions .language-toggle { 4448 display: flex; 4449 gap: 0.25rem; 4450 opacity: 1; 4451 } 4452 4453 #nav-actions .language-toggle .language-switch { 4454 line-height: 1; 4455 font-family: "Teko", sans-serif; 4456 font-size: 1rem; 4457 font-weight: 400; 4458 letter-spacing: 0.03em; 4459 opacity: 100%; 4460 color: var(--contrast-color); 4461 position: relative; 4462 top: 2px; 4463 padding: 2px 3px 1px; 4464 } 4465 4466 #nav-actions .language-toggle .language-switch.self { 4467 cursor: auto; 4468 } 4469 4470 @media screen and (max-width: 768px) { 4471 #nav-actions .language-toggle .language-switch.self { 4472 visibility: hidden; 4473 } 4474 4475 #nav-actions .language-toggle .language-switch:not(.self) { 4476 background-color: transparent; 4477 color: var(--brand-charcoal); 4478 } 4479 4480 :host([data-flow="homepage"][data-state="screen-top"]) 4481 #nav-actions 4482 .language-toggle 4483 .language-switch:not(.self) { 4484 background-color: var(--brand-charcoal); 4485 color: white; 4486 } 4487 } 4488 4489 @media screen and (min-width: 768px) { 4490 #nav-actions .language-toggle .language-switch.self { 4491 background-color: var(--brand-yellow); 4492 color: var(--brand-charcoal); 4493 visibility: visible; 4494 } 4495 4496 #nav-actions .language-toggle .language-switch:not(.self) { 4497 background-color: transparent; 4498 color: var(--brand-charcoal); 4499 } 4500 4501 :host([data-flow="homepage"][data-state="screen-top"]) 4502 #nav-actions 4503 .language-toggle 4504 .language-switch:not(.self) { 4505 background-color: transparent; 4506 color: white; 4507 } 4508 } 4509 4510 #nav-actions .action:hover { 4511 opacity: 1; 4512 } 4513 4514 #nav-actions .action:active .icon, 4515 #nav-actions .action:focus .icon { 4516 opacity: 1; 4517 background-color: var(--brand-red); 4518 } 4519 4520 :host( 4521 [data-flow="homepage"][data-state="screen-top"]:not([data-expand-level]) 4522 ) 4523 #nav-actions 4524 .action 4525 .icon { 4526 background-color: white; 4527 } 4528 4529 :host( 4530 [data-flow="homepage"][data-state="screen-top"]:not([data-expand-level]) 4531 ) 4532 #nav-actions 4533 .action.language-switch { 4534 color: white; 4535 } 4536 4537 :host([data-expand-level]) #nav-actions .action .icon.close { 4538 visibility: visible; 4539 width: calc(1rem + 6px); 4540 height: calc(1rem + 6px); 4541 } 4542 4543 :host([data-expand-level]) #nav-actions .action .icon.menu { 4544 visibility: hidden; 4545 width: 0; 4546 } 4547 4548 @media screen and (min-width: 768px) { 4549 #nav-actions { 4550 grid-area: singleton; 4551 justify-self: end; 4552 align-self: center; 4553 gap: 1.5rem; 4554 } 4555
4556 #nav-actions #nav-main-toggle { 4557 display: none; 4558 } 4559 4560 .btn.desktop.cta { 4561 display: block; 4562 } 4563 4564 :host([data-flow="homepage"][data-state="screen-top"]) .btn.desktop.cta { 4565 display: none; 4566 } 4567 } 4568 4569 /* #nav-search */ 4570 4571 #nav-search { 4572 width: 100%; 4573 background-color: var(--brand-red); 4574 height: auto; 4575 height: min-content; 4576 } 4577 4578 @media screen and (min-width: 768px) { 4579 #nav-search { 4580 height: 84px; 4581 } 4582 } 4583 4584 /* #nav-menu: the menubar */ 4585 4586 #nav-menu { 4587 width: 100%; 4588 background: white; 4589 overflow: auto; 4590 } 4591 4592 #nav-menu ul { 4593 position: relative; 4594 height: 100%; 4595 display: flex; 4596 flex-direction: column; 4597 } 4598 4599 #nav-menu li { 4600 border-bottom: 1px solid rgba(35, 31, 32, 0.3); 4601 } 4602 4603 #nav-menu ul li .nav-item { 4604 padding: 1rem 1.5rem; 4605 display: block; 4606 font-size: calc(1.5rem - 4px); 4607 } 4608 4609 :host([data-expand-level]) #nav-menu { 4610 visibility: visible; 4611 height: calc(100vh - 52px); 4612 } 4613 4614 li.cta-wrapper-mobile { 4615 position: sticky; 4616 bottom: 0; 4617 background-color: white; 4618 } 4619 4620 :host([data-expand-level]) #nav-menu li.cta-wrapper-mobile { 4621 padding: 1rem 1.5rem 2rem 1.5rem; 4622 transition: box-shadow 0.2s; 4623 margin-top: auto; 4624 } 4625 4626 :host([data-expand-level="2"]) #nav-menu li.cta-wrapper-mobile { 4627 box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.25); 4628 } 4629 4630 @media screen and (min-width: 768px) { 4631 #nav-menu { 4632 visibility: visible; 4633 height: auto; 4634 width: 100%; 4635 padding: 0 0 1rem; 4636 border-bottom: none; 4637 box-shadow: none; 4638 overflow: visible; 4639 position: relative; 4640 } 4641 4642 #nav-menu ul { 4643 position: static; 4644 padding-bottom: 0; 4645 flex-direction: row; 4646 list-style: none; 4647 gap: 1.5rem; 4648 justify-content: center; 4649 } 4650 4651 #nav-menu li { 4652 border-bottom: none; 4653 width: auto; 4654 } 4655 4656 #nav-menu ul li .nav-item { 4657 padding: 0; 4658 font-size: 1.125rem; 4659 } 4660 4661 :host([data-expand-level]) #nav-menu { 4662 height: auto; 4663 } 4664 4665 .cta-wrapper-mobile { 4666 display: none; 4667 } 4668 } 4669 4670 /* #nav-get-organized: header and mobile toggle */ 4671 4672 #nav-get-organized-heading { 4673 display: flex; 4674 gap: 0.5rem; 4675 align-items: center; 4676 cursor: pointer; 4677 } 4678 4679 #nav-get-organized-heading #nav-get-organized-accordion-toggle { 4680 height: 100%; 4681 padding: 0.5rem 1.5rem 0.5rem 1rem; 4682 } 4683 4684 #nav-get-organized-heading .nav-item { 4685 width: 100%; 4686 padding-right: 0; 4687 } 4688 4689 :host([data-expand-getorg]) #nav-get-organized .icon.plus { 4690 background-color: var(--brand-red); 4691 mask: url("/assets/navigation/plus-square.svg"); 4692 visibility: visible; 4693 width: 1.5rem; 4694 height: 1.5rem; 4695 opacity: 1; 4696 } 4697 4698 :host([data-expand-getorg]) #nav-get-organized .icon.minus { 4699 visibility: hidden; 4700 width: 0; 4701 height: 0; 4702 padding: 0; 4703 opacity: 0; 4704 } 4705 4706 :host([data-expand-getorg="2"]) #nav-get-organized-heading .icon.plus { 4707 visibility: hidden; 4708 width: 0; 4709 height: 0; 4710 padding: 0; 4711 opacity: 0; 4712 } 4713 4714 :host([data-expand-getorg="2"]) #nav-get-organized-heading .icon.minus { 4715 background-color: var(--brand-charcoal); 4716 mask: url("/assets/navigation/minus-square.svg"); 4717 visibility: visible; 4718 width: 1.5rem; 4719 height: 1.5rem; 4720 opacity: 1; 4721 } 4722 4723 @media screen and (min-width: 768px) { 4724 #nav-get-organized { 4725 /* Allow absolute positioning of the nav-get-organized accordion relative to this */ 4726 position: relative; 4727 } 4728 4729 #nav-get-organized-heading a.nav-item::after { 4730 content: url("/assets/navigation/dropdown-arrow.svg"); 4731 position: relative; 4732 top: -2px; 4733 left: 4px; 4734 } 4735 4736 #nav-get-organized-accordion-toggle { 4737 display: none; 4738 } 4739 } 4740 4741 /* #nav-get-organized: mobile accordion / desktop dropdown */ 4742 4743 #nav-get-organized-accordion-container { 4744 visibility: hidden; 4745 pointer-events: none; 4746 } 4747 4748 :host([data-expand-getorg="2"]) #nav-get-organized-accordion-container { 4749 visibility: visible; 4750 pointer-events: auto; 4751 } 4752 4753 #nav-get-organized-accordion .links { 4754 font-size: 1rem; 4755 line-height: 1.3em; 4756 display: grid; 4757 grid-template-columns: 100%; 4758 gap: 0 0.5rem; 4759 } 4760
4761 #nav-get-organized-accordion .links a { 4762 display: block; 4763 padding: 0.5rem 0; 4764 width: 100%; 4765 } 4766 4767 #nav-get-organized-accordion .links .last-item { 4768 color: var(--brand-red); 4769 font-style: italic; 4770 } 4771 4772 @media screen and (max-width: 768px) { 4773 /* Mobile-specific styles */ 4774 #nav-get-organized-accordion-container { 4775 height: 0; 4776 } 4777 4778 :host([data-expand-getorg="2"]) #nav-get-organized-accordion-container { 4779 height: 100%; 4780 } 4781 4782 #nav-get-organized-accordion-container { 4783 padding: 0 1.5rem 0rem 1.5rem; 4784 } 4785 4786 #nav-get-organized-accordion .links .last-item { 4787 padding-bottom: 1rem; 4788 } 4789 } 4790 4791 @media screen and (min-width: 768px) { 4792 #nav-get-organized-accordion { 4793 transform: translateY( 4794 calc(var(--nav-get-organized-accordion-height) * -1) 4795 ); 4796 4797 /* Transitioning visibility makes it disappear once all other transitions are done 4798 (it's hidden anyway via overflow: hidden on the parent but just in case) */ 4799 transition: transform 0.2s ease, visibility 0.2s ease; 4800 4801 background: rgba(255, 255, 255, 0.90); 4802 box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); 4803 backdrop-filter: blur(10px); 4804 } 4805 4806 #nav-get-organized-accordion-container { 4807 position: absolute; 4808 top: calc(100% + 1rem); /* Account for the 1rem padding below nav links */ 4809 left: 50%; 4810 transform: translateX(-50%); 4811 4812 height: auto; 4813 overflow: hidden; 4814 4815 /* Disallow text wrapping for the accordion, or else it will wrap to only be as wide as the "Get Organized" / "Participer" button */ 4816 white-space: nowrap; 4817 } 4818 4819 /* "Get organized" accordion expanded */ 4820 :host([data-expand-getorg="2"]) #nav-get-organized-accordion { 4821 /* Default position is untransformed (i.e. the position while expanded) */ 4822 transform: none; 4823 } 4824 4825 #nav-get-organized-accordion #nav-content-get-organized { 4826 background-color: white; 4827 } 4828 4829 #nav-get-organized-accordion .links { 4830 display: flex; 4831 flex-direction: column; 4832 } 4833 4834 #nav-get-organized-accordion .links a { 4835 padding: 0rem 1.5rem; 4836 } 4837 4838 #nav-get-organized-accordion .links .white-bg-items { 4839 display: flex; 4840 flex-direction: column; 4841 gap: 1rem; 4842 padding-top: 1.5rem; 4843 padding-bottom: 1rem; 4844 } 4845 4846 #nav-get-organized-accordion .links .last-item { 4847 background-color: var(--brand-charcoal); 4848 border: none; 4849 color: var(--brand-parchment); 4850 font-family: "Teko", sans-serif; 4851 font-size: 1.25rem; 4852 font-style: normal; 4853 font-weight: 500; 4854 padding-top: 10px; 4855 padding-bottom: 0.5rem; 4856 text-align: center; 4857 text-transform: uppercase; 4858 } 4859 } 4860 4861 /* #nav-news: header and mobile toggle */ 4862 4863 #nav-news-heading { 4864 display: flex; 4865 gap: 0.5rem; 4866 align-items: center; 4867 cursor: pointer; 4868 } 4869 4870 #nav-news-heading #nav-news-accordion-toggle { 4871 height: 100%; 4872 padding: 0.5rem 1.5rem 0.5rem 1rem; 4873 } 4874 4875 #nav-news-heading .nav-item { 4876 width: 100%; 4877 padding-right: 0; 4878 } 4879 4880 :host([data-expand-level]) #nav-news .icon.plus { 4881 background-color: var(--brand-red); 4882 mask: url("/assets/navigation/plus-square.svg"); 4883 visibility: visible; 4884 width: 1.5rem; 4885 height: 1.5rem; 4886 opacity: 1; 4887 } 4888 4889 :host([data-expand-level]) #nav-news .icon.minus { 4890 visibility: hidden; 4891 width: 0; 4892 height: 0; 4893 padding: 0; 4894 opacity: 0; 4895 } 4896 4897 :host([data-expand-level="2"]) #nav-news-heading .icon.plus { 4898 visibility: hidden; 4899 width: 0; 4900 height: 0; 4901 padding: 0; 4902 opacity: 0; 4903 } 4904 4905 :host([data-expand-level="2"]) #nav-news-heading .icon.minus { 4906 background-color: var(--brand-charcoal); 4907 mask: url("/assets/navigation/minus-square.svg"); 4908 visibility: visible; 4909 width: 1.5rem; 4910 height: 1.5rem; 4911 opacity: 1; 4912 } 4913 4914 @media screen and (min-width: 768px) { 4915 #nav-news-heading a.nav-item::after { 4916 content: url("/assets/navigation/dropdown-arrow.svg"); 4917 position: relative; 4918 top: -2px; 4919 left: 4px; 4920 } 4921 4922 #nav-news-accordion-toggle { 4923 display: none; 4924 } 4925 } 4926 4927 /* #nav-news: mobile accordion / desktop dropdown */ 4928 4929 #nav-news-accordion-container { 4930 visibility: hidden; 4931 height: 0; 4932 pointer-events: none; 4933 } 4934 4935 :host([data-expand-level="2"]) #nav-news-accordion-container { 4936 visibility: visible; 4937 height: 100%; 4938 padding: 0 1.5rem 1rem 1.5rem; 4939 pointer-events: auto; 4940 } 4941 4942 #nav-news-accordion .links { 4943 font-size: 1rem; 4944 line-height: 1.3em; 4945 display: grid; 4946 grid-template-columns: 1fr 1fr; 4947 gap: 0 0.5rem; 4948 margin-bottom: 1rem; 4949 } 4950 4951 #nav-news-accordion .links a { 4952 padding: 0 0 1rem; 4953 display: block; 4954 width: 100%; 4955 } 4956 4957 #nav-news-accordion .heading, 4958 #nav-news-accordion .sub-heading { 4959 font-family: "Teko", sans-serif; 4960 font-weight: 400; 4961 text-transform: uppercase; 4962 letter-spacing: 0.03em; 4963 line-height: 1em; 4964 padding: 1rem 0 0.5rem 0; 4965 width: 100%; 4966 } 4967 4968 #nav-news-accordion .heading { 4969 font-size: calc(1.5rem - 4px); 4970 color: var(--brand-red); 4971 } 4972 4973 #nav-news-accordion .sub-heading { 4974 font-size: calc(1rem + 2px); 4975 color: color-mix(in srgb, var(--brand-charcoal) 70%, white); 4976 } 4977 4978 #nav-news-frame-promo { 4979 display: none; 4980 } 4981 4982 @media screen and (min-width: 768px) { 4983 #nav-news-accordion { 4984 max-width: 1120px; 4985 margin: 0 auto; 4986 border-width: 0 1px 1px 1px; 4987 border-color: #d3d2d2; 4988 border-style: solid; 4989 box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); 4990 4991 display: grid; 4992 grid-template-columns: 70% 30%; 4993 } 4994 4995 #nav-news-accordion-container { 4996 position: absolute; 4997 top: var(--nav-menu-height); 4998 left: 0; 4999 width: 100%; 5000 height: auto; 5001 overflow: hidden; 5002 visibility: visible; 5003 } 5004 5005 :host([data-expand-level="2"]) #nav-news-accordion-container { 5006 /* TODO figure out if this really needs to be put in both declarations ... */ 5007 height: auto; 5008 display: block; 5009 } 5010 5011 #nav-news-frame-links { 5012 padding: 2rem; 5013 display: grid; 5014 grid-template-columns: 1fr 1fr; 5015 gap: 3.5rem; 5016 } 5017 5018 #nav-news-frame-promo { 5019 display: block; 5020 background-color: #eaeaea; 5021 } 5022 5023 #nav-news-frame-links .heading { 5024 font-size: 1.75rem; 5025 color: var(--brand-charcoal); 5026 padding: 0 0 0.5rem; 5027 border-bottom: 1px solid var(--brand-charcoal); 5028 margin-bottom: 1rem; 5029 } 5030 5031 #nav-news-frame-links .sub-heading { 5032 font-size: 1.5rem; 5033 padding: 0 0 0.75rem; 5034 color: var(--brand-red); 5035 } 5036 5037 #nav-news-frame-links .double-column-link-group { 5038 display: grid; 5039 grid-template-columns: 1fr 1fr; 5040 gap: 0.5rem; 5041 } 5042 5043 #nav-news-frame-links .double-column-link-group .links { 5044 display: flex; 5045 flex-direction: column; 5046 } 5047 } 5048</style> 5049</template><template name="page-header.html"><div id="big-page-header"> 5050 <span class="big-page-text"></span> 5051 <div class="big-page-image"></div> 5052</div> 5053 5054<style> 5055 #big-page-header { 5056 width: 100%; 5057 display: flex; 5058 flex-direction: row; 5059 align-items: flex-end; 5060 min-height: 2em; 5061 position: relative; 5062 5063 background: var(--brand-charcoal); 5064 color: white; 5065 5066 font-size: 2.5rem; 5067 font-weight: 500; 5068 font-family: "Teko", sans-serif; 5069 line-height: 0.9; 5070 text-transform: uppercase; 5071 letter-spacing: 0.02em; 5072 padding: 0.5rem 0.5rem 0; 5073 } 5074 5075 .big-page-image { 5076 position: absolute; 5077 background-size: cover; 5078 background-repeat: no-repeat; 5079 background-position: right; 5080 position: absolute; 5081 opacity: 1; 5082 top: 0; 5083 right: 0; 5084 height: 100%; 5085 width: 50%; 5086 -webkit-mask-size: 100% 100%; 5087 -webkit-mask-repeat: no-repeat; 5088 -webkit-mask-position-y: center; 5089 -webkit-mask-position-x: right; 5090 -webkit-mask-image: -webkit-gradient( 5091 linear, 5092 left top, 5093 right top, 5094 from(rgba(0, 0, 0, 0)), 5095 to(rgba(0, 0, 0, 1)) 5096 ); 5097 } 5098 5099 html[lang="en-CA"] #big-page-header { 5100 font-size: 5rem; 5101 line-height: 0.8; 5102 padding: 0; 5103 min-height: 1.2em; 5104 } 5105 5106 html[lang="en-CA"] .big-page-text {
5107 margin-top: -0.01em; 5108 margin-bottom: -0.16em; 5109 padding-left: 0.1em; 5110 } 5111 5112 @media screen and (min-width: 768px) { 5113 #big-page-header { 5114 font-size: 9rem; 5115 padding: 2rem 1.5rem 0.5rem; 5116 } 5117 5118 html[lang="en-CA"] #big-page-header { 5119 font-size: 12rem; 5120 } 5121 } 5122</style> 5123</template><template name="picker.html"><div class="picker"> 5124 <button class="trigger" type="button" part="trigger"> 5125 <span class="label-prefix"></span> 5126 <span class="label"></span> 5127 <span class="placeholder"></span> 5128 </button> 5129 <div class="backdrop" data-picker-backdrop=""> 5130 <ul class="dropdown" part="dropdown"> 5131 <li class="back-button"></li> 5132 <li class="menu"></li> 5133 </ul> 5134 </div> 5135</div> 5136<style> 5137 :host { 5138 --caret-icon: url("/assets/navigation/chevron.svg"); 5139 --caret-width: 10px; 5140 --caret-height: 6px; 5141 --check-icon: url("/assets/navigation/check.svg"); 5142 --check-width: 18px; 5143 --check-height: 18px; 5144 5145 --dropdown-bg: #ffffff; 5146 5147 --trigger-bg-default: transparent; 5148 --trigger-bg-hover: #1e4b611a; 5149 --trigger-bg-open: #b9cdd6; 5150 --trigger-bg-active: #1e4b61; 5151 5152 --trigger-border-default: #aaaaaa; 5153 --trigger-border-hover: #231f20; 5154 --trigger-border-open: #1e4b61; 5155 --trigger-border-active: #1e4b61; 5156 5157 --trigger-text-default: #231f20; 5158 --trigger-text-active: #ffffff; 5159 5160 --option-bg-hover: #231f200d; 5161 --option-bg-selected: #275a8b26; 5162 } 5163 5164 .picker { 5165 position: relative; 5166 display: inline-block; 5167 } 5168 5169 .picker .trigger { 5170 --bg-color: var(--trigger-bg-default); 5171 --border-color: var(--trigger-border-default); 5172 5173 color: var(--trigger-text-default); 5174 background: var(--bg-color); 5175 border: 1px solid var(--border-color); 5176 5177 display: inline-flex; 5178 align-items: center; 5179 justify-content: space-between; 5180 cursor: pointer; 5181 text-align: left; 5182 font: inherit; 5183 5184 border-radius: 4px; 5185 height: 40px; 5186 padding: 8px 16px; 5187 gap: 8px; 5188 } 5189 5190 .picker .trigger::after { 5191 content: " "; 5192 background-color: currentColor; 5193 mask: var(--caret-icon) no-repeat center / contain; 5194 -webkit-mask: var(--caret-icon) no-repeat center / contain; 5195 height: var(--caret-height); 5196 width: var(--caret-width); 5197 transform: rotate(180deg); 5198 } 5199 5200 .picker.option-selected .trigger { 5201 --bg-color: var(--trigger-bg-active); 5202 --border-color: var(--trigger-border-active); 5203 color: var(--trigger-text-active); 5204 } 5205 5206 .picker:not(.option-selected) { 5207 .label-prefix { 5208 display: none; 5209 } 5210 .label { 5211 display: none; 5212 } 5213 } 5214 5215 .picker.option-selected { 5216 .placeholder { 5217 display: none; 5218 } 5219 } 5220 5221 .picker .trigger:hover { 5222 --bg-color: var(--trigger-bg-hover); 5223 --border-color: var(--trigger-border-hover); 5224 color: var(--trigger-text-default); 5225 } 5226 5227 .picker.open .trigger { 5228 --bg-color: var(--trigger-bg-open); 5229 --border-color: var(--trigger-border-open); 5230 color: var(--trigger-text-open); 5231 } 5232 5233 .picker.open .trigger::after { 5234 transform: none; 5235 } 5236 5237 .picker ul, menu { 5238 list-style: none; 5239 padding: 0; 5240 margin: 0; 5241 } 5242 5243 .dropdown { 5244 display: none; 5245 position: absolute; 5246 top: 100%; 5247 left: 0; 5248 z-index: 1000; 5249 background: var(--dropdown-bg); 5250 width: max-content; 5251 overflow-y: auto; 5252 overscroll-behavior: contain; /* don't let scroll chain to body */ 5253 -webkit-overflow-scrolling: touch; /* legacy iOS smoothness */ 5254 } 5255 5256 .picker.open .dropdown { 5257 display: block; 5258 box-shadow: 1px 3px 6px 0px #00000069; 5259 border: solid 1px var(--brand-grey-3); 5260 border-radius: 5px; 5261 } 5262 5263 .dropdown.root-open li.back-button { 5264 display: none; 5265 } 5266 5267 .dropdown li { 5268 display: flex; 5269 align-items: center; 5270 padding: 8px 16px; 5271 gap: 8px; 5272 cursor: pointer; 5273 } 5274 5275 .dropdown li.menu { 5276 display: block; 5277 padding: 0; 5278 margin: 0; 5279 } 5280 5281 .dropdown li.back-button { 5282 color: #626060; 5283 font-size: small; 5284 } 5285 5286 .dropdown li.back-button::before { 5287 content: ""; 5288 background-image: var(--caret-icon); 5289 height: var(--caret-height); 5290 width: var(--caret-width); 5291 transform: rotate(270deg); 5292 } 5293 5294 .menu menu, ul { 5295 display: none; 5296 } 5297 5298 .menu menu.open, ul.open { 5299 display: block; 5300 } 5301
5302 .menu li:hover { 5303 background: var(--option-bg-hover); 5304 } 5305 5306 .menu li.selected { 5307 background: var(--option-bg-selected); 5308 } 5309 5310 .menu li.selected::after { 5311 content: ""; 5312 background-image: var(--check-icon); 5313 height: var(--check-height); 5314 width: var(--check-width); 5315 margin-left: auto; 5316 } 5317 5318 .menu li.submenu::after { 5319 content: ""; 5320 background-image: var(--caret-icon); 5321 height: var(--caret-height); 5322 width: var(--caret-width); 5323 transform: rotate(90deg); 5324 margin-left: auto; 5325 } 5326 5327 .backdrop { 5328 display: none; 5329 position: relative; 5330 } 5331 5332 .picker.open .backdrop { 5333 display: block; 5334 } 5335 5336 /* Mobile overrides */ 5337 @media screen and (max-width: 768px) { 5338 .picker, 5339 .picker button { 5340 width: 100%; 5341 } 5342 5343 .picker button span.label { 5344 overflow: hidden; 5345 white-space: nowrap; 5346 text-overflow: ellipsis; 5347 width: 100%; 5348 } 5349 5350 .picker.open .backdrop { 5351 position: fixed; 5352 display: block; 5353 width: 100%; 5354 height: 100%; 5355 background: #adadad91; 5356 top: 0; 5357 left: 0; 5358 z-index: 1; 5359 backdrop-filter: blur(2px); 5360 overscroll-behavior: contain; 5361 overflow: hidden; 5362 } 5363 5364 .picker.open .dropdown { 5365 position: fixed; 5366 top: 50%; 5367 left: 50%; 5368 width: 100%; 5369 max-width: 300px; 5370 transform: translate(-50%, -50%); 5371 box-sizing: border-box; 5372 overflow-y: scroll; 5373 box-shadow: 1px 3px 132px 4px #00000073; 5374 } 5375 } 5376</style> 5377</template><template name="book-promo.html"><div id="promo-card-book"> 5378 <div> 5379 <h5 class="heading-5" data-promo-book-adline=""></h5> 5380 <h3 class="heading-3" data-promo-book-title=""></h3> 5381 </div> 5382 <div> 5383 <div class="polygon"> 5384 <img data-promo-book-image=""> 5385 </div> 5386 </div> 5387 <div> 5388 <a data-promo-book-link="" class="btn btn-secondary btn-small" data-l10n-id="promo-book_cta">Acheter maintenant</a> 5389 </div> 5390</div> 5391 5392<style> 5393 #promo-card-book { 5394 background-color: var(--brand-red); 5395 display: grid; 5396 grid-template-rows: 110px 200px 80px; 5397 position: relative; 5398 overflow: hidden; 5399 } 5400 5401 #promo-card-book::after { 5402 content: ""; 5403 display: block; 5404 width: 100%; 5405 height: 100%; 5406 position: absolute; 5407 top: 0; 5408 left: 0; 5409 mix-blend-mode: overlay; 5410 opacity: 0.35; 5411 background: url(/assets/promo-cards/backgrounds/bg-pattern-book.jpg) 5412 lightgray 25% / cover no-repeat; 5413 } 5414 5415 #promo-card-book img { 5416 width: auto; 5417 height: 200px; 5418 box-shadow: 0px 0px 14.518px 0px rgba(35, 31, 32, 0.25); 5419 position: relative; 5420 z-index: 1; 5421 } 5422 5423 #promo-card-book h3 { 5424 color: var(--White, #fff); 5425 text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 5426 } 5427 5428 #promo-card-book h5 { 5429 color: var(--Parchment, #f6ecc0); 5430 text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 5431 } 5432 5433 #promo-card-book > div { 5434 display: flex; 5435 flex-direction: column; 5436 justify-content: center; 5437 align-items: center; 5438 text-align: center; 5439 } 5440 5441 #promo-card-book > div:first-of-type, 5442 #promo-card-book > div:last-of-type { 5443 position: relative; 5444 z-index: 1; 5445 } 5446 5447 #promo-card-book .polygon { 5448 position: relative; 5449 } 5450 5451 #promo-card-book .polygon::before { 5452 content: ""; 5453 position: absolute; 5454 display: block; 5455 width: 400%; 5456 height: 400%; 5457 background-color: var(--brand-yellow); 5458 clip-path: polygon(25% 0%, 0% 25%, 100% 100%, 100% 25%); 5459 } 5460</style> 5461</template><template name="paper-promo.html"><div id="promo-card-paper"> 5462 <div> 5463 <h3 class="heading-3"> 5464 <span data-l10n-id="promo-paper_issue">Ãdition</span> 5465 <span class="fc-red"> 5466 <span data-l10n-id="promo-paper_number">Nº </span> 5467 <span data-promo-paper-number=""></span> 5468 </span> 5469 </h3> 5470 <h5 class="heading-5" data-l10n-id="promo-paper_title">Révolution communiste</h5> 5471 </div> 5472 <div> 5473 <img data-promo-paper-image="" class="promo-card_img"> 5474 </div> 5475 <div> 5476 <a data-promo-paper-link="" class="btn btn-primary btn-small" data-l10n-id="promo-paper_cta">Procure-toi une copie</a> 5477 </div> 5478</div> 5479 5480<style> 5481 #promo-card-paper { 5482 background-color: #dfdfdf; 5483 display: grid; 5484 grid-template-rows: 110px 200px 80px; 5485 position: relative; 5486 overflow: hidden; 5487 5488 /* This allows the promo card to be shown in contexts where the height is not 5489 known in advance, i.e. in the navigation dropdown */ 5490 align-content: center; 5491 height: 100%; 5492 } 5493 5494 #promo-card-paper::before { 5495 content: ""; 5496 display: block; 5497 width: 100%; 5498 height: 100%; 5499 position: absolute; 5500 top: 0; 5501 left: 0; 5502 mix-blend-mode: overlay; 5503 opacity: 0.4; 5504 background: url(/assets/promo-cards/backgrounds/bg-pattern-paper.jpg) 5505 lightgray 0% / cover no-repeat; 5506 } 5507 5508 #promo-card-paper img { 5509 width: auto; 5510 height: 200px; 5511 transform: rotate(-4deg) translateY(-2px); 5512 box-shadow: 2px 2px 7px 0px rgb(35 31 32 / 54%); 5513 } 5514 5515 #promo-card-paper > div { 5516 display: flex; 5517 flex-direction: column; 5518 justify-content: center;
5519 align-items: center; 5520 position: relative; 5521 z-index: 1; 5522 } 5523</style> 5524</template><template name="podcast-promo.html"><div id="promo-card-podcast"> 5525 <div> 5526 <h3 class="heading-3" data-l10n-id="promo-podcast_latest-episode">Dernier épisode</h3> 5527 <h5 class="heading-5" data-l10n-id="promo-podcast_heading">Le podcast officiel du PCR</h5> 5528 </div> 5529 <div> 5530 <div class="polygon"> 5531 <div class="podcast-box"> 5532 <div class="podcast-box-inner-flex"> 5533 <img class="podcast-thumbnail" data-promo-podcast-image=""> 5534 <div class="podcast-title truncate-2-lines" data-promo-podcast-title=""> 5535 </div> 5536 <div class="podcast-author truncate-2-lines" data-l10n-id="promo-podcast_podcast-name">Parti pris</div> 5537 </div> 5538 </div> 5539 </div> 5540 </div> 5541 <div> 5542 <a data-promo-podcast-link="" class="btn btn-secondary btn-small" data-l10n-id="promo-podcast_cta">Ãcouter maintenant</a> 5543 </div> 5544</div> 5545 5546<style> 5547 #promo-card-podcast { 5548 display: grid; 5549 grid-template-rows: 110px 200px 80px; 5550 position: relative; 5551 overflow: hidden; 5552 } 5553 5554 #promo-card-podcast::after { 5555 content: ""; 5556 display: block; 5557 width: 100%; 5558 height: 100%; 5559 position: absolute; 5560 top: 0; 5561 left: 0; 5562 mix-blend-mode: overlay; 5563 opacity: 0.35; 5564 background: url(/assets/promo-cards/backgrounds/bg-pattern-book.jpg) 5565 lightgray 25% / cover no-repeat; 5566 } 5567 5568 #promo-card-podcast > div { 5569 display: flex; 5570 flex-direction: column; 5571 justify-content: center; 5572 align-items: center; 5573 } 5574 5575 #promo-card-podcast > div:first-of-type, 5576 #promo-card-podcast > div:last-of-type { 5577 position: relative; 5578 z-index: 1; 5579 } 5580 5581 #promo-card-podcast { 5582 background-color: var(--brand-parchment); 5583 } 5584 5585 #promo-card-podcast .podcast-box { 5586 width: 140px; 5587 height: 200px; 5588 box-sizing: border-box; 5589 } 5590 5591 #promo-card-podcast .podcast-box-inner-flex { 5592 position: relative; 5593 z-index: 1; 5594 padding: 9.057px; 5595 height: 100%; 5596 display: flex; 5597 border-radius: 4.529px; 5598 background: var(--Charcoal, #231f20); 5599 box-shadow: 0px 2.264px 5.095px 0px rgba(0, 0, 0, 0.25); 5600 flex-direction: column; 5601 align-items: flex-start; 5602 gap: 9.057px; 5603 box-sizing: border-box; 5604 } 5605 5606 #promo-card-podcast .podcast-thumbnail { 5607 width: 100%; 5608 height: 120px; 5609 object-fit: contain; 5610 } 5611 5612 #promo-card-podcast .podcast-title { 5613 color: var(--White, #fff); 5614 font-family: "Barlow"; 5615 font-size: 10.189px; 5616 font-style: normal; 5617 font-weight: 700; 5618 line-height: 120%; 5619 } 5620 5621 #promo-card-podcast .podcast-author { 5622 color: var(--White, #fff); 5623 font-family: "Barlow"; 5624 font-size: 8.491px; 5625 font-style: normal; 5626 font-weight: 600; 5627 line-height: 120%; 5628 opacity: 0.7; 5629 } 5630 5631 #promo-card-podcast .polygon { 5632 position: relative; 5633 } 5634 5635 #promo-card-podcast .polygon::before { 5636 content: ""; 5637 position: absolute; 5638 display: block; 5639 width: 400%; 5640 height: 400%; 5641 background-color: var(--brand-red); 5642 clip-path: polygon(101% 23.85%, 75.8% 0%, 0% 25%, 0% 100%); 5643 right: 0; 5644 top: 0; 5645 } 5646 5647 #promo-card-podcast img { 5648 position: relative; 5649 z-index: 1; 5650 } 5651 5652 #promo-card-podcast .truncate-2-lines { 5653 overflow: hidden; 5654 text-overflow: ellipsis; 5655 display: -webkit-box; 5656 -webkit-line-clamp: 2; 5657 -webkit-box-orient: vertical; 5658 } 5659</style> 5660</template><template name="substack-promo.html"><div id="promo-card-substack"> 5661 <div> 5662 <img data-l10n-id="promo-newsletter_img" data-l10n-attrs="src" src="/assets/promo-cards/newsletter-fr.svg"> 5663 <div> 5664 <h3 class="heading-3" data-l10n-id="promo-newsletter_headline">Abonne-toi à notre infolettre</h3> 5665 <p class="text-body-sm" data-l10n-id="promo-newsletter_subtitle">Pour suivre les activités du PCR, nos récents articles et podcasts, et plus encore!</p> 5666 </div> 5667 </div> 5668 <div> 5669 <a data-l10n-id="promo-newsletter_cta" data-l10n-attrs="href" data-promo-paper-link="" class="btn btn-primary btn-small" href="https://revcommuniste.substack.com/">Abonne-toi</a> 5670 </div> 5671</div> 5672 5673<style> 5674 #promo-card-substack { 5675 display: grid; 5676 position: relative; 5677 overflow: hidden; 5678 border: solid 1px rgba(35, 31, 32, 0.30); 5679 grid-template-rows: 310px 80px; 5680 } 5681 #promo-card-substack > div { 5682 display: flex; 5683 flex-direction: column; 5684 justify-content: center;
5685 align-items: center; 5686 } 5687 #promo-card-substack img { 5688 height: 90px; 5689 width: auto; 5690 box-shadow: none; 5691 } 5692 #promo-card-substack > div:first-of-type { 5693 display: flex; 5694 flex-direction: column; 5695 justify-content: space-evenly; 5696 gap: 32px; 5697 margin-bottom: 8px; 5698 margin-top: 32px; 5699 } 5700 #promo-card-substack > div > div:first-of-type { 5701 display: flex; 5702 flex-direction: column; 5703 gap: 8px; 5704 padding: 0 24px; 5705 text-align: center; 5706 max-width: 270px; 5707 } 5708 #promo-card-substack p { 5709 font-size: 14px; 5710 } 5711</style> 5712</template><template name="wide-magazine-promo.html"><div id="wide-magazine-promo"> 5713 <span class="yellow-triangle"></span> 5714 <div id="wide-magazine-text"> 5715 <h3 class="heading-2"> 5716 <span data-l10n-id="wide-promo-international-paper_issue">Ãdition</span> 5717 <span class="fc-red"> 5718 <span data-l10n-id="wide-promo-international-paper_number">Nº </span> 5719 <span data-magazine-number=""></span> 5720 </span> 5721 </h3> 5722 <h5 class="heading-5" data-l10n-id="wide-promo-international-paper_title">Revue Défense du Marxisme</h5> 5723 <div> 5724 <a data-magazine-link="" class="btn btn-primary" data-l10n-id="wide-promo-international-paper_cta-buy">Obtiens ta copie</a> 5725 <a data-l10n-id="wide-promo-international-paper_cta-subscribe" data-l10n-attrs="href" class="btn btn-secondary btn-outline" href="/abonnement#ddm">Sâabonner</a> 5726 </div> 5727 </div> 5728 <div id="wide-magazine-promo-img"> 5729 <img data-magazine-image=""> 5730 </div> 5731</div> 5732 5733<style> 5734 #wide-magazine-promo { 5735 background-color: #dfdfdf; 5736 position: relative; 5737 overflow: hidden; 5738 display: flex; 5739 justify-content: flex-end; 5740 flex-direction: row-reverse; 5741 align-items: center; 5742 padding: 42px 32px; 5743 } 5744 5745 #wide-magazine-promo::after { 5746 content: ""; 5747 display: block; 5748 width: 100%; 5749 height: 100%; 5750 position: absolute; 5751 top: 0; 5752 left: 0; 5753 mix-blend-mode: overlay; 5754 opacity: 0.4; 5755 background: url(/assets/promo-cards/backgrounds/bg-pattern-paper-wide.jpg) 5756 lightgray 0% / cover no-repeat; 5757 } 5758 5759 #wide-magazine-promo img { 5760 width: auto; 5761 height: 190px; 5762 transform: rotate(-4deg) translateY(-2px); 5763 box-shadow: 2px 2px 7px 0px rgb(35 31 32 / 54%); 5764 z-index: 1; 5765 } 5766 5767 #wide-magazine-text { 5768 flex-grow: 0; 5769 flex-shrink: 0; 5770 position: relative; 5771 z-index: 1; 5772 } 5773 5774 #wide-magazine-promo > div { 5775 display: flex; 5776 flex-direction: column; 5777 gap: 8px; 5778 flex-shrink: 0; 5779 position: relative; 5780 } 5781 5782 #wide-magazine-promo > div > div { 5783 margin-top: 12px; 5784 gap: 1em; 5785 display: flex; 5786 } 5787 5788 #wide-magazine-promo-img { 5789 flex-grow: 1; 5790 justify-content: center; 5791 align-items: center; 5792 margin: 10px 0; 5793 } 5794 5795 #wide-magazine-promo-img::before { 5796 content: ""; 5797 display: block; 5798 width: 600%; 5799 height: 200%; 5800 position: absolute; 5801 top: -50%; 5802 left: 50%; 5803 background: var(--brand-yellow); 5804 clip-path: polygon(0% 30%, 0% 66%, 45% 100%, 100% 100%, 100% 0%, 45% 0%); 5805 opacity: 0.7; 5806 } 5807 5808 @media screen and (max-width: 1100px) { 5809 #wide-magazine-promo { 5810 padding: 42px 24px; 5811 } 5812 #wide-magazine-promo img { 5813 height: 170px; 5814 } 5815 } 5816 5817 @media screen and (max-width: 1020px) { 5818 #wide-magazine-promo { 5819 justify-content: center; 5820 gap: 42px; 5821 } 5822 #wide-magazine-promo > div { 5823 flex-grow: 0; 5824 } 5825 #wide-magazine-promo img { 5826 height: 170px; 5827 } 5828 } 5829 5830 @media screen and (max-width: 550px) { 5831 #wide-magazine-promo-img::before { 5832 display: none; 5833 } 5834 5835 #wide-magazine-promo { 5836 padding: 24px 16px; 5837 gap: 24px; 5838 flex-direction: column-reverse; 5839 align-items: center; 5840 text-align: center; 5841 justify-content: center; 5842 } 5843 } 5844</style> 5845</template><template name="wide-paper-promo.html"><div id="wide-paper-promo"> 5846 <span class="red-triangle"></span> 5847 <span class="red-triangle2"></span> 5848 <div id="wide-paper-text"> 5849 <h3 class="heading-2"> 5850 <span data-l10n-id="wide-promo-national-paper_issue">Ãdition</span> 5851 <span class="fc-red">
5852 <span data-l10n-id="wide-promo-national-paper_number">Nº </span> 5853 <span data-paper-number=""></span> 5854 </span> 5855 </h3> 5856 <h5 class="heading-5" data-l10n-id="wide-promo-national-paper_title">Journal Révolution communiste</h5> 5857 <div> 5858 <a data-paper-link="" class="btn btn-primary" data-l10n-id="wide-promo-national-paper_cta-buy">Obtiens ta copie</a> 5859 <a data-l10n-id="wide-promo-national-paper_cta-subscribe" data-l10n-attrs="href" class="btn btn-secondary btn-outline" href="/abonnement">Sâabonner</a> 5860 </div> 5861 </div> 5862 <div id="wide-paper-promo-img"> 5863 <img data-paper-image=""> 5864 </div> 5865</div> 5866 5867<style> 5868 #wide-paper-promo { 5869 background-color: #dfdfdf; 5870 position: relative; 5871 overflow: hidden; 5872 display: flex; 5873 justify-content: flex-start; 5874 align-items: flex-end; 5875 padding: 42px 32px; 5876 } 5877 5878 #wide-paper-promo::after { 5879 content: ""; 5880 display: block; 5881 width: 100%; 5882 height: 100%; 5883 position: absolute; 5884 top: 0; 5885 left: 0; 5886 mix-blend-mode: overlay; 5887 opacity: 0.4; 5888 background: url(/assets/promo-cards/backgrounds/bg-pattern-paper-wide2.jpg) 5889 lightgray 0% / cover no-repeat; 5890 } 5891 5892 #wide-paper-promo img { 5893 width: auto; 5894 height: 190px; 5895 transform: rotate(-4deg) translateY(-2px); 5896 box-shadow: 2px 2px 7px 0px rgb(35 31 32 / 54%); 5897 } 5898 5899 #wide-paper-text { 5900 flex-grow: 0; 5901 flex-shrink: 0; 5902 } 5903 5904 #wide-paper-promo > div { 5905 position: relative; 5906 z-index: 1; 5907 display: flex; 5908 flex-direction: column; 5909 gap: 8px; 5910 flex-shrink: 0; 5911 } 5912 5913 #wide-paper-promo > div > div { 5914 margin-top: 12px; 5915 gap: 1em; 5916 display: flex; 5917 } 5918 5919 #wide-paper-promo-img { 5920 flex-grow: 1; 5921 justify-content: center; 5922 align-items: center; 5923 margin: 10px 0; 5924 } 5925 .red-triangle { 5926 position: absolute; 5927 left: 0; 5928 top: 0; 5929 background: var(--brand-red); 5930 width: 50%; 5931 height: 50%; 5932 clip-path: polygon(0 0, 0% 24%, 93% 88%, 73% 0%); 5933 } 5934 .red-triangle2 { 5935 position: absolute; 5936 right: 0; 5937 bottom: 0; 5938 background: var(--brand-red); 5939 width: 50%; 5940 height: 50%; 5941 clip-path: polygon(87% 100%, 100% 100%, 100% 50%, 69% 45%); 5942 display: none; 5943 } 5944 5945 @media screen and (max-width: 1100px) { 5946 #wide-paper-promo { 5947 padding: 42px 24px; 5948 } 5949 #wide-paper-promo img { 5950 height: 170px; 5951 } 5952 .red-triangle { 5953 transform: translateY(-20%); 5954 } 5955 } 5956 5957 @media screen and (max-width: 1020px) { 5958 #wide-paper-promo { 5959 justify-content: center; 5960 gap: 42px; 5961 } 5962 #wide-paper-promo > div { 5963 flex-grow: 0; 5964 } 5965 #wide-paper-promo img { 5966 height: 170px; 5967 } 5968 .red-triangle { 5969 transform: translateY(0%); 5970 clip-path: polygon(0 0, 0% 46%, 34% 77%, 21% 0%); 5971 } 5972 .red-triangle2 { 5973 display: block; 5974 } 5975 } 5976 5977 @media screen and (max-width: 760px) { 5978 .red-triangle { 5979 clip-path: polygon(0 0, 0% 20%, 95% 73%, 73% 0%); 5980 } 5981 5982 .red-triangle2 { 5983 display: none; 5984 } 5985 } 5986 5987 @media screen and (max-width: 550px) { 5988 .red-triangle, 5989 .red-triangle2 { 5990 display: none; 5991 } 5992 5993 #wide-paper-promo { 5994 padding: 24px 16px; 5995 gap: 24px; 5996 flex-direction: column-reverse; 5997 align-items: center; 5998 text-align: center; 5999 justify-content: center; 6000 } 6001 } 6002</style> 6003</template><template name="school-session.html"><div data-root="" class="school-topic"> 6004 <h2 class="school-topic-head" data-title=""></h2> 6005 <div class="row school-topic-content"> 6006 <div class="school-topic-title-col"> 6007 <figure> 6008 <img data-image="" class="school-topic-img"> 6009 <figcaption data-image-caption="" class="school-topic-img-caption"> 6010 </figcaption> 6011 </figure> 6012 <div class="school-topic-schedule"> 6013 <p data-time="" class="schedule-time"></p> 6014 <p data-lang-note="" class="schedule-time"></p> 6015 </div> 6016 <div data-speaker="" class="school-topic-speaker-notes"></div> 6017 </div> 6018 <div class="school-topic-description-col"> 6019 <div data-description="" class="school-text"></div> 6020 <div class="school-reading-list-wrapper"> 6021 <h2 class="school-section-subheader school-section-subheader-small" data-l10n-id="school_suggested-readings-title">Lectures recommandées</h2> 6022 <div data-reading-list="" class="school-reading-list"></div> 6023 </div> 6024 </div> 6025 </div> 6026</div> 6027 6028<style> 6029 .school-topic { 6030 padding-top: 0.4375rem; 6031 color: #231f20; 6032 font-size: 16px; 6033 font-family: Barlow; 6034 font-weight: 500; 6035 line-height: 20.80px; 6036 word-wrap: break-word; 6037 margin-bottom: 72px; 6038 scroll-margin: 120px; 6039 6040 .school-reading-list ul { 6041 margin-bottom: 1rem; 6042 } 6043 6044 p { 6045 margin-bottom: 1rem; 6046 } 6047 6048 .school-topic-head { 6049 color: var(--school-red); 6050 font-size: 22px; 6051 font-family: Barlow Condensed; 6052 font-weight: 600; 6053 text-transform: uppercase; 6054 line-height: 22px; 6055 letter-spacing: 0.66px; 6056 padding-bottom: 24px; 6057 } 6058 6059 .school-section-subheader-small {
6060 font-size: 18px; 6061 font-family: Barlow Condensed; 6062 font-weight: 500; 6063 text-transform: uppercase; 6064 line-height: 18px; 6065 letter-spacing: 0.54px; 6066 margin-top: 32px; 6067 } 6068 6069 .school-topic-img { 6070 margin-bottom: 0.4375rem; 6071 } 6072 6073 .school-topic-description-col { 6074 padding-top: 0.625rem; 6075 } 6076 6077 .school-topic-schedule { 6078 padding-top: 1.125rem; 6079 6080 .schedule-time { 6081 font-weight: 700; 6082 } 6083 6084 @media (min-width: 991.98px) { 6085 p { 6086 margin-bottom: 0.6875rem; 6087 } 6088 } 6089 } 6090 } 6091 6092 .school-topic-title-col { 6093 img { 6094 min-height: 200px; 6095 width: 100%; 6096 background: #ddd; 6097 } 6098 } 6099 6100 .school-reading-list-wrapper:has(.school-reading-list:empty) { 6101 display: none; 6102 } 6103 6104 .school-topic-img-caption { 6105 font-family: "Barlow", sans-serif; 6106 color: var(--brand-grey-1); 6107 font-size: 0.875rem; 6108 margin-top: 8px; 6109 } 6110</style> 6111</template><template name="search-bar.html"><div> 6112 <div class="search-bar"> 6113 <div class="input-wrapper"> 6114 <slot name="start-extra"></slot> 6115 <slot name="input"></slot> 6116 <div style="height: 18px; width: 18px"> 6117 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="loading"> 6118 <line x1="12" y1="2" x2="12" y2="6"></line> 6119 <line x1="12" y1="18" x2="12" y2="22"></line> 6120 <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line> 6121 <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line> 6122 <line x1="2" y1="12" x2="6" y2="12"></line> 6123 <line x1="18" y1="12" x2="22" y2="12"></line> 6124 <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line> 6125 <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line> 6126 </svg> 6127 <button data-search-bar-clear=""> 6128 <svg class="large-screen" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 6129 <path d="M8 0.5C3.8525 0.5 0.5 3.8525 0.5 8C0.5 12.1475 3.8525 15.5 8 15.5C12.1475 15.5 15.5 12.1475 15.5 8C15.5 3.8525 12.1475 0.5 8 0.5ZM11.75 10.6925L10.6925 11.75L8 9.0575L5.3075 11.75L4.25 10.6925L6.9425 8L4.25 5.3075L5.3075 4.25L8 6.9425L10.6925 4.25L11.75 5.3075L9.0575 8L11.75 10.6925Z" fill="currentColor"></path> 6130 </svg> 6131 <svg class="small-screen" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> 6132 <path d="M16 3.41333L14.5867 2L9 7.58667L3.41333 2L2 3.41333L7.58667 9L2 14.5867L3.41333 16L9 10.4133L14.5867 16L16 14.5867L10.4133 9L16 3.41333Z" fill="currentColor"></path> 6133 </svg> 6134 </button> 6135 <slot name="end-extra"></slot> 6136 </div> 6137 </div> 6138 <div class="search-results"> 6139 <div class="search-results-head"> 6140 <span class="instructions large-screen" data-l10n-id="search-results_more">Appuyez sur Entrée pour afficher tous les résultats.</span> 6141 <a class="instructions-link small-screen btn-ghost more-link" data-search-link=""> 6142 <oc-with-icon data-name="btn-ghost-chevron" data-l10n-id="search-results_click-more">Voir tous les résultats</oc-with-icon> 6143 </a> 6144 </div> 6145 <ul data-search-results-list=""></ul> 6146 <div data-search-no-results=""> 6147 <svg width="21" height="25" viewbox="0 0 21 25" fill="none" xmlns="http://www.w3.org/2000/svg"> 6148 <path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 1.27441C10.75 0.998272 10.5261 0.774414 10.25 0.774414C9.97386 0.774414 9.75 0.998272 9.75 1.27441V5.27441C9.75 5.55056 9.97386 5.77441 10.25 5.77441C10.5261 5.77441 10.75 5.55056 10.75 5.27441V1.27441ZM5.13411 3.45432C4.95733 3.24218 4.64205 3.21352 4.42991 3.3903C4.21777 3.56709 4.18911 3.88237 4.36589 4.09451L6.86589 7.09451C7.04267 7.30664 7.35795 7.33531 7.57009 7.15852C7.78223 6.98174 7.81089 6.66646 7.63411 6.45432L5.13411 3.45432ZM16.4981 6.34029C16.2583 6.20329 15.9529 6.28659 15.8159 6.52634C15.6789 6.7661 15.7622 7.07153 16.0019 7.20854L18.6696 8.73292L10.2559 12.7184L2.24424 8.71251L4.52735 7.19044C4.75711 7.03726 4.8192 6.72683 4.66603 6.49706C4.51285 6.2673 4.20241 6.20521 3.97265 6.35839L0.97265 8.35839L0.75 8.77441V19.2744L1.02639 19.7216L10.0264 24.2216L10.464 24.2263L19.964 19.7263L20.25 19.2744V8.77441L19.9981 8.34029L16.4981 6.34029ZM10.75 13.5908L19.25 9.56451V18.958L10.75 22.9843V13.5908ZM9.75 13.5834V22.9654L1.75 18.9654V9.58343L9.75 13.5834ZM16.0701 3.3903C15.858 3.21352 15.5427 3.24218 15.3659 3.45432L12.8659 6.45432C12.6891 6.66646 12.7178 6.98174 12.9299 7.15852C13.142 7.33531 13.4573 7.30664 13.6341 7.09451L16.1341 4.09451C16.3109 3.88237 16.2822 3.56709 16.0701 3.3903Z" fill="currentColor"></path> 6149 </svg> 6150 <h4 data-l10n-id="search_no-results-title">Aucun résultat</h4> 6151 <p data-l10n-id="search_no-results-message">Aucun résultat ne correspondant à votre recherche. Essayez autre chose.</p> 6152 </div> 6153 </div> 6154 </div> 6155</div> 6156 6157<style> 6158 :host { 6159 --decoration: grey; 6160 --search-results-background: transparent; 6161 --search-results-foreground: currentColor; 6162 --search-result-title: blue; 6163 --search-result-hover-backgrounnd: grey; 6164 background-color: var(--search-results-background); 6165 container-name: host; 6166 container-type: inline-size; 6167 display: block; 6168 font-size: 1rem; 6169 } 6170 6171 .search-bar { 6172 background-color: inherit; 6173 color: inherit; 6174 position: relative; 6175 width: 100%; 6176 z-index: 1000; 6177 } 6178 6179 .search-bar ::slotted(input) { 6180 background-color: transparent; 6181 border: none; 6182 height: 1.25em; 6183 outline: none; 6184 width: 100%; 6185 } 6186 6187 .search-bar button { 6188 background-color: transparent; 6189 border: none; 6190 padding: 0; 6191 } 6192 6193 .search-bar button[data-search-bar-submit] { 6194 padding: 0 0.5em 0 0; 6195 } 6196 6197 .search-bar button svg { 6198 display: block; 6199 width: auto; 6200 } 6201 6202 :host(:not([data-type="no-dropdown"])) .search-results-head {
6203 align-items: end; 6204 border-top: 1px solid var(--decoration); 6205 display: grid; 6206 margin-inline: 1em; 6207 } 6208 6209 .input-wrapper { 6210 align-items: center; 6211 display: grid; 6212 grid-gap: 0.5em; 6213 grid-template-columns: 1fr auto auto; 6214 padding: 1em; 6215 border: 1px solid var(--search-results-foreground); 6216 } 6217 6218 .input-wrapper > * { 6219 align-items: center; 6220 display: flex; 6221 } 6222 6223 :host(:not([data-type="no-dropdown"])[data-state="opened"]), 6224 :host(:not([data-type="no-dropdown"])[data-state="no-results"]) { 6225 filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); 6226 } 6227 6228 :host(:not([data-type="no-dropdown"])[data-state="opened"]) .input-wrapper, 6229 :host(:not([data-type="no-dropdown"])[data-state="no-results"]) 6230 .input-wrapper { 6231 border: none; 6232 } 6233 6234 .instructions, 6235 .instructions-link { 6236 font-size: 0.875em; 6237 text-align: end; 6238 } 6239 6240 .instructions { 6241 font-style: italic; 6242 margin-block-start: 0.875em; 6243 } 6244 6245 .instructions-link { 6246 color: var(--brand-blue); 6247 margin-block: 1em; 6248 cursor: pointer; 6249 } 6250 6251 :host([data-type="no-dropdown"]) .search-results { 6252 display: none !important; 6253 } 6254 6255 .search-results { 6256 background-color: var(--search-results-background); 6257 color: var(--search-results-foreground); 6258 position: absolute; 6259 top: 100%; 6260 width: 100%; 6261 } 6262 6263 .search-results button { 6264 background-color: var(--search-results-background); 6265 background-color: color-mix( 6266 in srgb, 6267 var(--search-results-background) 85%, 6268 black 6269 ); 6270 border: none; 6271 color: var(--search-results-foreground); 6272 padding: 0.5em 0.75em; 6273 } 6274 6275 ul[data-search-results-list] { 6276 display: grid; 6277 grid-auto-flow: row; 6278 grid-gap: 0.5em; 6279 list-style-type: none; 6280 margin-block-start: 0; 6281 margin-block-end: 0.875em; 6282 padding-inline: 0; 6283 text-align: start; 6284 } 6285 6286 ul li { 6287 cursor: pointer; 6288 padding: 0.5em 1em; 6289 } 6290 6291 ul li:hover { 6292 background: var(--search-result-hover-backgrounnd); 6293 } 6294 6295 ul a { 6296 color: currentColor; 6297 display: grid; 6298 grid-auto-flow: row; 6299 grid-gap: 0.25em; 6300 text-decoration: none; 6301 } 6302 6303 [data-search-result-title] { 6304 color: var(--search-result-title); 6305 } 6306 6307 [data-search-result-title] em { 6308 font-style: normal; 6309 font-weight: 600; 6310 } 6311 6312 [data-search-result-meta] { 6313 color: var(--decoration); 6314 font-size: 0.8125em; 6315 line-height: 1em; 6316 min-height: 1em; 6317 } 6318 6319 [data-search-result-meta] > span { 6320 color: var(--search-results-foreground); 6321 } 6322 6323 [data-search-result-meta][data-state="loading"] { 6324 background: linear-gradient(90deg, var(--decoration), #fff); 6325 background-size: 250% 250%; 6326 animation: scrolling-gradient 800ms ease infinite; 6327 width: 24ch; 6328 border-radius: 0.25em; 6329 } 6330 6331 :host(:not([data-state="opened"])) [data-search-bar-clear], 6332 :host(:not([data-state="loading"])) .loading { 6333 display: none; 6334 } 6335 6336 :host(:not([data-type="no-dropdown"])[data-state="opened"]) 6337 [data-search-bar-clear], 6338 :host(:not([data-type="no-dropdown"])[data-state="no-results"]) 6339 [data-search-bar-clear] { 6340 display: block; 6341 } 6342 6343 :host([data-state="loading"]) .loading { 6344 animation-duration: 3s; 6345 animation-iteration-count: infinite; 6346 animation-name: spin; 6347 animation-timing-function: linear; 6348 display: block; 6349 } 6350 6351 slot[name="start-extra"], 6352 slot[name="end-extra"] { 6353 display: none; 6354 line-height: 1em; 6355 } 6356 6357 [data-search-no-results] { 6358 align-items: center; 6359 flex-direction: column; 6360 justify-content: center; 6361 display: none; 6362 height: 100%; 6363 text-align: center; 6364 } 6365 6366 [data-search-no-results] h4 { 6367 font-size: 1.125em; 6368 font-weight: 500; 6369 } 6370 6371 [data-search-no-results] h4, [data-search-no-results] p { 6372 line-height: 1.5em; 6373 margin-block: 0; 6374 } 6375 6376 :host([data-state="no-results"]) [data-search-results-list] { 6377 display: none; 6378 } 6379 6380 :host([data-state="no-results"]) [data-search-no-results] { 6381 display: flex; 6382 } 6383 6384 :host([data-state="no-results"]) .search-results-head > * { 6385 display: none !important; 6386 } 6387 6388 .large-screen { 6389 display: inherit !important; 6390 } 6391 6392 .small-screen { 6393 display: none !important; 6394 } 6395 6396 @keyframes spin { 6397 from { 6398 transform: rotate(0deg); 6399 } 6400 to { 6401 transform: rotate(360deg); 6402 } 6403 } 6404 6405 @keyframes scrolling-gradient { 6406 0% { 6407 background-position: 0% 50%; 6408 } 6409 50% { 6410 background-position: 100% 50%; 6411 } 6412 100% { 6413 background-position: 0% 50%; 6414 } 6415 } 6416 6417 @media screen and (min-width: 768px) { 6418 :host(:not([data-type="no-dropdown"])[data-state="opened"]), 6419 :host(:not([data-type="no-dropdown"])[data-state="no-results"]) { 6420 filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)); 6421 } 6422 6423 :host(:not([data-type="no-dropdown"])[data-state="opened"]) .input-wrapper, 6424 :host(:not([data-type="no-dropdown"])[data-state="no-results"]) 6425 .input-wrapper { 6426 border: none; 6427 } 6428 6429 :host(:not([data-state])) .search-results, 6430 :host([data-state="loading"]) .search-results, 6431 :host([data-state="closed"]) .search-results { 6432 opacity: 0; 6433 pointer-events: none; 6434 } 6435 6436 .search-results { 6437 max-height: calc(100vh - 12em);
6438 overflow-y: scroll; 6439 } 6440 6441 :host([data-type="no-dropdown"]) .search-results { 6442 display: none; 6443 } 6444 6445 [data-search-no-results] { 6446 padding: 2em; 6447 } 6448 } 6449 6450 @media screen and (max-width: 768px) { 6451 :host([data-display="hidden"]) .search-results { 6452 opacity: 0; 6453 pointer-events: none; 6454 } 6455 6456 :host([data-display="shown"][data-state="closed"]) .search-results { 6457 opacity: 1; 6458 pointer-events: auto; 6459 } 6460 6461 :host([data-display="shown"][data-state="closed"]) .search-results-head, 6462 :host([data-display="shown"][data-state="loading"]) .search-results-head { 6463 display: none; 6464 } 6465 6466 /* For the moment, extra are only available on mobile, this should be more flexible */ 6467 :host([data-extra="start"]) .input-wrapper { 6468 grid-template-columns: auto 1fr auto auto; 6469 } 6470 6471 :host([data-extra="start"]) slot[name="start-extra"], 6472 :host([data-extra="both"]) slot[name="start-extra"], 6473 :host([data-extra="end"]) slot[name="end-extra"], 6474 :host([data-extra="both"]) slot[name="end-extra"] { 6475 display: block; 6476 } 6477 6478 :host([data-extra="end"]) .input-wrapper { 6479 grid-template-columns: 1fr auto auto auto; 6480 } 6481 6482 :host([data-extra="both"]) .input-wrapper { 6483 grid-template-columns: auto 1fr auto auto auto; 6484 } 6485 6486 .search-results { 6487 left: -1em; 6488 height: calc(100vh - 52px - 2em); 6489 margin-block-start: 1em; 6490 overflow-y: scroll; 6491 width: 100vw; 6492 } 6493 6494 .search-results-head { 6495 border-top: none; 6496 } 6497 6498 .instructions { 6499 margin-block-end: 1em; 6500 } 6501 6502 ul[data-search-results-list] { 6503 grid-gap: 0; 6504 } 6505 6506 ul li { 6507 border-top: 1px solid var(--decoration); 6508 padding: 1em; 6509 } 6510 6511 .large-screen { 6512 display: none !important; 6513 } 6514 6515 .small-screen { 6516 display: inherit !important; 6517 } 6518 } 6519</style> 6520</template><template name="search-bar_item.html"><li> 6521 <a href="#" data-search-result-link=""> 6522 <span data-search-result-title=""> </span> 6523 <span data-search-result-meta=""></span> 6524 </a> 6525</li> 6526</template><template name="social-media-links.html"><div class="social-media-wrapper"> 6527 <div class="logo instagram"> 6528 <a data-l10n-id="social-icon_instagram" data-l10n-attrs="href" href="https://www.instagram.com/revcommuniste"> 6529 <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 6530 <g id="instagram-fill"> 6531 <path id="Vector" d="M13.0281 2.00098C14.1535 2.00284 14.7238 2.00879 15.2166 2.02346L15.4107 2.02981C15.6349 2.03778 15.8561 2.04778 16.1228 2.06028C17.1869 2.10944 17.9128 2.27778 18.5503 2.52528C19.2094 2.77944 19.7661 3.12278 20.3219 3.67861C20.8769 4.23444 21.2203 4.79278 21.4753 5.45028C21.7219 6.08694 21.8903 6.81361 21.9403 7.87778C21.9522 8.14444 21.9618 8.36564 21.9697 8.58989L21.976 8.78397C21.9906 9.27672 21.9973 9.8471 21.9994 10.9725L22.0002 11.7182C22.0003 11.8093 22.0003 11.9033 22.0003 12.0003L22.0002 12.2824L21.9996 13.0281C21.9977 14.1535 21.9918 14.7238 21.9771 15.2166L21.9707 15.4107C21.9628 15.6349 21.9528 15.8561 21.9403 16.1228C21.8911 17.1869 21.7219 17.9128 21.4753 18.5503C21.2211 19.2094 20.8769 19.7661 20.3219 20.3219C19.7661 20.8769 19.2069 21.2203 18.5503 21.4753C17.9128 21.7219 17.1869 21.8903 16.1228 21.9403C15.8561 21.9522 15.6349 21.9618 15.4107 21.9697L15.2166 21.976C14.7238 21.9906 14.1535 21.9973 13.0281 21.9994L12.2824 22.0002C12.1913 22.0003 12.0973 22.0003 12.0003 22.0003L11.7182 22.0002L10.9725 21.9996C9.8471 21.9977 9.27672 21.9918 8.78397 21.9771L8.58989 21.9707C8.36564 21.9628 8.14444 21.9528 7.87778 21.9403C6.81361 21.8911 6.08861 21.7219 5.45028 21.4753C4.79194 21.2211 4.23444 20.8769 3.67861 20.3219C3.12278 19.7661 2.78028 19.2069 2.52528 18.5503C2.27778 17.9128 2.11028 17.1869 2.06028 16.1228C2.0484 15.8561 2.03871 15.6349 2.03086 15.4107L2.02457 15.2166C2.00994 14.7238 2.00327 14.1535 2.00111 13.0281L2.00098 10.9725C2.00284 9.8471 2.00879 9.27672 2.02346 8.78397L2.02981 8.58989C2.03778 8.36564 2.04778 8.14444 2.06028 7.87778C2.10944 6.81278 2.27778 6.08778 2.52528 5.45028C2.77944 4.79194 3.12278 4.23444 3.67861 3.67861C4.23444 3.12278 4.79278 2.78028 5.45028 2.52528C6.
653108778 2.27778 6.81278 2.11028 7.87778 2.06028C8.14444 2.0484 8.36564 2.03871 8.58989 2.03086L8.78397 2.02457C9.27672 2.00994 9.8471 2.00327 10.9725 2.00111L13.0281 2.00098ZM12.0003 7.00028C9.23738 7.00028 7.00028 9.23981 7.00028 12.0003C7.00028 14.7632 9.23981 17.0003 12.0003 17.0003C14.7632 17.0003 17.0003 14.7607 17.0003 12.0003C17.0003 9.23738 14.7607 7.00028 12.0003 7.00028ZM12.0003 9.00028C13.6572 9.00028 15.0003 10.3429 15.0003 12.0003C15.0003 13.6572 13.6576 15.0003 12.0003 15.0003C10.3434 15.0003 9.00028 13.6576 9.00028 12.0003C9.00028 10.3434 10.3429 9.00028 12.0003 9.00028ZM17.2503 5.50028C16.561 5.50028 16.0003 6.06018 16.0003 6.74943C16.0003 7.43867 16.5602 7.99944 17.2503 7.99944C17.9395 7.99944 18.5003 7.43954 18.5003 6.74943C18.5003 6.06018 17.9386 5.49941 17.2503 5.50028Z"></path> 6532 </g> 6533 </svg> 6534 </a> 6535 </div> 6536 <div class="logo tiktok"> 6537 <a data-l10n-id="social-icon_tiktok" data-l10n-attrs="href" href="https://www.tiktok.com/@revcommuniste"> 6538 <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 6539 <g id="tiktok-fill"> 6540 <path id="Vector" d="M16 8.24537V15.5C16 19.0899 13.0899 22 9.5 22C5.91015 22 3 19.0899 3 15.5C3 11.9101 5.91015 9 9.5 9C10.0163 9 10.5185 9.06019 11 9.17393V12.3368C10.5454 12.1208 10.0368 12 9.5 12C7.567 12 6 13.567 6 15.5C6 17.433 7.567 19 9.5 19C11.433 19 13 17.433 13 15.5V2H16C16 4.76142 18.2386 7 21 7V10C19.1081 10 17.3696 9.34328 16 8.24537Z"></path> 6541 </g> 6542 </svg> 6543 </a> 6544 </div> 6545 <div class="logo youtube"> 6546 <a data-l10n-id="social-icon_youtube" data-l10n-attrs="href" href="https://www.youtube.com/@revcommuniste"> 6547 <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 6548 <g id="youtube-fill"> 6549 <path id="Vector" d="M12.2439 4C12.778 4.00294 14.1143 4.01586 15.5341 4.07273L16.0375 4.09468C17.467 4.16236 18.8953 4.27798 19.6037 4.4755C20.5486 4.74095 21.2913 5.5155 21.5423 6.49732C21.942 8.05641 21.992 11.0994 21.9982 11.8358L21.9991 11.9884V11.9991C21.9991 11.9991 21.9991 12.0028 21.9991 12.0099L21.9982 12.1625C21.992 12.8989 21.942 15.9419 21.5423 17.501C21.2878 18.4864 20.5451 19.261 19.6037 19.5228C18.8953 19.7203 17.467 19.8359 16.0375 19.9036L15.5341 19.9255C14.1143 19.9824 12.778 19.9953 12.2439 19.9983L12.0095 19.9991H11.9991C11.9991 19.9991 11.9956 19.9991 11.9887 19.9991L11.7545 19.9983C10.6241 19.9921 5.89772 19.941 4.39451 19.5228C3.4496 19.2573 2.70692 18.4828 2.45587 17.501C2.0562 15.9419 2.00624 12.8989 2 12.1625V11.8358C2.00624 11.0994 2.0562 8.05641 2.45587 6.49732C2.7104 5.51186 3.45308 4.73732 4.39451 4.4755C5.89772 4.05723 10.6241 4.00622 11.7545 4H12.2439ZM9.99911 8.49914V15.4991L15.9991 11.9991L9.99911 8.49914Z"></path> 6550 </g> 6551 </svg> 6552 </a> 6553 </div> 6554 <div class="logo spotify"> 6555 <a data-l10n-id="social-icon_spotify" data-l10n-attrs="href" href="http://tinyurl.com/bdzjekwz"> 6556 <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 6557 <g id="spotify-fill"> 6558 <path id="Vector" d="M12.001 2C6.50098 2 2.00098 6.5 2.00098 12C2.00098 17.5 6.50098 22 12.001 22C17.501 22 22.001 17.5 22.001 12C22.001 6.5 17.551 2 12.001 2ZM15.751 16.65C13.401 15.2 10.451 14.8992 6.95014 15.6992C6.60181 15.8008 6.30098 15.55 6.20098 15.25C6.10098 14.8992 6.35098 14.6 6.65098 14.5C10.451 13.6492 13.751 14 16.351 15.6C16.701 15.75 16.7501 16.1492 16.6018 16.45C16.4018 16.7492 16.0518 16.85 15.751 16.65ZM16.7501 13.95C14.051 12.3 9.95098 11.8 6.80098 12.8C6.40181 12.9 5.95098 12.7 5.85098 12.3C5.75098 11.9 5.95098 11.4492 6.35098 11.3492C10.001 10.25 14.501 10.8008 17.601 12.7C17.9018 12.8508 18.051 13.35 17.8018 13.7C17.551 14.05 17.101 14.2 16.7501 13.95ZM6.30098 9.75083C5.80098 9.9 5.30098 9.6 5.15098 9.15C5.00098 8.64917 5.30098 8.15 5.75098 7.99917C9.30098 6.94917 15.151 7.14917 18.8518 9.35C19.301 9.6 19.451 10.2 19.201 10.65C18.9518 11.0008 18.351 11.1492 17.9018 10.9C14.701 9 9.35098 8.8 6.30098 9.75083Z"></path> 6559 </g> 6560 </svg> 6561 </a> 6562 </div> 6563 <div class="logo x"> 6564 <a data-l10n-id="social-icon_x" data-l10n-attrs="href" href="https://twitter.com/RevCommuniste"> 6565 <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 6566 <g id="ant-design:x-outlined"> 6567 <path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M21.5859 21.375L14.0885 10.4471L14.1013 10.4574L20.8613 2.625H18.6023L13.0954 9L8.72227 2.625H2.79766L9.79723 12.8276L9.79638 12.8267L2.41406 21.375H4.67309L10.7955 14.2824L15.6613 21.375H21.5859ZM7.82719 4.32954L18.3466 19.6705H16.5564L6.02852 4.32954H7.82719Z"></path> 6568 </g> 6569 </svg> 6570 </a> 6571 </div> 6572 <div class="logo facebook"> 6573 <a data-l10n-id="social-icon_facebook" data-l10n-attrs="href" href="https://www.facebook.com/revcommuniste"> 6574 <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 6575 <g id="facebook-circle-fill"> 6576 <path id="Vector" d="M12.001 2C6.47813 2 2.00098 6.47715 2.00098 12C2.00098 16.9913 5.65783 21.1283 10.4385 21.8785V14.8906H7.89941V12H10.4385V9.79688C10.4385 7.29063 11.9314 5.90625 14.2156 5.90625C15.3097 5.90625 16.4541 6.10156 16.4541 6.10156V8.5625H15.1931C13.9509 8.5625 13.5635 9.33334 13.5635 10.1242V12H16.3369L15.8936 14.8906H13.5635V21.8785C18.3441 21.1283 22.001 16.9913 22.001 12C22.001 6.47715 17.5238 2
657612.001 2Z"></path> 6577 </g> 6578 </svg> 6579 </a> 6580 </div> 6581</div> 6582 6583<style> 6584 .social-media-wrapper { 6585 display: flex; 6586 gap: 1rem; 6587 flex-wrap: wrap; 6588 } 6589 6590 .social-media-wrapper li a { 6591 display: block; 6592 height: 24px; 6593 } 6594 6595 .social-media-wrapper svg { 6596 fill: var(--social-media-link-color, var(--brand-parchment)); 6597 } 6598</style> 6599</template><template name="ticker.html"><div id="ticker-wrapper"> 6600 <div id="ticker"></div> 6601</div> 6602 6603<style> 6604 /* Default slot content hidden, its content is cloned and duplicated in js */ 6605 #ticker-wrapper > #content { 6606 display: none; 6607 } 6608 6609 #ticker-wrapper { 6610 overflow: hidden; 6611 } 6612 6613 #ticker { 6614 text-wrap: nowrap; 6615 white-space: nowrap; 6616 /* set an explicit width so that animation time will stay constant even if text length changes */ 6617 width: min-content; 6618 6619 animation: 60s linear 0s infinite normal ticker-text-animation; 6620 } 6621 6622 @keyframes ticker-text-animation { 6623 from { 6624 transform: translateX(-150px); 6625 } 6626 6627 to { 6628 transform: translateX(-3000px); 6629 } 6630 } 6631</style> 6632</template><template name="upcoming-events.html"><div id="events-wrapper"> 6633 <h3 class="heading-3" data-l10n-id="event_hub-title">Prochains événements</h3> 6634 <div id="events-pinned-list-container"> 6635 <a id="events-pinned"> 6636 <div> 6637 <span class="heading-6" id="events-pinned-region"></span> 6638 ⢠6639 <span class="heading-6" id="events-pinned-days"></span> 6640 </div> 6641 <div class="heading-4 fx-underline" id="events-pinned-title"></div> 6642 <div class="fc-parchment text-body-sm" id="events-pinned-time-and-location"> 6643 </div> 6644 </a> 6645 <div id="no-upcoming-events" data-l10n-id="event_hub-none-scheduled" style="display: none">Aucun événement planifié pour lâinstant</div> 6646 <ul id="events-container"></ul> 6647 <div id="scroll-indicator"> 6648 <oc-with-icon data-l10n-id="event_hub-scroll" data-name="chevron-right" style="--rotate: 90deg">Faire défiler</oc-with-icon> 6649 </div> 6650 </div> 6651</div> 6652<template id="list-item-template"> 6653 <a class="list-item"> 6654 <li> 6655 <div class="heading-6" id="event-region"></div> 6656 <div class="text-title" id="event-title"></div> 6657 <span> 6658 <span class="text-body-sm" id="event-time"></span> 6659 / 6660 <span class="text-body-sm" id="event-location"></span> 6661 </span> 6662 </li> 6663 <oc-with-icon data-name="chevron-right" style="--gap: 0"> </oc-with-icon> 6664 </a> 6665</template> 6666<template id="list-separator-template"> 6667 <div class="heading-4 list-separator"> 6668 <span id="event-weekday-and-month"></span> 6669 <span id="event-day" class="fc-red"></span> 6670 </div> 6671</template> 6672 6673<style> 6674 #events-wrapper a { 6675 text-decoration: none; 6676 color: inherit; 6677 } 6678 6679 /* Events without a link attached should not appear clickable */ 6680 #events-wrapper a:not([href]) { 6681 cursor: default; 6682 } 6683 6684 /********* Pinned Event *********/ 6685 #events-wrapper #events-pinned { 6686 display: grid; 6687 grid-template-columns: 1fr; 6688 padding: 8px 16px; 6689 color: white; 6690 background-color: var(--brand-red); 6691 border: 2px solid var(--brand-charcoal); 6692 } 6693 6694 #events-wrapper #events-pinned-list-container { 6695 /* For the absolutely positioned scroll indicator */ 6696 position: relative; 6697 } 6698 6699 /********* Events List *********/ 6700 #events-wrapper #events-container { 6701 max-height: 300px; 6702 display: grid; 6703 grid-template-columns: 1fr; 6704 list-style-type: none; 6705 margin: 0; 6706 padding: 0; 6707 border: 2px solid var(--brand-charcoal); 6708 border-top: 0; 6709 overflow-y: scroll; 6710 } 6711 6712 #events-wrapper #event-region { 6713 color: var(--brand-red); 6714 font-size: 18px; 6715 } 6716 6717 #events-wrapper .list-item { 6718 background: transparent; 6719 cursor: pointer; 6720 padding: 12px 8px 10px 8px; 6721 text-align: start; 6722 6723 display: flex; 6724 justify-content: space-between; 6725 align-items: center; 6726 } 6727 6728 #events-wrapper .list-item oc-with-icon { 6729 color: var(--brand-blue); 6730 } 6731 6732 #events-wrapper .list-separator { 6733 background-color: var(--brand-parchment); 6734 padding: 8px 8px 4px 8px; 6735 } 6736 6737 /********* Scroll Indicator *********/ 6738 #events-wrapper #scroll-indicator { 6739 transition: opacity 0.5s ease-in-out; 6740 position: absolute; 6741 bottom: 0; 6742 left: 0; 6743 right: 0; 6744 width: 100%; 6745 background-color: var(--brand-charcoal); 6746 opacity: 0.9; 6747 } 6748 6749 #events-wrapper #scroll-indicator.hidden { 6750 display: block; 6751 opacity: 0; 6752 } 6753 6754 #events-wrapper #scroll-indicator oc-with-icon { 6755 text-transform: uppercase; 6756 font-weight: 600; 6757 6758 display: flex; 6759 justify-content: center;
6760 align-items: center; 6761 padding: 2px; 6762 color: white; 6763 } 6764</style> 6765</template><template name="video-card.html"><a class="card" href=""> 6766 <img data-thumbnail="" width="600" height="400"> 6767 <h3 data-title=""></h3> 6768</a> 6769 6770<style> 6771 :host { 6772 --category-color: black; 6773 --category-color-contrast: white; 6774 --category-font-family: inherit; 6775 --image-background-color: beige; 6776 display: block; 6777 font-family: inherit; 6778 font-size: 1rem; 6779 height: fit-content; 6780 } 6781 6782 a { 6783 text-decoration: none; 6784 } 6785 6786 a:link, a:hover, a:visited { 6787 color: currentColor; 6788 } 6789 6790 .card { 6791 display: grid; 6792 grid-auto-flow: column; 6793 grid-template-columns: auto 1fr; 6794 grid-gap: 1em; 6795 height: 100%; 6796 position: relative; 6797 } 6798 6799 [data-thumbnail] { 6800 aspect-ratio: 16/9; 6801 background-color: var(--image-background-color); 6802 display: block; 6803 height: auto; 6804 object-fit: cover; 6805 width: 100%; 6806 } 6807 6808 [data-title] { 6809 -webkit-box-orient: vertical; 6810 -webkit-line-clamp: 4; 6811 display: -webkit-box; 6812 font-size: 1em; 6813 font-weight: 500; 6814 line-height: 1.1em; 6815 margin: 0; 6816 overflow-y: hidden; 6817 padding-bottom: 2px; /* prevent text cutoff on last line */ 6818 } 6819</style> 6820</template><template name="session.html"><div data-root="" class="mws-topic"> 6821 <h2 class="mws-topic-head" data-title=""></h2> 6822 <div class="row mws-topic-content"> 6823 <div class="mws-topic-title-col"> 6824 <figure> 6825 <img data-image="" class="mws-topic-img"> 6826 <figcaption data-image-caption="" class="mws-topic-img-caption"> 6827 </figcaption> 6828 </figure> 6829 <div class="mws-topic-schedule"> 6830 <p data-time="" class="schedule-time"></p> 6831 <p data-lang-note="" class="schedule-time"></p> 6832 </div> 6833 <div data-speaker="" class="mws-topic-speaker-notes"></div> 6834 </div> 6835 <div class="mws-topic-description-col"> 6836 <div data-description="" class="mws-text"></div> 6837 <div class="mws-reading-list-wrapper"> 6838 <h2 class="mws-section-subheader mws-section-subheader-small" data-l10n-id="mws-2025_suggested-readings-title">Lectures recommandées</h2> 6839 <div data-reading-list="" class="mws-reading-list"></div> 6840 </div> 6841 </div> 6842 </div> 6843</div> 6844 6845<style> 6846 .mws-topic { 6847 padding-top: 0.4375rem; 6848 color: #231f20; 6849 font-size: 16px; 6850 font-family: Barlow; 6851 font-weight: 500; 6852 line-height: 20.80px; 6853 word-wrap: break-word; 6854 margin-bottom: 72px; 6855 scroll-margin: 120px; 6856 6857 .mws-reading-list { 6858 margin-left: 1.5rem; 6859 6860 ul { 6861 margin-bottom: 1rem; 6862 margin-left: 1.5rem; 6863 } 6864 } 6865 6866 p { 6867 margin-bottom: 1rem; 6868 } 6869 6870 .mws-topic-head { 6871 color: var(--mws-red); 6872 font-size: 22px; 6873 font-family: Barlow Condensed; 6874 font-weight: 600; 6875 text-transform: uppercase; 6876 line-height: 22px; 6877 letter-spacing: 0.66px; 6878 padding-bottom: 24px; 6879 } 6880 6881 .mws-section-subheader-small { 6882 font-size: 18px; 6883 font-family: Barlow Condensed; 6884 font-weight: 500; 6885 text-transform: uppercase; 6886 line-height: 18px; 6887 letter-spacing: 0.54px; 6888 margin-top: 32px; 6889 } 6890 6891 .mws-topic-img { 6892 margin-bottom: 0.4375rem; 6893 } 6894 6895 .mws-topic-description-col { 6896 padding-top: 0.625rem; 6897 } 6898 6899 .mws-topic-schedule { 6900 padding-top: 1.125rem; 6901 6902 .schedule-time { 6903 font-weight: 700; 6904 } 6905 6906 @media (min-width: 991.98px) { 6907 p { 6908 margin-bottom: 0.6875rem; 6909 } 6910 } 6911 } 6912 } 6913 6914 .mws-topic-title-col { 6915 img { 6916 min-height: 200px; 6917 width: 100%; 6918 background: #ddd; 6919 } 6920 } 6921 6922 .mws-reading-list-wrapper:has(.mws-reading-list:empty) { 6923 display: none; 6924 } 6925 6926 .mws-topic-img-caption { 6927 font-family: "Barlow", sans-serif; 6928 color: var(--brand-grey-1); 6929 font-size: 0.875rem; 6930 margin-top: 8px; 6931 } 6932</style> 6933</template></body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.