.elementor-kit-6{--e-global-color-primary:#8B95EE;--e-global-color-secondary:#FDFFF2;--e-global-color-text:#1A000B;--e-global-color-accent:#EAFE07;--e-global-color-e798092:#C7D2FF;--e-global-typography-primary-font-family:"degular-display";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"degular-display";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"degular";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"degular";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );font-family:"degular", Sans-serif;font-weight:400;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-primary );color:var( --e-global-color-text );border-radius:20px 20px 20px 20px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-accent );border-radius:20px 20px 20px 20px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{font-family:"degular", Sans-serif;font-weight:400;}.elementor-kit-6 h1{font-family:"degular-display", Sans-serif;font-weight:700;}.elementor-kit-6 h2{color:var( --e-global-color-text );font-family:"degular-display", Sans-serif;font-weight:700;}.elementor-kit-6 h3{color:var( --e-global-color-text );font-family:"degular-display", Sans-serif;font-weight:700;}.elementor-kit-6 h4{color:var( --e-global-color-text );font-family:"degular-display", Sans-serif;font-weight:700;}.elementor-kit-6 h6{color:var( --e-global-color-text );font-family:"degular-display", Sans-serif;font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS */:root{ --pe-dark: #23291f; /* fond des pilules (thème par défaut) */ --pe-yellow: #e8fc0d; /* texte (thème par défaut) */ --pe-ring: #8993ec; /* anneau (thème par défaut) */ } /* ---- VARIANTE DE COULEUR ---- Ajoute la classe "pe-alt" À CÔTÉ de "pe-title" pour ce thème. Ex. dans Elementor, CSS Classes : pe-title pe-alt Pour créer d'autres variantes plus tard, duplique ce bloc en changeant juste le nom de classe et les 3 couleurs. */ .pe-alt{ --pe-dark: #C7D2FF; /* fond des pilules */ --pe-yellow: #1A000B; /* texte */ --pe-ring: #FDFFF2; /* anneau du cercle */ } /* ---- VARIANTE 2 : anneau violet ---- */ .pe-alt2{ --pe-dark: #FDFFF2; /* fond des pilules */ --pe-yellow: #1A000B; /* texte */ --pe-ring: #8B95EE; /* anneau du cercle */ } /* ---- VARIANTE 3 : anneau bleu clair ---- */ .pe-alt3{ --pe-dark: #FDFFF2; /* fond des pilules */ --pe-yellow: #1A000B; /* texte */ --pe-ring: #C7D2FF; /* anneau du cercle */ } /* Double sélecteur : fonctionne que la classe soit posée sur le

(widget HTML) ou sur le conteneur du widget (widget Titre d'Elementor) */ h2.pe-title, .pe-title .elementor-heading-title{ /* ---- CE QUE TU TOUCHERAS ---- */ --pe-fs: clamp(26px, 5.2vw, 62px); /* taille du titre */ --pe-tilt-1: -0.95deg; /* inclinaison lignes 1, 3, 5… */ --pe-tilt-2: 1.75deg; /* inclinaison lignes 2, 4, 6… */ --pe-nudge: 0em; /* + = texte plus bas dans la pilule */ /* ---- GÉOMÉTRIE RELEVÉE SUR LA MAQUETTE — ne pas bouger ---- */ --pe-pill-h: 1.219em; /* hauteur pilule 75.32 / 61.79 */ --pe-overlap: 0.179em; /* chevauchement à gauche 11.07 / 61.79 */ --pe-circle: 1.842em; /* Ø du rond 113.84 / 61.79 */ --pe-ring-w: 0.091em; /* anneau 5.64 / 61.79 */ --pe-indent: 1.549em; /* retrait gauche 95.7 / 61.79 */ --pe-pad-x: 0.5em; /* texte ↔ bord pilule, identique à G et à D */ --pe-circle-y: 50%; position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding-left: var(--pe-indent); font-family: "degular-display", "Degular Display", sans-serif; font-weight: 900; font-size: var(--pe-fs); text-transform: uppercase; font-kerning: normal; } /* Le rond, devant tout le reste */ h2.pe-title::before, .pe-title .elementor-heading-title::before{ content: ""; position: absolute; left: 0; top: var(--pe-circle-y); transform: translateY(-50%); width: var(--pe-circle); height: var(--pe-circle); box-sizing: border-box; border-radius: 50%; background: var(--pe-dark); border: var(--pe-ring-w) solid var(--pe-ring); z-index: 10; } /* Une ligne = une pilule */ .pe-title span{ display: inline-block; position: relative; white-space: nowrap; /* jamais de retour à la ligne */ /* hauteur totale = --pe-pill-h quelle que soit la valeur de --pe-nudge */ line-height: calc(var(--pe-pill-h) - 0.2em); padding: calc(0.1em + var(--pe-nudge)) var(--pe-pad-x) calc(0.1em - var(--pe-nudge)); background: var(--pe-dark); color: var(--pe-yellow); border-radius: 999px; transform: rotate(var(--pe-tilt-1)); transform-origin: left center; } .pe-title span:nth-child(even){ transform: rotate(var(--pe-tilt-2)); } /* Les pilules se chevauchent à gauche, puis divergent vers la droite */ .pe-title span + span{ margin-top: calc(var(--pe-overlap) * -1); } /* La ligne du haut passe devant celle du bas (ordre du SVG) */ .pe-title span:nth-child(1){ z-index: 3; } .pe-title span:nth-child(2){ z-index: 2; } .pe-title span:nth-child(n+3){ z-index: 1; } /* Sur mobile : le rond RESTE visible, juste réduit proportionnellement. (Avant, il était masqué par display:none — c'était le défaut à corriger.) */ @media (max-width: 600px){ h2.pe-title, .pe-title .elementor-heading-title{ --pe-circle: 1.5em; /* rond plus petit qu'en desktop (1.842em) */ --pe-indent: 1.25em; /* retrait ajusté au nouveau diamètre */ } } /* ═══════════════════════════════════════════════════════════════ TITRE SIMPLE (balise H3) — classe "pe-tag" 1 disque plein + 1 pilule droite accolés, couleurs du SVG. ═══════════════════════════════════════════════════════════════ */ h3.pe-tag, .pe-tag .elementor-heading-title{ /* ---- CE QUE TU TOUCHERAS ---- */ --pe-fs: clamp(20px, 3.4vw, 40px); /* taille du titre */ /* ---- COULEURS (celles du SVG) ---- */ --pt-bg: #fdfff2; /* fond disque + pilule */ --pt-text: #1a000b; /* texte */ /* ---- GÉOMÉTRIE RELEVÉE SUR LE SVG — ne pas bouger ---- */ --pt-h: 1.195em; /* hauteur pilule = Ø disque = 68.51 / 57.32 */ --pt-pad: 0.42em; /* texte ↔ bord pilule = 24.33 / 57.32, à G et à D */ --pt-overlap: 0em; /* recouvrement disque/pilule. 0 = fidèle au SVG. mets ~0.15em si le petit creux entre les 2 te gêne */ --pt-nudge: 0em; /* + = texte plus bas dans la pilule */ display: inline-flex; align-items: center; margin: 0; font-family: "degular-display", "Degular Display", sans-serif; font-weight: 800; font-size: var(--pe-fs); text-transform: uppercase; font-kerning: normal; } /* Le disque plein — passe DEVANT la pilule */ h3.pe-tag::before, .pe-tag .elementor-heading-title::before{ content: ""; position: relative; z-index: 2; flex: 0 0 auto; width: var(--pt-h); height: var(--pt-h); border-radius: 50%; background: var(--pt-bg); } /* La pilule contenant le texte — accolée au disque */ h3.pe-tag span, .pe-tag .elementor-heading-title span{ display: inline-block; position: relative; z-index: 1; margin-left: calc(var(--pt-overlap) * -1); /* 0 = tangent, comme le SVG */ white-space: nowrap; line-height: calc(var(--pt-h) - 0.2em); padding: calc(0.1em + var(--pt-nudge)) var(--pt-pad) calc(0.1em - var(--pt-nudge)) calc(var(--pt-pad) + var(--pt-overlap)); /* texte non décalé */ background: var(--pt-bg); color: var(--pt-text); border-radius: 999px; }/* End custom CSS */