/* -------------------------------------------------------------------------------------------- * 1. Ombre portee parasite sur les trois points de la section "C est quoi Africana Week" * (Reveil spirituel, Adoration, Celebration) : le texte paraissait flou sur fond clair. * ------------------------------------------------------------------------------------------ */ .elementor-element-35374182 .elementor-icon-list-text, .elementor-element-35374182 .elementor-icon-list-item, .elementor-element-35374182 .elementor-icon-list-item span { text-shadow: none !important; } /* -------------------------------------------------------------------------------------------- * 2. Hierarchie des textes du bandeau d accueil : la date etait affichee aussi grande que la * phrase de presentation placee juste au-dessus, ce qui deseequilibrait la lecture. * ------------------------------------------------------------------------------------------ */ /* La date et la phrase de presentation partagent desormais exactement la meme taille, un peu plus genereuse qu auparavant, pour une lecture equilibree. */ .elementor-element-27664382 p { font-size: 26px !important; line-height: 1.55 !important; } @media (max-width: 1024px) { .elementor-element-27664382 p { font-size: 21px !important; } } @media (max-width: 640px) { .elementor-element-27664382 p { font-size: 18px !important; } } /* -------------------------------------------------------------------------------------------- * Contour jaune du titre "Africana week conference 2026" : son epaisseur, prevue pour un grand * ecran, ecrasait les lettres une fois le titre reduit sur tablette et telephone. * ------------------------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-27664382 h1.title { -webkit-text-stroke-width: 1.2px !important; letter-spacing: .5px !important; } } @media (max-width: 640px) { .elementor-element-27664382 h1.title { -webkit-text-stroke-width: .8px !important; letter-spacing: 0 !important; } } /* -------------------------------------------------------------------------------------------- * Bloc vert "Reveil spirituel / Unite des nations / Equipement des leaders" : il n avait aucune * marge laterale, le texte et les icones touchaient donc les bords sur petit ecran. * ------------------------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-b74c606 { padding: 44px 26px !important; } .elementor-element-b74c606 > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; } } @media (max-width: 640px) { .elementor-element-b74c606 { padding: 36px 20px !important; } /* Chaque item se centrait sur sa propre largeur : les trois icones se retrouvaient decalees les unes par rapport aux autres. On force un centrage sur toute la largeur du bloc. */ .elementor-element-e5a6e8e, .elementor-element-215c55f, .elementor-element-86f32aa { margin-bottom: 8px !important; width: 100% !important; text-align: center !important; align-items: center !important; } .elementor-element-e5a6e8e *, .elementor-element-215c55f *, .elementor-element-86f32aa * { text-align: center !important; } .elementor-element-e5a6e8e .elementor-icon-wrapper, .elementor-element-215c55f .elementor-icon-wrapper, .elementor-element-86f32aa .elementor-icon-wrapper, .elementor-element-e5a6e8e .elementor-widget-container, .elementor-element-215c55f .elementor-widget-container, .elementor-element-86f32aa .elementor-widget-container { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; } } /* -------------------------------------------------------------------------------------------- * Globe : sur petit ecran il touchait les deux bords de l ecran et ses legendes n etaient pas * alignees avec lui. * ------------------------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-1d509748 { padding-left: 20px !important; padding-right: 20px !important; align-items: center !important; text-align: center !important; } .aw-globe-bloc { margin-left: auto !important; margin-right: auto !important; } .aw-globe-stats, .aw-globe-aide { width: 100% !important; text-align: center !important; } } /* -------------------------------------------------------------------------------------------- * 3. Blocs "Orateurs inspires", etc. : l icone est positionnee en absolu et venait recouvrir le * debut du titre. On degage la place necessaire a gauche du titre. * ------------------------------------------------------------------------------------------ */ .rs-addon-services.style7 .services-title .title, .rs-addon-services.style7 .title { padding-left: 58px !important; } @media (max-width: 640px) { .rs-addon-services.style7 .services-title .title, .rs-addon-services.style7 .title { padding-left: 54px !important; } } /* -------------------------------------------------------------------------------------------- * 4. En-tete sur tablette et telephone : le logo touchait presque le bord gauche et le bouton de * menu semblait decale vers l interieur. On equilibre les deux cotes. * ------------------------------------------------------------------------------------------ */ @media (max-width: 1024px) { .elementor-element-ca8dbb2 > .e-con-inner { padding-left: 20px !important; padding-right: 20px !important; } .elementor-element-ca8dbb2 .hfe-flyout-wrapper, .elementor-element-ca8dbb2 .elementor-widget-hfe-flyout-menu { margin-right: 0 !important; padding-right: 0 !important; } .elementor-element-ca8dbb2 .elementor-widget-site-logo, .elementor-element-ca8dbb2 .elementor-widget-theme-site-logo { padding-left: 0 !important; } } /* -------------------------------------------------------------------------------------------- * 5. Compte a rebours : sur petits ecrans les nombres debordaient de leur colonne et les libelles * passaient a la ligne. On reduit progressivement et on autorise le passage sur deux lignes. * ------------------------------------------------------------------------------------------ */ @media (max-width: 1024px) { /* Le bandeau jaune n avait aucune marge interieure : le contenu touchait les bords. */ .elementor-element-4dc0c01b { padding: 30px 26px !important; } .countdown-timer-init { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; width: 100% !important; margin-top: 8px !important; } .countdown-timer-init .countdown-items { width: 100% !important; min-width: 0 !important; padding: 0 !important; text-align: center !important; } /* taille deplacee dans aw-design-system.php (source unique) */ .countdown-timer-init .ctw-digits { line-height: 1.05 !important; } .countdown-timer-init .ctw-label { /* taille deplacee dans aw-design-system.php */ white-space: nowrap !important; display: block !important; } /* Les deux-points entre les valeurs n ont plus lieu d etre dans une grille reguliere. */ .countdown-timer-init > *:not(.countdown-items) { display: none !important; } } @media (max-width: 767px) { .elementor-element-4dc0c01b { padding: 26px 20px !important; } .countdown-timer-init { gap: 6px !important; } /* taille deplacee dans aw-design-system.php */ } @media (max-width: 400px) { /* taille deplacee dans aw-design-system.php */ } /* -------------------------------------------------------------------------------------------- * 6. Pied de page sur tablette et telephone : le menu principal etait tronque et la ligne de * copyright n avait pas la meme taille de texte que le reste. * ------------------------------------------------------------------------------------------ */ @media (max-width: 1024px) { footer .elementor-nav-menu, footer .hfe-nav-menu, footer ul.menu { display: flex !important; flex-wrap: wrap !important; gap: 6px 22px !important; overflow: visible !important; max-height: none !important; } footer .elementor-nav-menu li, footer .hfe-nav-menu li, footer ul.menu li { width: auto !important; white-space: nowrap; } footer, footer p, footer a, footer span, footer li { font-size: 15px !important; line-height: 1.7 !important; } footer .copyright, footer [class*="copyright"], footer .copyright p, footer [class*="copyright"] p { font-size: 13.5px !important; line-height: 1.6 !important; text-align: center !important; padding: 14px 18px !important; } } /* -------------------------------------------------------------------------------------------- * 7. Pages Inscription et Connexion : le sous-titre du bandeau etait bloque sur une seule ligne * (white-space: nowrap), il sortait donc de l ecran sur telephone au lieu de passer a la ligne. * ------------------------------------------------------------------------------------------ */ .rs-hero-sub { white-space: normal !important; overflow-wrap: break-word; } @media (max-width: 1024px) { .rs-hero-sub { font-size: 19px !important; line-height: 1.5 !important; } } @media (max-width: 640px) { .rs-hero-sub { font-size: 16px !important; line-height: 1.5 !important; } } /* -------------------------------------------------------------------------------------------- * 8. Pied de page sur telephone : les colonnes gardaient leur alignement de bureau, ce qui * decalait les titres vers la droite et les faisait deborder de l ecran. * ------------------------------------------------------------------------------------------ */ @media (max-width: 767px) { footer .elementor-widget-container, footer .title, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer p, footer ul, footer li, footer span { text-align: center !important; } /* Plusieurs blocs du pied de page ont une largeur fixe heritee du bureau (elementor-widget__width-initial) : elle depassait la largeur du telephone. */ footer [class*="elementor-element-"], footer .elementor-widget__width-initial, footer .elementor-widget__width-auto { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; left: auto !important; right: auto !important; } footer .e-con, footer .e-con-inner, footer .e-con-full { flex-wrap: wrap !important; align-items: center !important; } /* Le bloc Coordonnees (adresse electronique et telephone) etait masque sur telephone par un reglage du gabarit : les visiteurs mobiles n avaient donc aucun moyen de nous joindre depuis le pied de page, et un grand vide subsistait a sa place. On le retablit. */ footer .elementor-element-2f93e31, footer .elementor-element-da90478, footer .elementor-element-7e3663e { display: block !important; width: 100% !important; height: auto !important; } footer .elementor-element-da90478 { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; } footer .elementor-nav-menu, footer .hfe-nav-menu, footer ul.menu { justify-content: center !important; } footer .elementor-social-icons-wrapper, footer [class*="social"] { justify-content: center !important; display: flex !important; } footer .e-con-inner { padding-left: 20px !important; padding-right: 20px !important; } /* Le selecteur de langue flotte en bas a gauche et venait recouvrir la ligne de copyright. On reserve la hauteur necessaire sous le pied de page. */ footer .copyright, footer [class*="copyright"] { padding-bottom: 62px !important; } } /* -------------------------------------------------------------------------------------------- * 9. Tableau de bord Mon compte sur tablette et telephone : le bloc conservait une largeur de * bureau (environ la moitie de l ecran), si bien que le texte se retrouvait comprime sur une * colonne de quelques mots de large. On lui rend toute la largeur disponible. * ------------------------------------------------------------------------------------------ */ @media (max-width: 1024px) { /* Cause principale : le conteneur du tableau de bord portait un remplissage de 130 pixels a droite, prevu pour un ecran large. Sur telephone il amputait un tiers de la largeur disponible et comprimait tout le contenu sur quelques mots par ligne. */ body.page-id-16777 .elementor-element-e23bf59, body.page-id-17723 .elementor-element-e23bf59, body.page-id-17724 .elementor-element-e23bf59 { padding-left: 18px !important; padding-right: 18px !important; } body.page-id-16777 .elementor-element-f431d7f, body.page-id-17723 .elementor-element-f431d7f, body.page-id-17724 .elementor-element-f431d7f, body.page-id-16777 .elementor-element-da781c8, body.page-id-17723 .elementor-element-da781c8, body.page-id-17724 .elementor-element-da781c8, body.page-id-16777 .elementor-element-e08c140, body.page-id-17723 .elementor-element-e08c140, body.page-id-17724 .elementor-element-e08c140, body.page-id-16777 .e-n-tabs, body.page-id-17723 .e-n-tabs, body.page-id-17724 .e-n-tabs, body.page-id-16777 .e-n-tabs > .e-con, body.page-id-17723 .e-n-tabs > .e-con, body.page-id-17724 .e-n-tabs > .e-con, body.page-id-16777 .e-n-tabs-content > .e-con, body.page-id-17723 .e-n-tabs-content > .e-con, body.page-id-17724 .e-n-tabs-content > .e-con { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; } /* Les blocs internes du tableau de bord gardaient eux aussi une largeur fixe heritee du bureau. On les laisse tous occuper la largeur disponible. */ body.page-id-16777 .e-n-tabs .e-con, body.page-id-17723 .e-n-tabs .e-con, body.page-id-17724 .e-n-tabs .e-con, body.page-id-16777 .e-n-tabs .elementor-widget, body.page-id-17723 .e-n-tabs .elementor-widget, body.page-id-17724 .e-n-tabs .elementor-widget, body.page-id-16777 .elementor-element-b57bd42, body.page-id-17723 .elementor-element-b57bd42, body.page-id-17724 .elementor-element-b57bd42 { width: 100% !important; max-width: 100% !important; flex-basis: auto !important; } body.page-id-16777 .e-n-tabs-heading, body.page-id-17723 .e-n-tabs-heading, body.page-id-17724 .e-n-tabs-heading { width: 100% !important; flex-direction: column !important; } body.page-id-16777 .e-n-tab-title, body.page-id-17723 .e-n-tab-title, body.page-id-17724 .e-n-tab-title { width: 100% !important; justify-content: center !important; } } /* awPadOnglets : le panneau de contenu des onglets portait 50 px de remplissage, prevus pour un ecran large. Sur telephone cela amputait 100 px de largeur utile au texte. */ @media (max-width: 1024px) { body.page-id-16777 .e-n-tabs-content > .e-con, body.page-id-17723 .e-n-tabs-content > .e-con, body.page-id-17724 .e-n-tabs-content > .e-con { padding: 24px 16px !important; } } /* awGrilleContact : le formulaire de contact utilise une grille Bootstrap dont les rangees ont des marges negatives de 12,75 px de chaque cote. Le conteneur Elementor parent n a aucun remplissage pour les compenser, ce qui faisait deborder le formulaire de 26 px sur telephone. */ @media (max-width: 1024px) { .wpcf7-form .row { margin-left: 0 !important; margin-right: 0 !important; } .wpcf7-form [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } } /* awTypoHomogene : NEUTRALISEE le 08/08/2026. Cette regle imposait h2.title a 30 px sur telephone et 36 px sur tablette, en !important, sur tout le site. Elle reprenait donc la main sur la taille reglee widget par widget dans Elementor et faisait revenir le desordre qu elle etait censee corriger. L echelle est desormais portee par Elementor : titres de section 40 / 38 / 34 / 28 px, sur-titres 16 / 16 / 15 / 14 px, identiques sur les 23 pages et les 3 langues. */ /* Le titre des onglets de la galerie utilisait Roboto alors que tout le reste du site est en Poppins. On le realigne sur la police du site. */ .e-tabs-title, .e-n-tab-title-text { font-family: "Poppins", sans-serif !important; } /* awPadContact : le bloc du formulaire de contact portait 60 px de remplissage a gauche et a droite, prevu pour un ecran large. Sur un telephone de 415 px cela ne laissait que 255 px aux champs de saisie. */ @media (max-width: 767px) { .elementor-element-fa383dd { padding: 34px 20px 44px !important; } } @media (min-width: 768px) and (max-width: 1024px) { .elementor-element-fa383dd { padding: 46px 34px 56px !important; } } /* awPadApropos : deux blocs de la page A propos gardaient 113 px de remplissage a gauche et a droite. Sur une tablette de 820 px cela consommait plus du quart de la largeur. */ @media (max-width: 1024px) { .elementor-element-d2bf6b3, .elementor-element-368f47a { padding-left: 34px !important; padding-right: 34px !important; } } @media (max-width: 767px) { .elementor-element-d2bf6b3, .elementor-element-368f47a, .elementor-element-68092c4 { padding-left: 20px !important; padding-right: 20px !important; } } /* awTitresBureau : sur ordinateur la quasi totalite des titres de section est a 50 px. Quatre titres avaient garde des valeurs isolees (34 px, 33 px, 24 px), ce qui cassait la hierarchie visuelle d une page a l autre. On les ramene sur la meme echelle que les autres. */ @media (min-width: 1025px) { /* taille unifiee dans Elementor (40/38/34/28) - ancienne exception 50px retiree */ /* taille unifiee dans Elementor (40/38/34/28) - ancienne exception 50px retiree */ /* taille unifiee dans Elementor (40/38/34/28) - ancienne exception 50px retiree */ /* taille unifiee dans Elementor (40/38/34/28) - ancienne exception 50px retiree */ } /* awMargeSection : cette section cumulait 100 px de marge exterieure et 60 px de remplissage interieur, soit 160 px de vide au dessus et en dessous. On ramene la marge a une valeur qui laisse respirer sans creuser un trou dans la page. */ .elementor-element-ba57922 { margin-top: 36px !important; margin-bottom: 36px !important; } @media (max-width: 1024px) { .elementor-element-ba57922 { margin-top: 20px !important; margin-bottom: 20px !important; } } /* awPiedCompact : sur telephone le pied de page mesurait 1177 px de haut. La cause principale etait une marge superieure exprimee en pourcentage sur le bloc du menu, qui valait 123 px une fois la colonne passee en pleine largeur. On supprime ces vides herites du bureau et on resserre les espacements entre colonnes. */ @media (max-width: 1024px) { footer .elementor-element-439fe20 { margin-top: 0 !important; } footer .elementor-element-2f93e31 { padding-bottom: 0 !important; } footer .e-con > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; } footer .elementor-element-0e2f688, footer .elementor-element-4aa3f13 { padding-top: 0 !important; padding-bottom: 0 !important; } footer .elementor-widget-heading { margin-bottom: 6px !important; } /* Espacement unique et regulier entre les quatre colonnes empilees. */ footer .elementor-element-7f2c184 > .e-con-inner > .e-con { margin: 0 0 26px 0 !important; } footer .elementor-element-7f2c184 { padding: 34px 18px 8px !important; } } /* awCopyrightFin : la ligne de copyright etait a 15 px avec 25,5 px d interligne, ce qui la rendait aussi voyante que le contenu. On la ramene a une mention discrete, sur deux lignes serrees, et on supprime le remplissage qui separait le lien de confidentialite. */ footer .elementor-element-e49870f { padding: 12px 16px 14px !important; } footer .elementor-element-78be0b5, footer .elementor-element-78be0b5 p { font-size: 12.5px !important; line-height: 1.42 !important; margin: 0 !important; } .aw-cr-lien { font-size: 12.5px !important; } @media (max-width: 480px) { footer .elementor-element-78be0b5, footer .elementor-element-78be0b5 p, .aw-cr-lien { font-size: 11.5px !important; } footer .elementor-element-e49870f { padding: 10px 12px 12px !important; } } /* awGlobeCentre : le bloc du globe collait au bord gauche sur telephone. */ @media (max-width: 1024px) { .aw-globe-bloc { margin-left: auto !important; margin-right: auto !important; padding-left: 16px !important; padding-right: 16px !important; } .aw-globe-canvas { margin-left: auto !important; margin-right: auto !important; display: block !important; } } /* awDescCompte : la phrase d introduction du tableau de bord portait un remplissage droit de 191 px prevu pour le bureau. Sur telephone il ne restait que 146 px au texte, qui s etirait alors sur 410 px de haut. */ @media (max-width: 1024px) { body.page-id-16777 .elementor-element-3727cb8 h5, body.page-id-17723 .elementor-element-3727cb8 h5, body.page-id-17724 .elementor-element-3727cb8 h5, body.page-id-16777 .elementor-element-3727cb8 .e-heading-base, body.page-id-17723 .elementor-element-3727cb8 .e-heading-base, body.page-id-17724 .elementor-element-3727cb8 .e-heading-base { padding: 4px 0 10px !important; font-size: 17px !important; line-height: 1.55 !important; } } @media (min-width: 1025px) { .elementor-element-3727cb8 h5, .elementor-element-3727cb8 .e-heading-base { padding-right: 24px !important; } } /* awCompteLargeur : le formulaire Compte utilisateur etait bride a 480 px par Ultimate Member et rendu dans une colonne de 341 px, d ou l impression de bandeau etroit. On lui rend toute la largeur disponible. La barre grise Compte / Mot de passe est retiree : ces reglages sont deja accessibles depuis le tableau a droite. */ .um.um-account, .um.um-account .um-account-main, .um.um-account .um-form, .elementor-element-b0dd60a, .elementor-element-46e12d7, .elementor-element-480e0ce { max-width: 100% !important; width: 100% !important; flex-basis: auto !important; } .um.um-account .um-account-nav, .um.um-account .um-account-side, .um.um-account .um-account-meta { display: none !important; } .um.um-account .um-account-main { margin: 0 !important; padding: 0 !important; } /* Champs a la meme echelle que les formulaires de delegation, qui servent de reference. */ .um.um-account input[type=text], .um.um-account input[type=email], .um.um-account input[type=password], .um.um-account select, .um.um-account textarea { width: 100% !important; font-size: 15px !important; padding: 12px 14px !important; border-radius: 8px !important; } .um.um-account .um-field-label label, .um.um-account .um-field-label { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 6px !important; } .um.um-account .um-field { margin-bottom: 16px !important; } /* awPacksStructure : la rangee des packs mesurait 512 px pour 563 px de contenu, en mode nowrap. Le second pack debordait donc de son conteneur et se retrouvait tronque. La rangee etait en plus decalee de 282 px vers la droite dans sa colonne. On lui rend toute la largeur, on autorise le retour a la ligne et on centre. */ .elementor-element-6ce731a2 { width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 22px !important; justify-content: center !important; align-items: stretch !important; } .elementor-element-8c22739, .elementor-element-5612d39 { flex: 1 1 300px !important; max-width: 100% !important; min-width: 0 !important; } @media (max-width: 900px) { .elementor-element-8c22739, .elementor-element-5612d39 { flex: 1 1 100% !important; } } /* La colonne qui contient la rangee etait elle aussi bridee. */ .elementor-element-6ce731a2, .elementor-element-6ce731a2 > .e-con-inner { margin-left: auto !important; margin-right: auto !important; } /* awGlobeConteneur : le conteneur du globe mesurait 357 px dans une zone de 415 px et etait cale a gauche, d ou le globe qui touchait le bord gauche et laissait 58 px de vide a droite. */ @media (max-width: 1024px) { .elementor-element-1d509748 { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .aw-globe-bloc { width: 100% !important; max-width: 100% !important; } .aw-globe-bloc canvas { margin: 0 auto !important; display: block !important; } } /* awPiedSerre : il restait environ 445 px de vides cumules entre les elements du pied de page, provenant des ecarts de grille et des marges de widgets calibres pour quatre colonnes cote a cote. Une fois empilees, ces valeurs s additionnent. On resserre l ensemble. */ @media (max-width: 1024px) { footer .e-con { gap: 12px !important; row-gap: 12px !important; } footer .elementor-widget { margin-bottom: 0 !important; } footer .elementor-widget-container { margin: 0 !important; } footer .elementor-icon-list-items { margin: 0 !important; } footer .elementor-icon-list-item { margin-bottom: 4px !important; } footer img { max-height: 104px !important; width: auto !important; } footer p { margin: 0 0 6px !important; } footer .elementor-social-icons-wrapper { margin: 4px 0 0 !important; } } /* awPiedBlocUnique : le pied de page mobile empilait cinq sections distinctes, dont deux vides, ce qui creait trois blocs separes tres hauts. On les rassemble en un seul bloc horizontal : identite en bandeau puis Menu et Coordonnees cote a cote. */ @media (max-width: 1024px) { footer .elementor-element-7f2c184 > .e-con-inner { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px 14px !important; } /* Les deux colonnes vides ne servaient qu a espacer sur ecran large. */ footer .elementor-element-519ae73, footer .elementor-element-51e9b28 { display: none !important; } footer .elementor-element-0e2f688 { flex: 1 1 100% !important; width: 100% !important; } footer .elementor-element-4aa3f13, footer .elementor-element-7f0de28 { flex: 1 1 calc(50% - 7px) !important; width: auto !important; max-width: none !important; text-align: left !important; align-items: flex-start !important; } footer .elementor-element-4aa3f13 .elementor-icon-list-items { align-items: flex-start !important; } } /* awIconeLigne : l icone de courriel et celle de telephone etaient posees au dessus de leur libelle. On les remet devant le texte, sur la meme ligne. */ .address-item.boxstyle2 { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; text-align: left !important; } .address-item.boxstyle2 .address-icon { flex: 0 0 auto !important; margin: 2px 0 0 !important; } .address-item.boxstyle2 .address-text { flex: 1 1 auto !important; text-align: left !important; } .address-item.boxstyle2 .address-text .label { text-align: left !important; display: block !important; } /* awFondCopyright : le bandeau vert du copyright s arretait a 391 px au lieu de couvrir toute la largeur, a cause d une marge laterale heritee. */ footer .elementor-element-bb88261 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; } footer .elementor-element-e49870f { padding-left: 0 !important; padding-right: 0 !important; } /* awPiedEquilibre : les deux colonnes a 50/50 etaient trop etroites pour les coordonnees : l adresse de courriel debordait et le libelle du telephone tombait sur trois lignes. On donne plus de place aux coordonnees et on supprime le vide restant sous le bloc identite. */ @media (max-width: 1024px) { footer .elementor-element-4aa3f13 { flex: 0 0 calc(34% - 7px) !important; max-width: calc(34% - 7px) !important; } footer .elementor-element-7f0de28 { flex: 0 0 calc(66% - 7px) !important; max-width: calc(66% - 7px) !important; } footer .elementor-element-0e2f688 { padding-bottom: 0 !important; margin-bottom: 0 !important; } footer .elementor-element-0e2f688 > .e-con-inner { padding-bottom: 0 !important; } footer .elementor-element-1195d4f { padding-bottom: 0 !important; } /* L adresse de courriel doit pouvoir se couper plutot que sortir de la colonne. */ footer .address-item.boxstyle2 .address-text, footer .address-item.boxstyle2 .address-text * { overflow-wrap: anywhere !important; word-break: break-word !important; } footer .address-item.boxstyle2 .address-text .label { font-size: 13px !important; line-height: 1.35 !important; } footer .address-item.boxstyle2 .address-text .text, footer .address-item.boxstyle2 .address-text a { font-size: 12.5px !important; line-height: 1.45 !important; text-align: left !important; } footer .address-item.boxstyle2 { margin-bottom: 12px !important; } /* Taille reelle au lieu d un scale() : un transform ancre en haut a gauche reduit le dessin mais pas la boite, ce qui decentrait l icone vers le haut. */ footer .address-item.boxstyle2 .address-icon { transform: none !important; width: 38px !important; height: 38px !important; } footer .elementor-element-4aa3f13 .elementor-icon-list-item a { font-size: 14px !important; } } /* awPadCoord : chaque ligne de coordonnees portait 41 px de remplissage a droite, prevu pour la mise en page a quatre colonnes du bureau. Dans une colonne mobile il ne restait que 58 px au texte, d ou l adresse de courriel coupee en cinq morceaux. */ @media (max-width: 1024px) { footer .address-item.boxstyle2 { padding-right: 0 !important; } footer .rs-contact-box, footer .elementor-element-7f0de28 .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding-right: 0 !important; } } /* awCoordChaine : la colonne Coordonnees perdait de la largeur a chaque niveau imbrique (10 px, 7 px, 10 px de remplissage cumules sur quatre conteneurs). On neutralise ces remplissages internes sur mobile pour rendre toute la largeur au texte. */ @media (max-width: 1024px) { footer .elementor-element-7f0de28 .e-con, footer .elementor-element-7f0de28 .e-con-inner, footer .elementor-element-2b68573, footer .elementor-element-2f93e31, footer .elementor-element-da90478, footer .elementor-element-9564921 { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } footer .elementor-element-7f0de28 { padding-left: 0 !important; padding-right: 0 !important; } } /* awVideIdentite : il restait 52 px de vide sous les icones sociales, provenant de la marge basse du widget et de la hauteur reservee au bloc identite. */ @media (max-width: 1024px) { footer .elementor-element-0e2f688 { height: auto !important; } footer .elementor-element-0e2f688 > * :last-child, footer .elementor-element-0e2f688 > *:last-child { margin-bottom: 0 !important; } footer .elementor-widget-social-icons, footer .elementor-widget-social-icons .elementor-widget-container { margin-bottom: 0 !important; padding-bottom: 0 !important; } footer .elementor-element-1195d4f { margin-bottom: 0 !important; } footer .elementor-element-25719af { margin: 0 !important; padding-bottom: 0 !important; } } /* awHauteurAuto : le bloc identite reservait 392 px alors que son contenu n en occupait que 285, laissant 52 px au dessus du logo et 107 px sous les icones sociales. Ces hauteurs venaient de conteneurs imbriques calibres pour la mise en page bureau. */ @media (max-width: 1024px) { footer .elementor-element-0e2f688, footer .elementor-element-7c0a02a, footer .elementor-element-d849d03, footer .elementor-element-65dd360, footer .elementor-element-1195d4f, footer .elementor-element-0e2f688 .e-con, footer .elementor-element-0e2f688 .e-con-inner { height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; row-gap: 10px !important; } footer .elementor-element-1195d4f { padding-left: 0 !important; padding-right: 0 !important; } } /* awBlocVertMarge : le grand bloc vert commencait a 10 px du bord gauche mais gardait une largeur de 415 px, egale a celle de l ecran : il depassait donc de 10 px a droite et donnait l impression d etre colle au bord. On lui rend des marges egales des deux cotes. */ @media (max-width: 1024px) { .elementor-element-b74c606 { width: auto !important; max-width: none !important; margin-left: 12px !important; margin-right: 12px !important; box-sizing: border-box !important; } } /* awPiedFinitions */ /* Le contour vert encadrait le pied de page sur ses quatre cotes. En bas il produisait une ligne qui coupait la page juste avant le bandeau de copyright : on la retire. */ footer .elementor-element-7f2c184 { border-bottom: 0 !important; } /* Le logo du pied de page etait aligne a gauche alors que le slogan juste en dessous est centre. */ footer .elementor-element-1195d4f, footer .elementor-element-1195d4f .elementor-widget-image, footer .elementor-element-1195d4f .elementor-widget-container { text-align: center !important; } footer .elementor-element-1195d4f img { margin-left: auto !important; margin-right: auto !important; display: block !important; } /* Copyright : interligne resserre et un peu d air en haut et en bas. */ footer .elementor-element-78be0b5, footer .elementor-element-78be0b5 p { line-height: 1.25 !important; } footer .elementor-element-bb88261 { padding-top: 8px !important; padding-bottom: 8px !important; } footer .elementor-element-e49870f { padding-top: 0 !important; padding-bottom: 0 !important; } /* awFaqIcone : CAUSE REELLE de "le moins ne fonctionne pas". Le theme applique pointer-events: none a .accordion-button des que la question est ouverte, c est-a-dire des qu elle perd la classe .collapsed. Le titre d une question ouverte n est donc plus cliquable du tout : le clic traverse le bouton et atterrit sur .accordion-header, qui ne porte aucun gestionnaire. La question s ouvre mais ne se referme jamais. Verifie en direct : elementFromPoint renvoie .accordion-button quand la question est fermee, et .accordion-header quand elle est ouverte. Un appel .click() en JavaScript fonctionnait malgre tout, car il court-circuite le test de survol : c est ce qui avait masque le defaut lors du controle precedent. */ .accordion-button, .accordion-button:not(.collapsed) { pointer-events: auto !important; cursor: pointer !important; } /* Le chevron ne pivotait pas et ne changeait que de couleur : ouvert ou ferme, l utilisateur voyait le meme symbole. On lui donne un etat visuel franc. */ .accordion-button::after { transition: transform .25s ease !important; transform: rotate(0deg) !important; } .accordion-button:not(.collapsed)::after { transform: rotate(180deg) !important; } .accordion-button { cursor: pointer !important; } /* Zone tactile confortable sur telephone : toute la ligne du titre doit repondre au doigt. */ @media (max-width: 1024px) { .accordion-button, .accordion-button .tab-title { min-height: 44px !important; display: flex !important; align-items: center !important; } } /* awTitreLargeur : les enveloppes d animation des titres (prelements, title-inner) se figeaient a la largeur mesuree avant le chargement des polices. Sur la page Programme, le titre Nos orateurs se retrouvait ainsi enferme dans 35 px au lieu des 395 px disponibles, d ou un texte casse mot par mot. On leur rend la largeur de leur conteneur. */ [class*=prelements], .title-inner, [class*=prelements] > *, .title-inner > *, h1.rs-split-text-enable, h2.rs-split-text-enable, h3.rs-split-text-enable { width: 100% !important; max-width: 100% !important; display: block !important; } [class*=prelements].center, .title-inner { margin-left: auto !important; margin-right: auto !important; } /* Sections du programme : elles doivent occuper la largeur disponible sur telephone et tablette, en gardant un remplissage interne confortable plutot qu un texte comprime. */ @media (max-width: 1024px) { body.page-id-5599 .e-con > .e-con-inner, .elementor-page .e-con.e-child > .e-con-inner { max-width: 100% !important; } .rs-event-schedule, .schedule-item, .rs-schedule-wrap, .event-schedule-item { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } } /* awHerosEspaces : le bloc de bienvenue commencait sans aucun espace au dessus, alors qu il en reste un genereux sous la date et le lieu, avant les boutons. On equilibre les deux. */ @media (max-width: 1024px) { body.home .elementor-element-53624721, body.page-id-2 .elementor-element-53624721 { padding-top: 34px !important; } } /* awIconesEcart : dans la liste a puces de la section "C est quoi Africana", les icones touchaient le texte. On leur donne un ecart constant et un alignement en haut de ligne. */ .elementor-icon-list-item, .elementor-icon-list-item > a { display: flex !important; align-items: flex-start !important; gap: 12px !important; } .elementor-icon-list-icon { flex: 0 0 auto !important; margin-right: 0 !important; padding-right: 0 !important; margin-top: 2px !important; } .elementor-icon-list-text { padding-left: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; } @media (max-width: 1024px) { .elementor-element-35374182 .elementor-icon-list-item { gap: 14px !important; margin-bottom: 10px !important; } } /* awSplitTexte : les titres animes par decoupe de caracteres restent replies quand l animation ne se declenche pas (section hors ecran au chargement, ou script differe par le cache). Le titre Les Orateurs se retrouvait ainsi enferme dans 35 px et invisible sur son fond sombre. On neutralise l etat initial de l animation : le texte s affiche normalement. */ .rs-split-text-enable, .rs-split-text-enable * { opacity: 1 !important; visibility: visible !important; transform: none !important; perspective: none !important; } .rs-split-text-enable { width: 100% !important; max-width: 100% !important; display: block !important; } .rs-split-text-enable .char, .rs-split-text-enable .word, .rs-split-text-enable > span, .rs-split-text-enable div > span { display: inline !important; white-space: normal !important; } [class*=prelements-heading], [class*=prelements-heading] > .title-inner { width: 100% !important; max-width: 100% !important; display: block !important; } /* awReboursMobile : sur ordinateur le compte a rebours reste tel qu il a ete concu. Sur mobile et tablette il debordait : on repartit les quatre unites sans cadre ni fond ajoute. */ @media (max-width: 1024px) { .elementor-element-aa8bae0, .elementor-element-aa8bae0 .elementor-widget-container, .countdown-timer-widget { width: 100% !important; max-width: 100% !important; } .countdown-timer-init { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* awReboursMobile : le retrait du cadre jaune est annule. Les cases gardent leur fond, leur arrondi et leur remplissage a tous les paliers ; la mise en page est definie une seule fois dans aw-design-system.php. */ .countdown-timer-init > * { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; min-width: 0 !important; .countdown-timer-init .ctw-digits { line-height: 1.1 !important; margin: 0 0 2px !important; } .countdown-timer-init .ctw-label { line-height: 1.2 !important; margin: 0 !important; } .countdown-timer-init .ctw-separator, .countdown-timer-init .separator { display: none !important; } } @media (max-width: 420px) { /* taille deplacee dans aw-design-system.php */ } /* awAproposV2 : equilibre des images de la page A propos. */ @media (max-width: 1024px) { .elementor-element-d83f821, .elementor-element-bf0700b { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; } .elementor-element-d83f821 img, .elementor-element-bf0700b img { width: 100% !important; border-radius: 10px !important; } .elementor-element-d83f821 img { height: 320px !important; object-fit: cover !important; } } /* awBienvenueEspace : le bloc de bienvenue etait colle a la barre de menu. */ @media (max-width: 1024px) { body.home .elementor-element-53624721 { padding-top: 54px !important; } } /* awIconeBloc : dans les quatre blocs blancs, l icone touchait la description. */ .rs-addon-services.style7 .services-desc, .rs-addon-services.style7 .services-text, .rs-addon-services.style7 p { padding-left: 60px !important; } /* --- Le widget prend toute la largeur disponible ------------------------ Elementor stockait des largeurs fixes par appareil (41px en tablette). Elles ont ete retirees en base ; ces regles empechent toute reapparition via un fichier CSS regenere ou la variable --container-widget-width. */ .elementor-widget-rs-countdown-timer-widget, .elementor-widget-rs-countdown-timer-widget.elementor-widget__width-initial, .elementor-widget-rs-countdown-timer-widget.elementor-widget__width-inherit { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; --container-widget-width: 100% !important; } .elementor-widget-rs-countdown-timer-widget > .elementor-widget-container, .countdown-timer-widget { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: block !important; } /* --- La rangee : quatre colonnes egales, jamais de retour a la ligne ---- */ .countdown-timer-init { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 16px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* Les separateurs et libelles decoratifs du plugin sont masques : la grille porte deja l espacement, ils ne feraient que voler de la place. */ .countdown-timer-init > *:not(.countdown-items) { display: none !important; } /* --- Le pave jaune ------------------------------------------------------ */ .countdown-timer-init .countdown-items { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: var(--aw-jaune, #FFDE00) !important; color: var(--aw-encre, #161212) !important; border-radius: var(--aw-r-md, 20px) !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; justify-self: stretch !important; padding: 16px 8px !important; overflow: hidden !important; box-sizing: border-box !important; } .countdown-timer-init .countdown-items::before, .countdown-timer-init .countdown-items::after { content: none !important; } /* --- Typographie fluide ------------------------------------------------- clamp() garantit une taille minimale lisible, une taille maximale sobre, et une progression continue entre les deux : aucun palier ne cree de chiffre rogne ni de libelle tronque. */ .countdown-timer-init .ctw-digits, .countdown-timer-widget .ctw-digits { display: block !important; width: 100% !important; font-size: clamp(30px, 2.6vw, 40px) !important; line-height: 1.04 !important; font-weight: 800 !important; letter-spacing: -0.01em !important; white-space: nowrap !important; margin: 0 !important; /* Le gabarit imposait une hauteur fixe de 80 px au bloc des chiffres, pour un texte qui n en occupe que 39 : les libelles se retrouvaient rejetes 40 px plus bas que necessaire. La hauteur suit desormais le texte. */ height: auto !important; min-height: 0 !important; padding: 0 !important; } .countdown-timer-init .ctw-label, .countdown-timer-widget .ctw-label { display: block !important; width: 100% !important; font-size: clamp(12px, 0.95vw, 15px) !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: .01em !important; opacity: 1 !important; white-space: nowrap !important; /* Le libelle portait 10 px de remplissage haut et bas, qui s ajoutaient a la marge : l ecart entre le chiffre et son libelle atteignait pres de 60 px. Il est ramene a une valeur lisible. */ margin: 4px 0 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } /* --- Tablette (768 a 1024 px) ------------------------------------------- */ @media (max-width: 1024px) { .countdown-timer-init { gap: 12px !important; } .countdown-timer-init .countdown-items { padding: 14px 6px !important; border-radius: var(--aw-r-sm, 14px) !important; } .countdown-timer-init .ctw-digits, .countdown-timer-widget .ctw-digits { font-size: clamp(28px, 4.4vw, 44px) !important; } .countdown-timer-init .ctw-label, .countdown-timer-widget .ctw-label { font-size: clamp(11px, 1.5vw, 15px) !important; margin-top: 5px !important; } } /* --- Telephone (0 a 767 px) -------------------------------------------- Meme composition qu ailleurs : quatre paves jaunes arrondis en ligne. Seules les valeurs changent, jamais la structure. */ @media (max-width: 767px) { .countdown-timer-init { gap: 8px !important; } .countdown-timer-init .countdown-items { padding: 14px 3px !important; border-radius: var(--aw-r-xs, 10px) !important; } .countdown-timer-init .ctw-digits, .countdown-timer-widget .ctw-digits { font-size: clamp(20px, 6.6vw, 34px) !important; } .countdown-timer-init .ctw-label, .countdown-timer-widget .ctw-label { font-size: clamp(9px, 2.7vw, 13px) !important; margin-top: 4px !important; } } /* --- La bande verte : carte arrondie, rien ne depasse ------------------- */ .elementor-element-10d6672 { border-radius: var(--aw-r-lg, 28px) !important; overflow: hidden !important; padding: 44px 36px !important; } /* Sur ordinateur, le texte occupe la gauche de la bande et les quatre paves se placent a sa droite, a parts egales : c est la disposition demandee. Le widget recevait auparavant une largeur fixe de 598 px sur 1228, ce qui donnait des paves de 137 px ; en partageant la rangee a parts egales il dispose d environ 600 px, soit des paves de 140 px avec des chiffres calibres en consequence. En dessous de 1025 px la bande repasse en colonne : cote a cote, les deux blocs deviendraient illisibles. */ .elementor-element-bab6f5b { max-width: 100% !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 40px !important; } .elementor-element-bab6f5b > .elementor-element, .elementor-element-bab6f5b > .elementor-widget { flex: 1 1 0 !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; --container-widget-width: 100% !important; } @media (max-width: 1024px) { .elementor-element-bab6f5b { flex-direction: column !important; align-items: stretch !important; gap: 22px !important; } .elementor-element-bab6f5b > .elementor-element, .elementor-element-bab6f5b > .elementor-widget { flex: 0 0 auto !important; width: 100% !important; } } @media (max-width: 767px) { .elementor-element-bab6f5b { gap: 18px !important; } } @media (max-width: 1024px) { .elementor-element-10d6672 { padding: 32px 22px !important; border-radius: var(--aw-r-md, 20px) !important; } } @media (max-width: 767px) { .elementor-element-10d6672 { padding: 24px 14px !important; border-radius: var(--aw-r-sm, 14px) !important; } } @media (max-width: 1024px) { .elementor-5434 .e-con:has(> .elementor-widget-rs-image):has(> .e-con), .elementor-11723 .e-con:has(> .elementor-widget-rs-image):has(> .e-con), .elementor-11725 .e-con:has(> .elementor-widget-rs-image):has(> .e-con), .elementor-17733 .e-con:has(> .elementor-widget-rs-image):has(> .e-con), .elementor-17734 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; } .elementor-5434 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .elementor-widget-rs-image, .elementor-11723 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .elementor-widget-rs-image, .elementor-11725 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .elementor-widget-rs-image, .elementor-17733 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .elementor-widget-rs-image, .elementor-17734 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .elementor-widget-rs-image { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } .elementor-5434 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .e-con, .elementor-11723 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .e-con, .elementor-11725 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .e-con, .elementor-17733 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .e-con, .elementor-17734 .e-con:has(> .elementor-widget-rs-image):has(> .e-con) > .e-con { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; } .elementor-5434 .e-con .e-con { width: auto !important; max-width: 100% !important; min-width: 0 !important; } .elementor-11723 .e-con .e-con { width: auto !important; max-width: 100% !important; min-width: 0 !important; } .elementor-11725 .e-con .e-con { width: auto !important; max-width: 100% !important; min-width: 0 !important; } .elementor-17733 .e-con .e-con { width: auto !important; max-width: 100% !important; min-width: 0 !important; } .elementor-17734 .e-con .e-con { width: auto !important; max-width: 100% !important; min-width: 0 !important; } } :root { --aw-champ-r: 12px; --aw-carte-r: 20px; --aw-focus: 0 0 0 3px rgba(0, 133, 63, .16); } /* ====================================================================== 1. CARTES DE COORDONNEES (page Contact) Le degrade vert clair vers vert fonce ecrasait le texte et jurait avec le reste du site. Une carte blanche laisse la couleur au seul pastille d icone, ce qui rend l adresse et le telephone nettement plus lisibles. ====================================================================== */ /* ====================================================================== 1. CARTES DE COORDONNEES (page Contact uniquement) Le degrade vert clair vers vert fonce ecrasait le texte. Une carte blanche laisse la couleur au seul pastille d icone, ce qui rend l adresse, le telephone et le courriel nettement plus lisibles. Le pied de page garde son propre traitement : il est sur fond sombre, une carte blanche y ferait tache. D ou le cadrage sur wp-page. ====================================================================== */ .aw-carte-contact .rs-contact-box .address-item, .aw-carte-contact .rs-contact-box .address-item.boxstyle1 { background-image: none !important; background-color: #FFFFFF !important; border: 1px solid var(--aw-bord, #E4E9E6) !important; border-radius: var(--aw-carte-r) !important; box-shadow: var(--aw-ombre-sm, 0 1px 2px rgba(16,24,40,.05)) !important; padding: 22px 24px !important; display: flex !important; align-items: center !important; gap: 16px !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .aw-carte-contact .rs-contact-box .address-item:hover { border-color: #BFD9CB !important; box-shadow: var(--aw-ombre-md, 0 4px 16px rgba(16,24,40,.07)) !important; transform: translateY(-2px); } .aw-carte-contact .rs-contact-box .address-item .address-icon { flex: 0 0 auto !important; width: 52px !important; height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--aw-vert-pale, #E8F4ED) !important; border-radius: 14px !important; margin: 0 !important; } .aw-carte-contact .rs-contact-box .address-item .address-icon svg, .aw-carte-contact .rs-contact-box .address-item .address-icon i, .aw-carte-contact .rs-contact-box .address-item .address-icon img { width: 26px !important; height: 26px !important; fill: var(--aw-vert, #3E9134) !important; color: var(--aw-vert, #3E9134) !important; } .aw-carte-contact .rs-contact-box .address-item .address-icon svg path { fill: var(--aw-vert, #3E9134) !important; } .aw-carte-contact .rs-contact-box .address-item .address-text { flex: 1 1 auto !important; min-width: 0 !important; } .aw-carte-contact .rs-contact-box .address-item .address-text .label { display: block !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--aw-gris, #6B7280) !important; margin-bottom: 4px !important; } .aw-carte-contact .rs-contact-box .address-item .address-text .des, .aw-carte-contact .rs-contact-box .address-item .address-text .des a { display: block !important; font-size: 15.5px !important; line-height: 1.45 !important; font-weight: 600 !important; color: var(--aw-encre, #161212) !important; word-break: break-word; } .aw-carte-contact .rs-contact-box .address-item .address-text .des a:hover { color: var(--aw-vert, #3E9134) !important; } .aw-carte-contact .rs-contact-box .address-item .des-right-icon { display: none !important; } @media (max-width: 1024px) { .aw-carte-contact .rs-contact-box .address-item { padding: 18px !important; gap: 14px !important; } .aw-carte-contact .rs-contact-box .address-item .address-icon { width: 46px !important; height: 46px !important; border-radius: 12px !important; } .aw-carte-contact .rs-contact-box .address-item .address-text .des { font-size: 15px !important; } } @media (max-width: 767px) { .aw-carte-contact .rs-contact-box .address-item { padding: 16px !important; gap: 12px !important; border-radius: var(--aw-r-sm, 14px) !important; } .aw-carte-contact .rs-contact-box .address-item .address-icon { width: 42px !important; height: 42px !important; } .aw-carte-contact .rs-contact-box .address-item .address-icon svg { width: 22px !important; height: 22px !important; } /* 11 px etait sous le plancher de lisibilite retenu pour le site. */ .aw-carte-contact .rs-contact-box .address-item .address-text .label { font-size: 12.5px !important; } .aw-carte-contact .rs-contact-box .address-item .address-text .des { font-size: 14.5px !important; } } /* Sur l accueil et dans le pied de page, l accent passe au rouge de la charte : c est le choix retenu apres essai, les icones blanches d origine etant invisibles sur le fond bleu clair de ces cartes. */ .elementor-element-929f4d0 .rs-contact-box .address-item .address-icon, .elementor-element-3013aad .rs-contact-box .address-item .address-icon, .elementor-element-9564921 .rs-contact-box .address-item .address-icon { background: #FCEAEA !important; } .elementor-element-929f4d0 .rs-contact-box .address-item .address-icon svg path, .elementor-element-3013aad .rs-contact-box .address-item .address-icon svg path, .elementor-element-9564921 .rs-contact-box .address-item .address-icon svg path, .elementor-element-929f4d0 .rs-contact-box .address-item .address-icon svg, .elementor-element-3013aad .rs-contact-box .address-item .address-icon svg, .elementor-element-9564921 .rs-contact-box .address-item .address-icon svg { fill: #E61A25 !important; color: #E61A25 !important; } .elementor-element-929f4d0 .rs-contact-box .address-item .address-text .des a:hover, .elementor-element-3013aad .rs-contact-box .address-item .address-text .des a:hover, .elementor-element-9564921 .rs-contact-box .address-item .address-text .des a:hover { color: #E61A25 !important; } /* ====================================================================== 2. PACKS TARIFAIRES — page Contact et espace membre Reprise complete apres essai. Trois defauts corriges : • Les puces etaient posees en absolu ; des que la ligne passait sur deux lignes, la coche se decalait par rapport au texte. La liste est maintenant en flex : la pastille est un vrai element de la ligne, donc elle ne peut plus glisser. • La coche etait dessinee avec deux bordures pivotees, invisible sur fond clair. C est desormais un trace SVG centre dans la pastille. • La typographie avait ete trop reduite et la hauteur egalisee creait un grand vide sous la liste. Les tailles remontent et chaque carte reprend la hauteur de son contenu. Les deux packs restent distingues par la couleur : Senegal en jaune, International en rouge. Contraste verifie : encre sur jaune 15,6:1 ; blanc sur rouge 5,4:1. ====================================================================== */ html body .rs-pricing-switcher .row { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; row-gap: 24px !important; } /* Les deux packs de la page Contact vivaient dans deux colonnes de largeurs differentes (593 px et 539 px). Elles se partagent maintenant la rangee a parts egales, en gardant chacune sa hauteur propre. */ html body .elementor-element-a3c3e25 { align-items: flex-start !important; } html body .elementor-element-a3c3e25 > .elementor-element, html body .elementor-element-a3c3e25 > .e-con { flex: 1 1 0 !important; width: auto !important; max-width: none !important; } /* Le gabarit genere deux cartes par pack — une « mensuelle » et une « annuelle » — destinees a un selecteur absent de ces pages. La carte annuelle affichait du contenu de demonstration en anglais ( « $49.00 Yearly » ) sous le vrai tarif. Elle est retiree. */ html body .rs-pricing-switcher .pricing-item.yearly { display: none !important; } html body .rs-pricing-switcher .pricing-item { display: block !important; height: auto !important; border: 0 !important; border-radius: 24px !important; box-shadow: var(--aw-ombre-md, 0 4px 16px rgba(16,24,40,.07)) !important; /* Mesure : le texte des lignes a coche arrivait a 30 px du bord pour un corps de 17 px et une premiere ligne deja sur deux lignes. On rend de l air lateral. */ padding: 36px 38px !important; text-align: left !important; transition: transform .22s ease, box-shadow .22s ease; } html body .rs-pricing-switcher .pricing-item:hover { transform: translateY(-4px); box-shadow: var(--aw-ombre-lg, 0 12px 32px rgba(16,24,40,.10)) !important; } /* Les bandeaux internes du gabarit decoupaient la carte en rectangles blancs successifs ; ils sont neutralises pour laisser une seule surface. */ html body .rs-pricing-switcher .pricing-item .title-wrapper, html body .rs-pricing-switcher .pricing-item .price-wrapper, html body .rs-pricing-switcher .pricing-item .pricing-feature { background: transparent !important; border: 0 !important; padding: 0 !important; text-align: left !important; } html body .rs-pricing-switcher .pricing-item .curve-corner, html body .rs-pricing-switcher .pricing-item .shape { display: none !important; } html body .rs-pricing-switcher .pricing-item .title-wrapper { margin: 0 0 10px !important; } html body .rs-pricing-switcher .pricing-item .title-wrapper .title, html body .rs-pricing-switcher .pricing-item h3.title { font-size: 25px !important; line-height: 1.22 !important; font-weight: 700 !important; letter-spacing: -.015em !important; margin: 0 !important; } /* Le prix et sa mention « par personne » forment une seule ligne calee a gauche. Le trait pointille sous le prix evoque la souche d un ticket, en rappel du billet qui figure sur le bouton. */ html body .rs-pricing-switcher .pricing-item .price-wrapper { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: flex-start !important; gap: 8px !important; margin: 0 0 22px !important; padding-bottom: 22px !important; } html body .rs-pricing-switcher .pricing-item .price-wrapper .price { font-size: 31px !important; line-height: 1.18 !important; font-weight: 800 !important; letter-spacing: -.02em !important; margin: 0 !important; text-align: left !important; } html body .rs-pricing-switcher .pricing-item .price-wrapper .plan-duration { font-size: 15px !important; line-height: 1.4 !important; font-weight: 500 !important; margin: 0 !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature .feature-title { font-size: 13px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin: 0 0 14px !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature > p { display: none !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* La liste est decoupee en plusieurs listes successives : sans cette regle, l ecart entre la derniere ligne d une liste et la premiere de la suivante restait a 12 px quand les autres passaient a 18. */ html body .rs-pricing-switcher .pricing-item .pricing-feature ul + ul { margin-top: 18px !important; } /* La ligne de liste est une rangee flex : pastille puis texte. La pastille ne peut plus se desaligner, meme quand le libelle passe sur deux lignes. */ html body .rs-pricing-switcher .pricing-item .pricing-feature ul li { display: flex !important; align-items: flex-start !important; gap: 12px !important; position: static !important; list-style: none !important; background: none !important; padding: 0 !important; /* 12 px entre deux lignes de 17 px : elles se touchaient presque. */ margin: 0 0 18px !important; font-size: 17px !important; line-height: 1.5 !important; font-weight: 500 !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature ul li:last-child { margin-bottom: 0 !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature ul li::before { content: "" !important; flex: 0 0 auto !important; position: static !important; width: 23px !important; height: 23px !important; border-radius: 50% !important; margin-top: calc((1.5em - 23px) / 2) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature ul li::after { content: none !important; display: none !important; } html body .rs-pricing-switcher .pricing-item .pricing-btn { margin: 26px 0 0 !important; } html body .rs-pricing-switcher .pricing-item .pricing-btn a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; padding: 15px 24px !important; border: 0 !important; border-radius: 999px !important; font-size: 16.5px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; transition: background .18s ease, transform .18s ease; } html body .rs-pricing-switcher .pricing-item .pricing-btn a:hover { transform: translateY(-1px); } html body .rs-pricing-switcher .pricing-item .pricing-btn a svg { width: 22px !important; height: 14px !important; flex: 0 0 auto !important; } /* --- Variante JAUNE : pack Senegal ------------------------------------ */ html body .elementor-element.elementor-element-38f4edc .pricing-item, html body .elementor-element.elementor-element-3d2a2765 .pricing-item, html body .elementor-element.elementor-element-4d4921a5 .pricing-item, html body .elementor-element.elementor-element-556b5a30 .pricing-item { background: var(--aw-jaune, #FFDE00) !important; } html body .elementor-element.elementor-element-38f4edc .pricing-item .title, html body .elementor-element.elementor-element-3d2a2765 .pricing-item .title, html body .elementor-element.elementor-element-4d4921a5 .pricing-item .title, html body .elementor-element.elementor-element-556b5a30 .pricing-item .title, html body .elementor-element.elementor-element-38f4edc .pricing-item .price, html body .elementor-element.elementor-element-3d2a2765 .pricing-item .price, html body .elementor-element.elementor-element-4d4921a5 .pricing-item .price, html body .elementor-element.elementor-element-556b5a30 .pricing-item .price, html body .elementor-element.elementor-element-38f4edc .pricing-item .pricing-feature ul li, html body .elementor-element.elementor-element-3d2a2765 .pricing-item .pricing-feature ul li, html body .elementor-element.elementor-element-4d4921a5 .pricing-item .pricing-feature ul li, html body .elementor-element.elementor-element-556b5a30 .pricing-item .pricing-feature ul li { color: var(--aw-encre, #161212) !important; } html body .elementor-element.elementor-element-38f4edc .pricing-item .plan-duration, html body .elementor-element.elementor-element-3d2a2765 .pricing-item .plan-duration, html body .elementor-element.elementor-element-4d4921a5 .pricing-item .plan-duration, html body .elementor-element.elementor-element-556b5a30 .pricing-item .plan-duration, html body .elementor-element.elementor-element-38f4edc .pricing-item .feature-title, html body .elementor-element.elementor-element-3d2a2765 .pricing-item .feature-title, html body .elementor-element.elementor-element-4d4921a5 .pricing-item .feature-title, html body .elementor-element.elementor-element-556b5a30 .pricing-item .feature-title { color: #4A4634 !important; } html body .elementor-element.elementor-element-38f4edc .pricing-item .price-wrapper, html body .elementor-element.elementor-element-3d2a2765 .pricing-item .price-wrapper, html body .elementor-element.elementor-element-4d4921a5 .pricing-item .price-wrapper, html body .elementor-element.elementor-element-556b5a30 .pricing-item .price-wrapper { border-bottom: 2px dashed rgba(22,18,18,.22) !important; } html body .elementor-element.elementor-element-38f4edc .pricing-item .pricing-feature ul li::before, html body .elementor-element.elementor-element-3d2a2765 .pricing-item .pricing-feature ul li::before, html body .elementor-element.elementor-element-4d4921a5 .pricing-item .pricing-feature ul li::before, html body .elementor-element.elementor-element-556b5a30 .pricing-item .pricing-feature ul li::before { background-color: rgba(22,18,18,.14) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161212' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l5 5L19.5 7'/%3E%3C/svg%3E") !important; } html body .elementor-element.elementor-element-38f4edc .pricing-btn a, html body .elementor-element.elementor-element-3d2a2765 .pricing-btn a, html body .elementor-element.elementor-element-4d4921a5 .pricing-btn a, html body .elementor-element.elementor-element-556b5a30 .pricing-btn a { background: var(--aw-vert, #3E9134) !important; color: #FFFFFF !important; fill: #FFFFFF !important; } html body .elementor-element.elementor-element-38f4edc .pricing-btn a svg path, html body .elementor-element.elementor-element-3d2a2765 .pricing-btn a svg path, html body .elementor-element.elementor-element-4d4921a5 .pricing-btn a svg path, html body .elementor-element.elementor-element-556b5a30 .pricing-btn a svg path { fill: #FFFFFF !important; } html body .elementor-element.elementor-element-38f4edc .pricing-btn a:hover, html body .elementor-element.elementor-element-3d2a2765 .pricing-btn a:hover, html body .elementor-element.elementor-element-4d4921a5 .pricing-btn a:hover, html body .elementor-element.elementor-element-556b5a30 .pricing-btn a:hover { background: var(--aw-vert-fonce, #2C6B27) !important; } /* --- Variante ROUGE : pack International ------------------------------- */ html body .elementor-element.elementor-element-ee478df .pricing-item, html body .elementor-element.elementor-element-aed48b8 .pricing-item, html body .elementor-element.elementor-element-36ab76c4 .pricing-item { background: #E61A25 !important; } html body .elementor-element.elementor-element-ee478df .pricing-item .title, html body .elementor-element.elementor-element-aed48b8 .pricing-item .title, html body .elementor-element.elementor-element-36ab76c4 .pricing-item .title, html body .elementor-element.elementor-element-ee478df .pricing-item .price, html body .elementor-element.elementor-element-aed48b8 .pricing-item .price, html body .elementor-element.elementor-element-36ab76c4 .pricing-item .price, html body .elementor-element.elementor-element-ee478df .pricing-item .pricing-feature ul li, html body .elementor-element.elementor-element-aed48b8 .pricing-item .pricing-feature ul li, html body .elementor-element.elementor-element-36ab76c4 .pricing-item .pricing-feature ul li { color: #FFFFFF !important; } html body .elementor-element.elementor-element-ee478df .pricing-item .plan-duration, html body .elementor-element.elementor-element-aed48b8 .pricing-item .plan-duration, html body .elementor-element.elementor-element-36ab76c4 .pricing-item .plan-duration, html body .elementor-element.elementor-element-ee478df .pricing-item .feature-title, html body .elementor-element.elementor-element-aed48b8 .pricing-item .feature-title, html body .elementor-element.elementor-element-36ab76c4 .pricing-item .feature-title { color: rgba(255,255,255,.88) !important; } html body .elementor-element.elementor-element-ee478df .pricing-item .price-wrapper, html body .elementor-element.elementor-element-aed48b8 .pricing-item .price-wrapper, html body .elementor-element.elementor-element-36ab76c4 .pricing-item .price-wrapper { border-bottom: 2px dashed rgba(255,255,255,.4) !important; } html body .elementor-element.elementor-element-ee478df .pricing-item .pricing-feature ul li::before, html body .elementor-element.elementor-element-aed48b8 .pricing-item .pricing-feature ul li::before, html body .elementor-element.elementor-element-36ab76c4 .pricing-item .pricing-feature ul li::before { background-color: #FFFFFF !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CE2424' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l5 5L19.5 7'/%3E%3C/svg%3E") !important; } html body .elementor-element.elementor-element-ee478df .pricing-btn a, html body .elementor-element.elementor-element-aed48b8 .pricing-btn a, html body .elementor-element.elementor-element-36ab76c4 .pricing-btn a { background: var(--aw-jaune, #FFDE00) !important; color: var(--aw-encre, #161212) !important; fill: var(--aw-encre, #161212) !important; } html body .elementor-element.elementor-element-ee478df .pricing-btn a svg path, html body .elementor-element.elementor-element-aed48b8 .pricing-btn a svg path, html body .elementor-element.elementor-element-36ab76c4 .pricing-btn a svg path { fill: #161212 !important; } html body .elementor-element.elementor-element-ee478df .pricing-btn a:hover, html body .elementor-element.elementor-element-aed48b8 .pricing-btn a:hover, html body .elementor-element.elementor-element-36ab76c4 .pricing-btn a:hover { background: #FFFFFF !important; } @media (max-width: 1024px) { html body .rs-pricing-switcher .pricing-item { padding: 28px 24px !important; border-radius: 20px !important; } html body .rs-pricing-switcher .pricing-item .title-wrapper .title, html body .rs-pricing-switcher .pricing-item h3.title { font-size: 23px !important; } html body .rs-pricing-switcher .pricing-item .price-wrapper .price { font-size: 28px !important; } html body .rs-pricing-switcher .pricing-item .price-wrapper .plan-duration { font-size: 14.5px !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature ul li { font-size: 16px !important; } html body .rs-pricing-switcher .pricing-item .pricing-btn a { font-size: 16px !important; } } @media (max-width: 767px) { html body .rs-pricing-switcher .pricing-item { padding: 24px 20px !important; border-radius: 18px !important; } html body .rs-pricing-switcher .pricing-item .title-wrapper .title, html body .rs-pricing-switcher .pricing-item h3.title { font-size: 21px !important; } html body .rs-pricing-switcher .pricing-item .price-wrapper { margin-bottom: 18px !important; padding-bottom: 18px !important; } html body .rs-pricing-switcher .pricing-item .price-wrapper .price { font-size: 26px !important; } html body .rs-pricing-switcher .pricing-item .price-wrapper .plan-duration { font-size: 14px !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature .feature-title { font-size: 13px !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature ul li { font-size: 15.5px !important; gap: 11px !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature ul li::before { width: 22px !important; height: 22px !important; background-size: 13px 13px !important; } html body .rs-pricing-switcher .pricing-item .pricing-btn a { font-size: 15px !important; padding: 14px 22px !important; } } /* ====================================================================== 3. FORMULAIRES — Contact Form 7, Formidable, Ultimate Member Les trois extensions dessinaient leurs champs differemment. Elles partagent maintenant le meme champ, le meme etat de focus et le meme bouton, pour que passer du formulaire de contact a celui du delegue ne donne pas l impression de changer de site. ====================================================================== */ .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="url"], .wpcf7-form input[type="number"], .wpcf7-form input[type="date"], .wpcf7-form textarea, .wpcf7-form select, .frm_forms input[type="text"], .frm_forms input[type="email"], .frm_forms input[type="tel"], .frm_forms input[type="url"], .frm_forms input[type="number"], .frm_forms input[type="date"], .frm_forms input[type="password"], .frm_forms textarea, .frm_forms select, .um input[type="text"], .um input[type="email"], .um input[type="tel"], .um input[type="number"], .um input[type="password"], .um textarea, .um select { width: 100% !important; box-sizing: border-box !important; background: #FFFFFF !important; border: 1px solid var(--aw-bord, #E4E9E6) !important; border-radius: var(--aw-champ-r) !important; padding: 12px 15px !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 400 !important; color: var(--aw-encre, #161212) !important; box-shadow: none !important; transition: border-color .18s ease, box-shadow .18s ease; } .wpcf7-form textarea, .frm_forms textarea, .um textarea { min-height: 140px !important; resize: vertical !important; } .wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus, .frm_forms input:focus, .frm_forms textarea:focus, .frm_forms select:focus, .um input:focus, .um textarea:focus, .um select:focus { border-color: var(--aw-vert, #3E9134) !important; box-shadow: var(--aw-focus) !important; outline: none !important; } .wpcf7-form input::placeholder, .frm_forms input::placeholder, .wpcf7-form textarea::placeholder, .frm_forms textarea::placeholder { color: #5F6C66 !important; opacity: 1 !important; } .wpcf7-form label, .frm_forms .frm_primary_label, .um .um-field-label label { display: block !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--aw-encre, #161212) !important; margin: 0 0 6px !important; } .frm_forms .frm_description, .um .um-field-error { font-size: 13px !important; line-height: 1.45 !important; } .frm_forms .frm_description { color: var(--aw-gris, #6B7280) !important; margin-top: 5px !important; } .wpcf7-form input[type="submit"], .wpcf7-form button[type="submit"], .frm_forms .frm_button_submit, .frm_forms input[type="submit"], .um .um-button, .um input[type="submit"].um-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--aw-vert, #3E9134) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important; padding: 14px 28px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; box-shadow: none !important; cursor: pointer; transition: background .18s ease, transform .18s ease; } .wpcf7-form input[type="submit"]:hover, .frm_forms .frm_button_submit:hover, .um .um-button:hover { background: var(--aw-vert-fonce, #2C6B27) !important; transform: translateY(-1px); } /* La carte qui contient le formulaire, identique a celle de Mon compte. */ .elementor-widget-rs-cf7 .elementor-widget-container, .elementor-widget-formidable .frm_forms { background: #FFFFFF; border: 1px solid var(--aw-bord, #E4E9E6); border-radius: var(--aw-carte-r); box-shadow: var(--aw-ombre-md, 0 4px 16px rgba(16,24,40,.07)); padding: 32px; box-sizing: border-box; } .frm_forms .frm_form_field { margin-bottom: 18px !important; } @media (max-width: 1024px) { .elementor-widget-rs-cf7 .elementor-widget-container, .elementor-widget-formidable .frm_forms { padding: 24px 20px; } } @media (max-width: 767px) { .elementor-widget-rs-cf7 .elementor-widget-container, .elementor-widget-formidable .frm_forms { padding: 20px 16px; border-radius: var(--aw-r-sm, 14px); } .wpcf7-form input[type="submit"], .frm_forms .frm_button_submit, .um .um-button { width: 100% !important; } } /* ====================================================================== 4. Titre d accueil du tableau de bord Sur telephone, « Cher participant(e), » se cassait en deux lignes serrees. Une taille fluide le garde sur une ligne des 360 px. ====================================================================== */ @media (max-width: 767px) { body.aw-espace-membre .e-n-tabs-content h2, body.aw-espace-membre .e-n-tabs-content h2.title { font-size: clamp(19px, 5.4vw, 24px) !important; line-height: 1.25 !important; overflow-wrap: break-word; } } /* --- 1a. Cartes centrees (style1) : icone au-dessus, tout au meme axe --- Ces cartes (Reveil spirituel, Unite des nations, Equipement des leaders) centrent leur texte. Il faut donc que l icone soit centree elle aussi, et surtout que le bloc de texte occupe toute la largeur de la carte : sinon le texte se centre sur l espace restant et chaque carte se decale d une valeur differente selon la largeur de son icone. C est ce qui faisait glisser "Unite des nations" de 30 px vers la droite. */ @media (max-width: 1024px) { .rs-addon-services.style1 .services-inner { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; padding-left: 16px !important; padding-right: 16px !important; } .rs-addon-services.style1 .services-inner > .media_wrap { position: static !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 auto 12px !important; flex: 0 0 auto !important; } .rs-addon-services.style1 .services-inner > .content_part { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .rs-addon-services.style1 .services-title, .rs-addon-services.style1 .services-title .title, .rs-addon-services.style1 .desc-text { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center !important; } } /* --- 1b. Cartes alignees a gauche (style7) : icone en colonne de gauche --- */ @media (max-width: 1024px) { .rs-addon-services.style7 .services-inner { display: flex !important; flex-direction: row !important; align-items: flex-start !important; column-gap: 16px !important; padding-top: 22px !important; } /* L icone quitte le positionnement absolu : elle devient une colonne a part entiere. */ .rs-addon-services.style7 .services-inner > .media_wrap { position: static !important; top: auto !important; left: auto !important; right: auto !important; flex: 0 0 auto !important; margin: 0 !important; } .rs-addon-services.style7 .services-inner > .content_part { flex: 1 1 auto !important; min-width: 0 !important; } /* Le decalage prevu pour contourner l icone absolue n a plus lieu d etre. */ .rs-addon-services.style7 .services-inner .services-title, .rs-addon-services.style7 .services-inner .services-title .title { padding-left: 0 !important; margin-left: 0 !important; } } /* --- 2. Bandeau d accueil : 20 px de respiration sous le menu --- On decale le bloc de texte plutot que le remplissage du conteneur : le fond photo du bandeau reste intact et l ajout vaut exactement 20 px sur tous les paliers, sans avoir a connaitre le remplissage propre a chacun. */ .elementor-element-27664382 { margin-top: 20px !important; } @media (max-width: 1024px) { .elementor-element-a3c3e25 { flex-direction: column !important; flex-wrap: wrap !important; align-items: center !important; row-gap: 28px !important; } .elementor-element-a3c3e25 > .e-con, .elementor-element-4d2188c, .elementor-element-c694d5b { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Le contenu interne des cartes ne doit pas non plus deborder. */ .elementor-element-a3c3e25 .e-con, .elementor-element-a3c3e25 .elementor-widget { min-width: 0 !important; max-width: 100% !important; } } /* 1. La colonne des coordonnees prend la largeur necessaire. */ [data-elementor-type="wp-post"] .elementor-element-7f0de28 { flex: 1 1 440px !important; /* Etape 50-58 : ce plancher de 430 px n etait borne par aucun palier. Sous 430 px de large -- tout telephone de 360 a 414 px -- il forcait la page a depasser la fenetre et faisait apparaitre un defilement horizontal. min() garde les 430 px quand la place existe, et rend la main sinon. */ min-width: min(430px, 100%) !important; width: auto !important; max-width: none !important; } [data-elementor-type="wp-post"] .elementor-element-2b68573, [data-elementor-type="wp-post"] .elementor-element-2f93e31, [data-elementor-type="wp-post"] .elementor-element-da90478 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; } [data-elementor-type="wp-post"] .elementor-element-da90478 .rs-contact-box, [data-elementor-type="wp-post"] .elementor-widget-rs-contact-box { width: 100% !important; max-width: 100% !important; } /* 2. Le courriel et les numeros tiennent chacun sur une seule ligne. */ [data-elementor-type="wp-post"] .rs-contact-box .address-item .address-text .des, [data-elementor-type="wp-post"] .rs-contact-box .address-item .address-text .des a { white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all !important; } /* 3. Un ecart franc entre les deux cartes, qui se touchaient. Les coordonnees ne sont pas deux widgets mais un seul, dont le champ repetable produit deux entrees : c est donc entre les .address-item qu il faut poser la marge, pas entre les widgets. */ [data-elementor-type="wp-post"] .rs-contact-box .address-item + .address-item { margin-top: 14px !important; } [data-elementor-type="wp-post"] .elementor-widget-rs-contact-box { margin-bottom: 14px !important; } [data-elementor-type="wp-post"] .elementor-widget-rs-contact-box:last-child { margin-bottom: 0 !important; } [data-elementor-type="wp-post"] .rs-contact-box .address-item { margin-bottom: 0 !important; } /* 4. Les trois colonnes demarrent a la meme hauteur. */ [data-elementor-type="wp-post"] .elementor-element-7f0de28, [data-elementor-type="wp-post"] .elementor-element-7f0de28 > .e-con, [data-elementor-type="wp-post"] .elementor-element-2b68573, [data-elementor-type="wp-post"] .elementor-element-2f93e31 { align-items: flex-start !important; padding-top: 0 !important; } [data-elementor-type="wp-post"] .elementor-element-da90478 { padding-top: 0 !important; } /* « Menu Principal » descendait de 33 px par rapport a « Coordonnées » : une marge haute de 16 px sur son bloc, ajoutee aux remplissages des conteneurs. Les deux en-tetes partent maintenant de la meme ligne. */ [data-elementor-type="wp-post"] .elementor-element-b6f3ea3 { margin-top: 0 !important; } [data-elementor-type="wp-post"] .elementor-element-439fe20 { padding-top: 0 !important; } /* --- Tablette et telephone -------------------------------------------- En colonne, la place ne manque plus : la contrainte de largeur minimale est levee pour eviter tout debordement horizontal, mais les valeurs restent sur une ligne. */ @media (max-width: 1024px) { [data-elementor-type="wp-post"] .elementor-element-7f0de28 { flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; } } @media (max-width: 767px) { [data-elementor-type="wp-post"] .rs-contact-box .address-item .address-text .des, [data-elementor-type="wp-post"] .rs-contact-box .address-item .address-text .des a { font-size: 14px !important; } [data-elementor-type="wp-post"] .elementor-widget-rs-contact-box { margin-bottom: 12px !important; } } /* DEMANDE : marges internes haut et bas equilibrees. MESURE : 34 px au-dessus du contenu du pied de page pour 8 px en dessous. html body .elementor-element-7f2c184 { padding-bottom: 34px !important; } /* Les blocs de premier niveau d une section heritent du cadre de la page : aucune marge laterale propre ne vient les decaler. */ [data-elementor-type="wp-page"] > .e-con > .e-con-inner > .e-con, [data-elementor-type="wp-page"] > .e-con > .e-con-inner > .elementor-widget, [data-elementor-type="wp-page"] > .e-con > .e-con > .e-con { margin-left: 0 !important; margin-right: 0 !important; } /* Un bloc de premier niveau ne depasse jamais la largeur de son cadre. */ [data-elementor-type="wp-page"] > .e-con > .e-con-inner > .e-con, [data-elementor-type="wp-page"] > .e-con > .e-con-inner > .elementor-widget { max-width: 100% !important; } /* ====================================================================== 1. PIED DE PAGE — espace au-dessus des libelles Mesure : le libelle « ADRESSE MAIL » portait une marge haute de 16 px a l interieur d une carte qui a deja 22 px de remplissage : 38 px avant le premier mot. La marge haute est supprimee. ====================================================================== */ [data-elementor-type="wp-post"] .rs-contact-box .address-item .address-text .label { margin-top: 0 !important; margin-bottom: 4px !important; } /* La carte etait reglee avec une marge basse negative de -7 px heritee du gabarit : combinee au remplissage reduit, la pastille de l icone (52 px) depassait du bord inferieur. Les marges negatives sont annulees et le remplissage vertical redonne a l icone la place qu il lui faut. */ /* Le remplissage d origine (22 / 24 px) est conserve : l avoir reduit a 18 px faisait sortir la pastille de l icone par le bas de la carte. Seule la marge haute du libelle, qui creait 38 px de vide avant le premier mot, est supprimee — c est le defaut signale. La geometrie interne de la carte n est pas touchee : le gabarit place l icone lui-meme, et le reprendre en flex la decentrait verticalement. */ [data-elementor-type="wp-post"] .rs-contact-box .address-item { padding: 22px 24px !important; } [data-elementor-type="wp-post"] .rs-contact-box .address-item + .address-item { margin-top: 14px !important; } /* L icone etait calee 42 px sous le haut de la carte pour 6 px en dessous : une marge haute posee par le gabarit. En l annulant, le centrage vertical deja demande par la carte s applique enfin. On ne touche a rien d autre : reprendre la geometrie complete en flex l avait decentree davantage. */ [data-elementor-type="wp-post"] .rs-contact-box .address-item .address-icon, body.aw-carte-contact .rs-contact-box .address-item .address-icon, .aw-carte-contact .rs-contact-box .address-item .address-icon { margin-top: 0 !important; margin-bottom: 0 !important; align-self: center !important; } /* ====================================================================== 2. PIED DE PAGE — centrage sur tablette et telephone Le titre « Menu Principal » etait centre alors que les entrees du menu restaient calees a gauche : deux axes differents dans la meme colonne. Tout est centre sur un seul axe. ====================================================================== */ @media (max-width: 1024px) { [data-elementor-type="wp-post"] .e-con, [data-elementor-type="wp-post"] .elementor-widget { text-align: center !important; } [data-elementor-type="wp-post"] .e-con { align-items: center !important; } /* Le menu du pied de page : entrees empilees et centrees. */ [data-elementor-type="wp-post"] .hfe-nav-menu, [data-elementor-type="wp-post"] .menu, [data-elementor-type="wp-post"] ul.hfe-nav-menu { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; } [data-elementor-type="wp-post"] .hfe-nav-menu li, [data-elementor-type="wp-post"] .menu li { width: 100% !important; text-align: center !important; } [data-elementor-type="wp-post"] .hfe-nav-menu li a, [data-elementor-type="wp-post"] .menu li a { justify-content: center !important; text-align: center !important; } /* Les cartes de coordonnees gardent leur lecture naturelle : icone a gauche, texte a droite. Les centrer casserait leur alignement. */ [data-elementor-type="wp-post"] .rs-contact-box .address-item { text-align: left !important; } [data-elementor-type="wp-post"] .rs-contact-box .address-item .address-text { text-align: left !important; } /* Le logo, la signature et les reseaux sociaux se centrent. */ [data-elementor-type="wp-post"] .elementor-widget-image img, [data-elementor-type="wp-post"] .elementor-widget-image-box img { margin-inline: auto !important; } [data-elementor-type="wp-post"] .elementor-widget-social-icons .elementor-social-icons-wrapper, [data-elementor-type="wp-post"] .elementor-widget-hfe-social-icons .elementor-social-icons-wrapper { justify-content: center !important; } } /* ====================================================================== 3. CARTES DE COORDONNEES DE L ACCUEIL — hauteurs et marges Mesure : les deux cartes n avaient ni la meme hauteur ni les memes marges, et la seconde touchait le bord de sa colonne. Elles partagent maintenant la meme hauteur et le meme cadre. ====================================================================== */ .elementor-element-929f4d0, .elementor-element-3013aad { display: flex !important; align-items: stretch !important; } .elementor-element-929f4d0 .rs-contact-box, .elementor-element-3013aad .rs-contact-box { width: 100% !important; display: flex !important; } /* La geometrie interne de ces cartes n est pas reprise : le gabarit place lui-meme l icone, et la passer en flex la decentrait verticalement. Seules la largeur et la marge haute du libelle sont normalisees. */ .elementor-element-929f4d0 .rs-contact-box .address-item, .elementor-element-3013aad .rs-contact-box .address-item { width: 100% !important; } .elementor-element-929f4d0 .rs-contact-box .address-item .address-text .label, .elementor-element-3013aad .rs-contact-box .address-item .address-text .label { margin-top: 0 !important; } /* ====================================================================== 4. PACKS — cadrage, centrage de l en-tete, equilibre des hauteurs Mesure : bord gauche a 70 px (conforme aux autres sections) mais bord droit a 80 px — 10 px d asymetrie. Hauteurs 443 et 530 px. Titre et prix cales a gauche alors qu ils doivent etre centres. ====================================================================== */ html body .elementor-element-a3c3e25 { align-items: stretch !important; } html body .elementor-element-4d2188c, html body .elementor-element-c694d5b, html body .elementor-element-ae7a3a1 { padding-left: 0 !important; padding-right: 0 !important; height: auto !important; align-items: stretch !important; } @media (min-width: 768px) { /* Hauteur commune, bouton ancre en bas : la difference de longueur des listes ne se lit plus comme un desequilibre. */ html body .rs-pricing-switcher, html body .rs-pricing-switcher .row, html body .rs-pricing-switcher .row > [class*="col-"], html body .elementor-widget-rs-pricing-switcher, html body .elementor-widget-rs-pricing-switcher > .elementor-widget-container { height: 100% !important; } html body .rs-pricing-switcher .pricing-item { display: flex !important; flex-direction: column !important; height: 100% !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature { flex: 1 1 auto !important; } html body .rs-pricing-switcher .pricing-item .pricing-btn { margin-top: auto !important; } } /* En-tete centre : nom du pack, prix et mention « par personne ». */ html body .rs-pricing-switcher .pricing-item .title-wrapper, html body .rs-pricing-switcher .pricing-item .title-wrapper .title, html body .rs-pricing-switcher .pricing-item h3.title { text-align: center !important; } html body .rs-pricing-switcher .pricing-item .price-wrapper { justify-content: center !important; text-align: center !important; } html body .rs-pricing-switcher .pricing-item .price-wrapper .price { text-align: center !important; } /* La liste reste alignee a gauche : c est une enumeration, elle se lit mieux sur un bord franc. */ html body .rs-pricing-switcher .pricing-item .pricing-feature, html body .rs-pricing-switcher .pricing-item .pricing-feature .feature-title, html body .rs-pricing-switcher .pricing-item .pricing-feature ul li { text-align: left !important; } /* La typographie de la liste occupe mieux la surface disponible. */ html body .rs-pricing-switcher .pricing-item .pricing-feature ul li { font-size: 18px !important; line-height: 1.5 !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature ul li::before { width: 24px !important; height: 24px !important; background-size: 15px 15px !important; margin-top: calc((1.5em - 24px) / 2) !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature .feature-title { font-size: 14px !important; } @media (max-width: 1024px) { html body .rs-pricing-switcher .pricing-item .pricing-feature ul li { font-size: 16.5px !important; } html body .rs-pricing-switcher .pricing-item .pricing-feature ul li::before { width: 22px !important; height: 22px !important; background-size: 14px 14px !important; margin-top: calc((1.5em - 22px) / 2) !important; } } @media (max-width: 767px) { html body .rs-pricing-switcher .pricing-item .pricing-feature ul li { font-size: 16px !important; } } /* ====================================================================== 5. MON COMPTE — en-tete d un bord a l autre Mesure : l en-tete gardait 32 px de remplissage lateral. Il n en a plus, conformement a la demande : seul le contenu reste encadre. ====================================================================== */ body.aw-espace-membre [data-elementor-type="wp-page"] > .elementor-element-a943824, body.aw-espace-membre [data-elementor-type="wp-page"] > .e-flexbox-base:first-child, body.aw-espace-membre [data-elementor-type="wp-page"] > .e-con:first-child { padding-inline: 0 !important; } /* ====================================================================== 6. MON COMPTE — hauteurs egales entre le menu et le contenu Le menu d onglets et le panneau de contenu forment deux colonnes : elles partent de la meme ligne et se terminent a la meme ligne. ====================================================================== */ @media (min-width: 1025px) { /* Le conteneur des onglets devient explicitement une rangee dont les deux colonnes s etirent : sans cela, la colonne de gauche gardait la hauteur de ses cinq boutons (322 px) face a un panneau de 396 px. */ body.aw-espace-membre .e-n-tabs { display: flex !important; flex-direction: row !important; align-items: stretch !important; } /* Le menu d onglets se deploie sur toute la hauteur du panneau : les cinq boutons se repartissent regulierement et le dernier se termine exactement sur la meme ligne que le bas de la carte de contenu. Mesure avant : 322 px a gauche contre 396 px a droite. */ body.aw-espace-membre .e-n-tabs-heading { display: flex !important; flex-direction: column !important; justify-content: space-between !important; } body.aw-espace-membre .e-n-tabs-heading, body.aw-espace-membre .e-n-tabs-content, body.aw-espace-membre .e-n-tabs-content > .e-con, body.aw-espace-membre .e-n-tabs-content > .e-con > .e-con-inner { height: 100% !important; align-self: stretch !important; box-sizing: border-box !important; } } /* ====================================================================== 7. LE « BOUTON PLAY » PARASITE SUR TELEPHONE Il ne s agissait pas d un lecteur video : c est l anneau de progression du defilement automatique du carrousel de la galerie ( .autoplay-progress ), un cercle avec un point au centre. Sur telephone il sortait de son carrousel et flottait au-dessus de la section « Participer », ou il ressemblait a un bouton de lecture. Il n apporte aucune information au visiteur : il est retire. ====================================================================== */ .autoplay-progress { display: none !important; }