/* ======================================
RÈGLE GLOBALE ICÔNES (si SVG inline)
====================================== */
svg.icon,
.icon svg {
fill: currentColor;
stroke: currentColor;
}
/* ======================================
ACCESSIBILITY OVERRIDES
====================================== */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
outline: 3px solid var(--wp--preset--color--primary) !important;
outline-offset: 2px;
}
.form-input:focus-visible,
.form-select:focus-visible,
.newsletter-form input[type="email"]:focus-visible,
.blog-search-input:focus-visible,
.blog-filter-select:focus-visible,
.elearning-filters__search-input:focus-visible,
.blog-search-button:focus-visible,
.blog-filter-reset:focus-visible,
.burger:focus-visible,
.btn-login:focus-visible,
.social-icon:focus-visible {
box-shadow: 0 0 0 3px rgb(210 20 82 / 0.35) !important;
outline: none !important;
}
input[type="checkbox"]:focus-visible {
outline: 2px solid var(--wp--preset--color--primary) !important;
outline-offset: 2px;
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary>.wp-block-button__link:hover {
color: var(--wp--preset--color--primary-hover) !important;
}
.wp-block-button.is-style-secondary .wp-block-button__link:active,
.wp-block-button.is-style-secondary>.wp-block-button__link:active {
color: var(--wp--preset--color--primary-actif) !important;
}
/* ======================================
LEGAL PAGES
====================================== */
.legal-main {
background: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--base);
padding-bottom: var(--wp--preset--spacing--2xl);
}
.legal-hero {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
}
.legal-hero__inner,
.legal-toc__inner,
.legal-content__inner {
max-width: 75rem;
margin: 0 auto;
}
.legal-hero__title {
margin: 0;
color: var(--wp--preset--color--base);
}
.legal-toc {
padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}
.legal-toc__title {
margin: 0 0 var(--wp--preset--spacing--sm);
color: var(--wp--preset--color--base);
}
.legal-toc__list {
margin: 0;
padding-left: 1.2rem;
}
.legal-toc__list li {
margin-bottom: var(--wp--preset--spacing--xs);
}
.legal-content {
padding: 0 var(--wp--preset--spacing--md);
}
.legal-section {
border-top: 1px solid rgb(26 33 49 / 0.12);
padding: var(--wp--preset--spacing--lg) 0;
}
.legal-section__title {
color: var(--wp--preset--color--base);
margin-top: 0;
}
.legal-section__body {
color: var(--wp--preset--color--base);
}
.legal-section__body p,
.legal-section__body li {
color: var(--wp--preset--color--base);
}
.legal-section__body ul {
margin: 0 0 var(--wp--preset--spacing--md);
padding-left: 1.2rem;
}
.ak-cookie-link-button {
background: none;
border: none;
color: var(--wp--preset--color--primary);
font: inherit;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
padding: 0;
}
/* ======================================
COOKIE CONSENT
====================================== */
.ak-cookie-banner {
position: fixed;
right: var(--wp--preset--spacing--md);
bottom: var(--wp--preset--spacing--md);
z-index: 3000;
width: min(32rem, calc(100vw - (var(--wp--preset--spacing--md) * 2)));
background: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--base);
box-shadow: var(--wp--preset--shadow--medium);
padding: var(--wp--preset--spacing--md);
}
.ak-cookie-banner__title {
margin: 0 0 var(--wp--preset--spacing--xs);
color: var(--wp--preset--color--base);
}
.ak-cookie-banner__text {
margin: 0 0 var(--wp--preset--spacing--md);
color: var(--wp--preset--color--base);
}
.ak-cookie-banner__actions,
.ak-cookie-panel__actions {
display: flex;
gap: var(--wp--preset--spacing--xs);
flex-wrap: wrap;
}
.ak-cookie-btn {
border-radius: var(--wp--custom--radius--large);
border: 1px solid transparent;
padding: 0.45rem 0.9rem;
cursor: pointer;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: 1.25;
}
.ak-cookie-btn--primary {
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
}
.ak-cookie-btn--secondary {
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--base-invert);
}
.ak-cookie-btn--ghost {
background: transparent;
border-color: var(--wp--preset--color--base-secondary);
color: var(--wp--preset--color--base);
}
.ak-cookie-overlay {
position: fixed;
inset: 0;
background: rgb(0 0 0 / 0.55);
z-index: 3090;
}
.ak-cookie-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(38rem, calc(100vw - (var(--wp--preset--spacing--md) * 2)));
background: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--base);
box-shadow: var(--wp--preset--shadow--medium);
z-index: 3100;
padding: var(--wp--preset--spacing--md);
}
.ak-cookie-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--wp--preset--spacing--sm);
}
.ak-cookie-panel__title {
margin: 0;
color: var(--wp--preset--color--base);
}
.ak-cookie-panel__close {
border: 0;
background: transparent;
color: var(--wp--preset--color--base);
cursor: pointer;
padding: 0.25rem;
text-decoration: underline;
}
.ak-cookie-panel__body {
margin: var(--wp--preset--spacing--md) 0;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--sm);
}
.ak-cookie-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--md);
padding: var(--wp--preset--spacing--xs) 0;
}
.ak-cookie-option__label {
color: var(--wp--preset--color--base);
}
body.ak-cookie-open {
overflow: hidden;
}
@media (max-width: 767px) {
.ak-cookie-banner {
right: var(--wp--preset--spacing--sm);
left: var(--wp--preset--spacing--sm);
width: auto;
bottom: var(--wp--preset--spacing--sm);
}
.ak-cookie-panel {
width: calc(100vw - (var(--wp--preset--spacing--sm) * 2));
}
}
/* Global heading policy: force all H2 titles to uppercase. */
h2 {
text-transform: uppercase !important;
}
/* FIX: Global Mobile Overflow Protection */
html,
body {
overflow-x: hidden;
max-width: 100vw;
}
:root {
--wp--preset--font-size--h1: clamp(1.875rem, 4vw, 3.125rem);
--wp--preset--font-size--h2: clamp(1.5rem, 2vw, 1.75rem);
}
/* FIX: Remove default top margin on the first block (Hero) caused by blockGap */
#wp--skip-link--target,
:where(.wp-site-blocks)>*:first-child,
.home-hero {
margin-block-start: 0 !important;
margin-top: 0 !important;
}
/* Neutralize body-level whitespace line box before main on custom front-page output. */
main.wp-block-group.home-page {
margin-block-start: calc(-1 * var(--wp--custom--line-height--text--base)) !important;
margin-top: calc(-1 * var(--wp--custom--line-height--text--base)) !important;
}
/* ======================================
BOUTONS PRIMARY
====================================== */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.is-style-primary>.wp-block-button__link {
background-color: var(--wp--preset--color--primary) !important;
color: var(--wp--preset--color--base-invert) !important;
border-radius: var(--wp--custom--radius--large) !important;
border: none !important;
transition: background-color 0.2s ease;
}
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.is-style-primary>.wp-block-button__link:hover {
background-color: var(--wp--preset--color--primary-hover) !important;
}
.wp-block-button.is-style-primary .wp-block-button__link:active,
.wp-block-button.is-style-primary>.wp-block-button__link:active {
background-color: var(--wp--preset--color--primary-actif) !important;
}
/* État disabled */
.wp-block-button.is-style-primary .wp-block-button__link[disabled],
.wp-block-button.is-style-primary .wp-block-button__link.is-disabled,
.wp-block-button.is-style-primary.is-disabled .wp-block-button__link,
.wp-block-button.is-style-primary.is-disabled>.wp-block-button__link {
background-color: var(--wp--preset--color--tertiary) !important;
color: var(--wp--preset--color--base-invert) !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* ======================================
BOUTONS SECONDARY
====================================== */
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-secondary>.wp-block-button__link {
background-color: var(--wp--preset--color--base-invert) !important;
color: var(--wp--preset--color--primary) !important;
border: 1px solid var(--wp--preset--color--primary) !important;
border-radius: var(--wp--custom--radius--large) !important;
transition: background-color 0.2s ease;
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary>.wp-block-button__link:hover {
background-color: var(--wp--preset--color--secondary-hover) !important;
}
.wp-block-button.is-style-secondary .wp-block-button__link:active,
.wp-block-button.is-style-secondary>.wp-block-button__link:active {
background-color: var(--wp--preset--color--secondary-actif) !important;
}
/* État disabled */
.wp-block-button.is-style-secondary .wp-block-button__link[disabled],
.wp-block-button.is-style-secondary .wp-block-button__link.is-disabled,
.wp-block-button.is-style-secondary.is-disabled .wp-block-button__link,
.wp-block-button.is-style-secondary.is-disabled>.wp-block-button__link {
background-color: var(--wp--preset--color--surface-secondary) !important;
color: var(--wp--preset--color--tertiary) !important;
border-color: var(--wp--preset--color--tertiary) !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* ======================================
NAV LINKS (dot + current + hover)
Header/Dark background variant
====================================== */
.wp-block-navigation .wp-block-navigation-item__content {
position: relative;
color: inherit;
text-decoration: none;
padding-bottom: var(--wp--preset--spacing--2xs);
/* Reduced padding to dot */
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
transition: color 0.2s ease;
display: inline-flex;
align-items: center;
/* Align text and chevron vertically */
}
/* Hover → keep inherited color (white), just show dot */
.wp-block-navigation .wp-block-navigation-item__content:hover {
color: inherit;
}
/* Active/Current → primary color (Pink) */
.wp-block-navigation .current-menu-item>.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.is-current>.wp-block-navigation-item__content {
color: var(--wp--preset--color--primary) !important;
}
/* Dot (visible on current AND hover) */
.wp-block-navigation .wp-block-navigation-item__content::after {
content: "";
position: absolute;
left: 50%;
bottom: -10px;
/* Position under content */
width: 8px;
height: 8px;
transform: translateX(-50%) scale(0);
border-radius: 999px;
background: var(--wp--preset--color--primary);
transition: transform 0.2s ease;
}
/* Dot visible on hover OR active */
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item>.wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item.is-current>.wp-block-navigation-item__content::after {
transform: translateX(-50%) scale(1);
}
/* ======================================
NAV LINKS WITH CHEVRON (submenu parents)
====================================== */
.wp-block-navigation .has-child>.wp-block-navigation-item__content {
display: inline-flex !important;
/* Force flex to use order */
align-items: center;
gap: 0;
/* Gap handled by margin on chevron */
}
/* Keep native toggle visible/clickable when submenus open on click */
.wp-block-navigation .wp-block-navigation__submenu-icon {
display: none !important;
}
/* Improve click target for submenu toggle */
.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
padding: 0 0 0 6px !important;
min-width: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Custom chevron arrow icon using ::before (placed AFTER text via order) */
.wp-block-navigation .has-child>.wp-block-navigation-item__content::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-left: 6px;
order: 2;
/* Force visual position AFTER text */
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
transform: rotate(90deg);
transition: transform 0.2s ease;
}
/* Chevron rotates when submenu is open */
.wp-block-navigation .has-child.is-menu-open>.wp-block-navigation-item__content::before,
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"]+.wp-block-navigation-item__content::before {
transform: rotate(-90deg);
}
/* ======================================
NAV LINKS SUBMENU (light background)
====================================== */
/* Header submenu surface: enforce a single visual layer over core defaults. */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
background-color: var(--wp--preset--color--surface-invert);
border-radius: var(--wp--custom--radius--base);
padding: var(--wp--preset--spacing--xs) 0;
box-shadow: var(--wp--preset--shadow--soft);
border: 1px solid var(--wp--preset--color--base-secondary);
}
/* Prevent inherited LI backgrounds from creating a second square layer. */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container>.wp-block-navigation-item {
background-color: transparent !important;
}
.wp-block-navigation .has-child.is-menu-open > .wp-block-navigation__submenu-container {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Desktop fallback: keep submenu working on hover even if JS state is not set yet. */
@media (min-width: 783px) {
.site-header .desktop-only .wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.site-header .desktop-only .wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content::before {
transform: rotate(-90deg);
}
}
/* Default state: #1A2131 (base color) */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: var(--wp--preset--color--base) !important;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
}
/* Hover state: #D21452 (primary) */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--primary) !important;
background-color: transparent !important;
/* Ensure no bg change on hover */
}
/* Active state: #9E0336 (primary-actif) */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
.wp-block-navigation__submenu-container .current-menu-item>.wp-block-navigation-item__content {
color: var(--wp--preset--color--primary-actif) !important;
}
/* No dot in submenu */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
display: none !important;
}
/* No chevron in submenu items (unless they have children, handled above) */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
display: none;
}
/* ======================================
BOUTONS AVEC ICÔNE EXTERNE
====================================== */
.wp-block-button.has-external-icon .wp-block-button__link,
.wp-block-button.is-style-primary.has-external-icon .wp-block-button__link,
.wp-block-button.is-style-secondary.has-external-icon .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--xs);
}
.wp-block-button.has-external-icon .wp-block-button__link::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url('../icons/ic_lien_externe.svg') no-repeat center / contain;
mask: url('../icons/ic_lien_externe.svg') no-repeat center / contain;
}
/* ======================================
LIEN TERTIAIRE (underline + option icône)
Usage:
====================================== */
.is-link-tertiary {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base);
text-decoration-line: underline;
text-decoration-color: var(--wp--preset--color--primary);
text-underline-offset: 0.2em;
}
.is-link-tertiary:hover {
color: var(--wp--preset--color--primary-hover);
text-decoration-color: var(--wp--preset--color--primary-hover);
}
.is-link-tertiary:active {
color: var(--wp--preset--color--primary-actif);
text-decoration-color: var(--wp--preset--color--primary-actif);
}
.is-link-tertiary.has-external-icon::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-left: var(--wp--preset--spacing--xs);
background-color: currentColor;
-webkit-mask: url('../icons/ic_lien_externe.svg') no-repeat center / contain;
mask: url('../icons/ic_lien_externe.svg') no-repeat center / contain;
}
/* ======================================
LIEN CLASSIQUE (Icone flèche gauche + Texte)
Usage: Découvrir le cours
====================================== */
.link-classic {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--xs);
/* 6px requested, using xs (8px) or we can calc */
text-decoration: none;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: 1.5;
color: var(--wp--preset--color--primary);
transition: color 0.2s ease, gap 0.2s ease;
}
/* Arrow Icon (Pseudo-element ::before) */
.link-classic::before {
content: "";
display: inline-block;
width: 8.8px;
height: 6px;
/* Approx from 5.07px */
background-color: currentColor;
/* Using ic_arrow.svg rotated */
-webkit-mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
transform: rotate(90deg);
/* Points right? Check original SVG orientation. Assuming down originally like accordions */
}
/* Hover State */
.link-classic:hover {
color: var(--wp--preset--color--primary-hover);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
/* Gap increses to 10px in user Figma frame, but keeping stable for smooth UI usually better.
User CSS said 'gap: 10px' on hover frame. */
gap: 10px;
}
/* ======================================
ACCORDÉON (core/details)
Icône unique: /assets/icons/ic_arrow.svg
====================================== */
.wp-block-details {
background: var(--wp--preset--color--base-invert);
border: 1px solid var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--base);
overflow: hidden;
margin-bottom: var(--wp--preset--spacing--md);
transition: background-color 0.2s ease;
}
.wp-block-details>summary {
cursor: pointer;
padding: 16px var(--wp--preset--spacing--md);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--sm);
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--large);
font-weight: var(--wp--custom--font-weight--bold);
line-height: 28px;
color: var(--wp--preset--color--base);
transition: background-color 0.2s ease;
}
.wp-block-details>summary::-webkit-details-marker {
display: none;
}
/* Hover state: #E6F0FF = tertiary-hover */
.wp-block-details>summary:hover,
.wp-block-details:hover>summary {
background-color: var(--wp--preset--color--tertiary-hover);
}
/* Icon styling */
.wp-block-details>summary::after {
content: "";
width: 14px;
height: 14px;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
/* Default rotation: pointing DOWN (0deg if icon points down, visually adjusted) */
transform: rotate(-90deg);
transition: transform 0.2s ease;
}
/* Open state: Icon rotation (UP) */
.wp-block-details[open]>summary::after {
transform: rotate(90deg);
/* Rotates to point up */
}
/* Content styling - REMOVED aggressive typography reset so Headings keep their style */
.wp-block-details> :not(summary) {
padding: 0;
margin-top: 0;
margin-bottom: 0;
/* Color defaults to base-secondary but can be overridden */
color: var(--wp--preset--color--base-secondary);
}
/* ======================================
ACCORDION (Custom)
====================================== */
.accordion {
background-color: var(--wp--preset--color--base-invert);
border: 1px solid var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--base);
overflow: hidden;
margin-bottom: var(--wp--preset--spacing--md);
transition: background-color 0.2s ease;
}
.accordion__header {
cursor: pointer;
padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--md);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--sm);
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--large);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--text--large);
/* 28px */
color: var(--wp--preset--color--base);
min-height: 60px;
box-sizing: border-box;
margin: 0;
}
.accordion__header::-webkit-details-marker {
display: none;
}
/* Hover state - appliqué sur le conteneur details */
.accordion:hover {
background-color: var(--wp--preset--color--tertiary-hover);
/* #E6F0FF */
}
/* Icon chevron */
.accordion__header::after {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
transform: rotate(-90deg);
/* Points down */
transition: transform 0.2s ease;
}
/* Open state: chevron rotation */
.accordion[open] .accordion__header::after {
transform: rotate(90deg);
/* Points up */
}
.accordion__content {
padding: 0 40px var(--wp--preset--spacing--md) 40px;
}
.accordion__content p {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-secondary);
margin: 0;
}
.accordion__content a {
color: var(--wp--preset--color--primary);
text-decoration: underline;
font-weight: var(--wp--custom--font-weight--bold);
}
.accordion__content a:hover {
color: var(--wp--preset--color--primary-hover);
}
/* Responsive */
@media screen and (max-width: 767px) {
.accordion__header {
font-size: var(--wp--preset--font-size--medium);
min-height: 50px;
}
.accordion__content {
padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
}
}
/* ======================================
UI KIT SECTION VARIANTS (UI Kit Pattern Only)
Default: Base (Dark)
====================================== */
.wp-block-details.uikit-section {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--base-invert);
border-color: var(--wp--preset--color--base-secondary);
}
/* Summary text color for dark mode */
.wp-block-details.uikit-section>summary {
color: var(--wp--preset--color--base-invert);
}
/* Hover effect for dark mode summary */
.wp-block-details.uikit-section>summary:hover,
.wp-block-details.uikit-section:hover>summary {
background-color: var(--wp--custom--effects--overlay--white-05);
}
/* Content text color inheritance for dark mode */
.wp-block-details.uikit-section> :not(summary) {
color: inherit;
/* inherit base-invert */
}
/* Ensure Headings inherit color (override potentially specific theme.json black) */
.wp-block-details.uikit-section h1,
.wp-block-details.uikit-section h2,
.wp-block-details.uikit-section h3,
.wp-block-details.uikit-section h4,
.wp-block-details.uikit-section h5,
.wp-block-details.uikit-section h6,
.wp-block-details.uikit-section .wp-block-heading {
color: inherit;
}
/* Paragraphs in dark mode sections */
.wp-block-details.uikit-section>p:not(summary) {
color: var(--wp--preset--color--surface-secondary);
/* Slightly lighter text for readability */
}
/* --- Variant: Surface Secondary (Light Blue) --- */
.wp-block-details.uikit-section.is-style-surface-secondary {
background-color: var(--wp--preset--color--surface-secondary);
color: var(--wp--preset--color--base);
border-color: var(--wp--preset--color--tertiary);
}
.wp-block-details.uikit-section.is-style-surface-secondary>summary {
color: var(--wp--preset--color--base);
}
.wp-block-details.uikit-section.is-style-surface-secondary>summary:hover,
.wp-block-details.uikit-section.is-style-surface-secondary:hover>summary {
background-color: var(--wp--custom--effects--overlay--black-05);
}
.wp-block-details.uikit-section.is-style-surface-secondary> :not(summary),
.wp-block-details.uikit-section.is-style-surface-secondary>p:not(summary) {
color: var(--wp--preset--color--base-secondary);
}
/* --- Variant: White (Standard) --- */
.wp-block-details.uikit-section.is-style-white {
background-color: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--base);
border-color: var(--wp--preset--color--base-secondary);
}
.wp-block-details.uikit-section.is-style-white>summary {
color: var(--wp--preset--color--base);
}
.wp-block-details.uikit-section.is-style-white>summary:hover,
.wp-block-details.uikit-section.is-style-white:hover>summary {
background-color: var(--wp--preset--color--tertiary-hover);
}
.wp-block-details.uikit-section.is-style-white> :not(summary),
.wp-block-details.uikit-section.is-style-white>p:not(summary) {
color: var(--wp--preset--color--base-secondary);
}
/* ======================================
QUERY PAGINATION (numbers + current)
====================================== */
.wp-block-query-pagination-numbers .page-numbers {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
color: inherit;
text-decoration: none;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.wp-block-query-pagination-numbers .page-numbers.current {
font-weight: var(--wp--custom--font-weight--semibold);
border-bottom-color: currentColor;
}
/* ======================================
HEADER LAYOUT
====================================== */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2100;
overflow: visible;
transition: all 0.3s ease, top 0.3s ease;
/* transition top for admin bar reveal if any */
}
/* Admin Bar compatibility: Offset fixed elements */
.admin-bar .site-header {
top: 32px;
}
.admin-bar .mobile-menu-drawer {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .site-header,
.admin-bar .mobile-menu-drawer {
top: 46px;
}
}
.site-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--md);
overflow: visible;
background-color: transparent;
/* Transparent by default */
transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Desktop submenu safety: avoid clipping */
@media (min-width: 1025px) {
.site-header .wp-block-navigation,
.site-header .wp-block-navigation__container,
.site-header .wp-block-navigation-item {
overflow: visible;
}
}
/* Scrolled state: Solid background and subtle border */
.site-header.is-scrolled .site-header-inner {
background-color: var(--wp--preset--color--base);
border-bottom-color: var(--wp--custom--effects--overlay--white-10);
}
/* Force solid background for elearning archive page */
.elearning-archive-page .site-header-inner {
background-color: var(--wp--preset--color--base);
border-bottom-color: var(--wp--custom--effects--overlay--white-10);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--md);
}
/* Fallback styles for shortcode-rendered header buttons when core/button base styles are not enqueued */
.site-header .header-actions .wp-block-button,
.mobile-menu-body .wp-block-button {
height: 40px;
}
.site-header .header-actions .wp-block-button__link,
.mobile-menu-body .wp-block-button__link {
align-content: center;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 100%;
text-align: center;
word-break: break-word;
text-decoration: none;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
}
.site-header .header-actions .wp-block-button.is-full-width .wp-block-button__link,
.mobile-menu-body .wp-block-button.is-full-width .wp-block-button__link {
width: 100%;
justify-content: center;
}
/* ======================================
BURGER TOGGLE (Morphing Animation)
====================================== */
.burger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
transition: background-color 0.3s ease, border-radius 0.3s ease;
z-index: 2200;
}
.burger-box {
width: 24px;
height: 18px;
position: relative;
}
/* Base lines */
.burger-line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: white;
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.line-1 {
top: 0px;
}
.line-2 {
top: var(--wp--preset--spacing--xs);
}
.line-3 {
top: var(--wp--preset--spacing--base);
}
/* Open State (Morph to Cross) */
body.mobile-menu-open .burger {
background-color: var(--wp--preset--color--base-invert);
/* White background */
border-radius: var(--wp--custom--radius--small);
}
body.mobile-menu-open .burger-line {
background-color: var(--wp--preset--color--base);
/* Black lines for the cross */
}
body.mobile-menu-open .line-1 {
top: var(--wp--preset--spacing--xs);
transform: rotate(135deg);
}
body.mobile-menu-open .line-2 {
opacity: 0;
left: -40px;
}
body.mobile-menu-open .line-3 {
top: var(--wp--preset--spacing--xs);
transform: rotate(-135deg);
}
/* ======================================
RESPONSIVE UTILITIES
====================================== */
.mobile-only {
display: none !important;
}
.desktop-only {
display: flex !important;
}
@media (max-width: 1024px) {
.mobile-only {
display: flex !important;
}
.desktop-only {
display: none !important;
}
/* Center Logo on Mobile */
.site-header-inner {
position: relative;
justify-content: space-between;
padding-left: var(--wp--preset--spacing--md) !important;
padding-right: var(--wp--preset--spacing--md) !important;
z-index: 2101;
}
.header-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
.header-logo a {
pointer-events: auto;
}
/* Navigation is handled by custom drawer */
.site-header-inner .wp-block-navigation {
display: none !important;
}
}
/* ======================================
MOBILE DRAWER MENU
====================================== */
.mobile-menu-drawer {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 100vh;
z-index: 2000;
transform: translateX(-100%);
transition: transform 0.3s ease-out;
display: flex;
flex-direction: column;
background: transparent;
pointer-events: none;
}
.mobile-menu-drawer>* {
pointer-events: auto;
}
.mobile-menu-header {
height: 45px;
/* User requested 45px to reach base of header */
background: transparent;
}
.mobile-menu-body {
background: var(--wp--preset--color--base-invert);
/* White */
flex-grow: 1;
margin-top: 0;
padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--lg);
box-shadow: var(--wp--preset--shadow--soft);
}
.mobile-nav-list {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--md);
}
.mobile-nav-list a {
text-decoration: none;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--base) !important;
font-weight: 500;
}
.mobile-nav-list>a.is-active,
.mobile-nav-list>details>summary.is-active {
color: var(--wp--preset--color--primary) !important;
}
.mobile-nav-list details>summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--base) !important;
font-weight: 500;
}
.mobile-nav-list .chevron {
transition: transform 0.2s ease;
}
.mobile-nav-list details[open] .chevron {
transform: rotate(180deg);
}
.mobile-nav-list .submenu {
padding-left: 15px;
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 15px;
}
/* Open State */
body.mobile-menu-open {
overflow: hidden;
/* Prevent background scroll */
}
body.mobile-menu-open .mobile-menu-drawer {
transform: translateX(0);
}
body.mobile-menu-open .mobile-menu-overlay {
display: block;
}
.mobile-menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--wp--custom--effects--overlay--black-70);
/* Darker overlay as requested */
z-index: 1999;
}
/* Login Button Style (from Figma) */
.btn-login {
display: inline-flex;
align-items: center;
gap: 10px;
height: 40px;
padding: 9px 0;
border-radius: 67px;
color: var(--wp--preset--color--base-invert);
text-decoration: none;
transition: color 0.2s ease;
}
.btn-login:hover {
color: var(--wp--preset--color--primary-hover);
}
.btn-login:active {
color: var(--wp--preset--color--primary-actif);
}
.btn-login__icon {
width: 25px;
height: 25px;
flex-shrink: 0;
border: 2px solid currentColor;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.btn-login__icon::after {
content: "";
width: 100%;
height: 100%;
background-color: currentColor;
-webkit-mask: url('../icons/ic_profil.svg') no-repeat center / contain;
mask: url('../icons/ic_profil.svg') no-repeat center / contain;
transform: scale(1);
}
.btn-login__text {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
}
/* Icon only version (mobile) */
.btn-login--icon-only .btn-login__text {
display: none;
}
/* ======================================
SEARCH FORM
====================================== */
.search-form-wrapper {
display: flex;
flex-direction: column;
gap: 5px;
}
.search-form__label {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: 23px;
color: var(--wp--preset--color--base-invert);
margin: 0;
}
.search-form .wp-block-search__inside-wrapper {
display: flex;
gap: 10px;
align-items: stretch;
}
.search-form .wp-block-search__input {
flex: 1;
height: 40px;
padding: 5px var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--base-invert);
border: none;
border-radius: 50px;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
font-style: italic;
color: var(--wp--preset--color--base-secondary);
box-sizing: border-box;
}
.search-form .wp-block-search__input::placeholder {
color: var(--wp--preset--color--base-secondary);
font-style: italic;
}
.search-form .wp-block-search__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--xs);
height: 40px;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--primary);
border: none;
border-radius: 50px;
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: var(--wp--custom--line-height--text--base);
cursor: pointer;
transition: background-color 0.2s ease;
white-space: nowrap;
}
.search-form .wp-block-search__button:hover {
background-color: var(--wp--preset--color--primary-hover);
}
.search-form .wp-block-search__button:active {
background-color: var(--wp--preset--color--primary-actif);
}
.search-form .wp-block-search__button svg {
width: 17px;
height: 17px;
}
/* Responsive */
@media screen and (max-width: 767px) {
.search-form .wp-block-search__inside-wrapper {
flex-direction: column;
gap: 10px;
}
.search-form .wp-block-search__button {
width: 100%;
}
}
/* ======================================
FORM FIELDS
====================================== */
.form-field {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
max-width: var(--wp--custom--layout--max-width--form-field);
}
.form-field__label {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: 23px;
color: var(--wp--preset--color--base-invert);
margin: 0;
}
.form-field__wrapper {
display: flex;
gap: 10px;
}
.form-field__hint {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
font-weight: var(--wp--custom--font-weight--regular);
line-height: 23px;
color: var(--wp--preset--color--base-invert);
margin: 0;
}
/* Input Text */
.form-input {
width: 337px;
height: 40px;
padding: 5px var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--base-invert);
border: none;
border-radius: 50px;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
font-style: italic;
color: var(--wp--preset--color--base-secondary);
box-sizing: border-box;
transition: all 0.2s ease;
}
.form-input::placeholder {
color: var(--wp--preset--color--base-secondary);
font-style: italic;
}
.form-input:focus {
outline: none;
color: var(--wp--preset--color--base);
font-style: normal;
}
/* Select */
.form-select {
width: 337px;
height: 40px;
padding: 5px var(--wp--preset--spacing--md);
padding-right: 40px;
background-color: var(--wp--preset--color--base-invert);
border: none;
border-radius: 50px;
box-shadow: var(--wp--preset--shadow--soft);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
font-style: italic;
color: var(--wp--preset--color--base-secondary);
box-sizing: border-box;
appearance: none;
cursor: pointer;
background-image: url('../icons/ic_chevron_down.svg');
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 14px 14px;
transition: all 0.2s ease;
}
.form-select:focus {
outline: none;
color: var(--wp--preset--color--base);
font-style: normal;
}
.form-select option {
color: var(--wp--preset--color--base);
font-style: normal;
}
/* Password Field */
.form-field--password {
max-width: var(--wp--custom--layout--max-width--form-field);
position: relative;
}
.form-field__format {
margin-bottom: 10px;
}
.form-field__format-title {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: 23px;
color: var(--wp--preset--color--base-invert);
margin: 0 0 5px 0;
}
.form-field__format-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.form-field__format-item {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: 23px;
color: var(--wp--preset--color--base-invert);
padding-left: 25px;
position: relative;
}
.form-field__format-item.is-valid {
color: var(--wp--preset--color--success);
}
.form-field__check {
position: absolute;
left: 0;
top: 3px;
width: 17px;
height: 17px;
border-radius: 50%;
background-color: var(--wp--preset--color--base-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.form-field__check::after {
content: "";
width: 11px;
height: 8px;
background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4 7L10 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0;
}
.form-field__format-item.is-valid .form-field__check {
background-color: var(--wp--preset--color--success);
}
.form-field__format-item.is-valid .form-field__check::after {
opacity: 1;
}
.form-field__wrapper--password {
position: relative;
flex: 1;
}
.form-field__wrapper--password .form-input {
width: 100%;
padding-right: 45px;
}
.form-field__toggle-password {
position: absolute;
right: var(--wp--preset--spacing--md);
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 0;
cursor: pointer;
width: 17px;
height: 17px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wp--preset--color--base-secondary);
}
.form-field__eye-icon {
width: 17px;
height: 17px;
background-color: currentColor;
-webkit-mask: url('../icons/ic_oeil_cache.svg') no-repeat center / contain;
mask: url('../icons/ic_oeil_cache.svg') no-repeat center / contain;
}
.form-field__toggle-password.is-visible .form-field__eye-icon {
-webkit-mask: url('../icons/ic_oeil.svg') no-repeat center / contain;
mask: url('../icons/ic_oeil.svg') no-repeat center / contain;
}
/* Responsive */
@media screen and (max-width: 767px) {
.form-input,
.form-select {
width: 100%;
}
.form-field {
max-width: 100%;
}
}
/* ======================================
FOOTER LAYOUT
====================================== */
.site-footer {
margin-top: auto;
}
.footer-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--wp--preset--spacing--xl);
}
.footer-col {
flex: 1 1 200px;
min-width: 180px;
}
.footer-col--newsletter {
flex: 1 1 280px;
max-width: var(--wp--custom--layout--max-width--footer-newsletter-sm);
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--md);
}
.footer-social {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--sm);
}
.footer-social .social-link {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
transition: color 0.2s ease;
}
.footer-social .social-link:hover {
color: var(--wp--preset--color--primary);
}
/* ======================================
NEWSLETTER FORM
====================================== */
/* ======================================
NEWSLETTER FORM
====================================== */
.newsletter-form {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--wp--preset--spacing--xs);
}
.newsletter-form input[type="email"] {
flex: 1;
/* Adjust as needed, specs say fixed width 337px but flexible is better for responsive */
height: 41px;
padding: 0 var(--wp--preset--spacing--md);
background: var(--wp--preset--color--base-invert);
box-shadow: var(--wp--custom--effects--shadow--elevate-soft);
/* Specific Figma shadow */
border-radius: var(--wp--custom--radius--large);
border: none;
outline: none;
/* Typography: Urbanist Italic 12px */
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--xsmall);
font-style: italic;
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--small);
/* using small line-height approx 1.375rem or hardcoded if specific needed but aiming for token */
color: var(--wp--preset--color--base-secondary);
box-sizing: border-box;
margin: 0;
transition: box-shadow 0.2s ease;
}
.newsletter-form input[type="email"]:focus {
box-shadow: var(--wp--custom--effects--shadow--focus-primary);
/* Primary glow on focus */
}
.newsletter-form input[type="email"]::placeholder {
color: var(--wp--preset--color--base-secondary);
opacity: 1;
}
.newsletter-form button[type="submit"] {
display: inline-flex;
justify-content: center;
align-items: center;
height: 41px;
padding: 0 var(--wp--preset--spacing--md);
/* 8px 20px */
background: var(--wp--preset--color--primary);
border-radius: var(--wp--custom--radius--large);
border: none;
box-sizing: border-box;
margin: 0;
cursor: pointer;
/* Typography: Poppins Semibold 16px */
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
transition: background-color 0.2s ease;
white-space: nowrap;
}
.newsletter-form button[type="submit"]:hover {
background: var(--wp--preset--color--primary-hover);
}
.newsletter-form button[type="submit"]:active {
background: var(--wp--preset--color--primary-actif);
}
/* ======================================
CARDS
====================================== */
/* Team Card */
.team-card {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--wp--custom--layout--max-width--team-card);
overflow: hidden;
border-radius: var(--wp--custom--radius--base);
background-color: var(--wp--preset--color--base);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
transform: translateY(-4px);
box-shadow: var(--wp--preset--shadow--medium);
box-shadow: var(--wp--preset--shadow--soft);
}
.team-card__image {
width: 100%;
height: 285px;
position: relative;
overflow: hidden;
border-radius: var(--wp--custom--radius--base);
}
.team-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.team-card:hover .team-card__image img {
transform: scale(1.05);
}
/* Subtle overlay gradient on image */
.team-card__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, var(--wp--custom--effects--overlay--base-30) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.team-card:hover .team-card__image::after {
opacity: 1;
}
.team-card__content {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--sm);
padding: var(--wp--preset--spacing--md);
flex: 1;
}
.team-card__header {
margin-bottom: var(--wp--preset--spacing--xs);
}
.team-card__name {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--large);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--heading--medium);
color: var(--wp--preset--color--contrast);
margin: 0 0 var(--wp--preset--spacing--xs) 0;
}
.team-card__first-name,
.team-card__last-name {
display: block;
}
.team-card__last-name {
text-transform: uppercase;
font-size: var(--wp--preset--font-size--medium);
opacity: 0.9;
}
.team-card__role {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-style: italic;
font-weight: var(--wp--custom--font-weight--medium);
line-height: var(--wp--custom--line-height--text--small);
color: var(--wp--preset--color--custom);
/* Bleu clair #9ABFF9 */
margin: 0 0 var(--wp--preset--spacing--sm) 0;
}
.team-card__description {
flex: 1;
margin-bottom: var(--wp--preset--spacing--md);
}
.team-card__description p {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--small);
color: var(--wp--preset--color--contrast-2);
margin: 0;
}
.team-card__social {
margin-top: auto;
padding-top: var(--wp--preset--spacing--sm);
border-top: 1px solid var(--wp--preset--color--contrast-3);
}
.team-card__social .wp-social-link {
margin-right: var(--wp--preset--spacing--xs);
}
.team-card__social .wp-social-link:last-child {
margin-right: 0;
}
/* Responsive Design */
@media screen and (max-width: 768px) {
.team-card {
max-width: 100%;
margin-bottom: var(--wp--preset--spacing--md);
}
.team-card__image {
height: 240px;
}
.team-card__name {
font-size: var(--wp--preset--font-size--medium);
}
.team-card__content {
padding: var(--wp--preset--spacing--sm);
}
.team-card__social {
justify-content: center;
}
}
@media screen and (max-width: 480px) {
.team-card__image {
height: 200px;
}
.team-card__content {
padding: var(--wp--preset--spacing--xs);
}
.team-card__name {
font-size: var(--wp--preset--font-size--base);
}
.team-card__role {
font-size: var(--wp--preset--font-size--xsmall);
}
.team-card__description p {
font-size: var(--wp--preset--font-size--xsmall);
line-height: 1.4;
}
}
/* Blog Card */
.blog-card {
display: flex;
flex-direction: column;
background-color: #FFF1F5;
border-radius: var(--wp--custom--radius--base);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--wp--custom--effects--shadow--card-hover);
}
.blog-card__image {
width: 100%;
height: 285px;
overflow: hidden;
border-radius: var(--wp--custom--radius--base) var(--wp--custom--radius--base) 0 0;
}
.blog-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.blog-card__image-link {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.blog-card:hover .blog-card__image img {
transform: scale(1.05);
}
.blog-card__content {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--md);
padding: var(--wp--preset--spacing--md);
flex: 1;
}
.blog-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--small);
color: var(--wp--preset--color--base);
}
.blog-card__author,
.blog-card__date {
margin: 0;
}
.blog-card__author-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.blog-card__author-link:hover {
color: var(--wp--preset--color--primary);
}
.blog-card__title {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--medium);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--text--medium);
color: var(--wp--preset--color--base);
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(1.4em * 2);
}
.blog-card__excerpt {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--small);
color: var(--wp--preset--color--base);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(var(--wp--custom--line-height--text--small) * 4);
}
.blog-card__footer {
display: flex;
justify-content: flex-end;
margin-top: auto;
}
.blog-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
text-decoration: none;
transition: color 0.2s ease;
}
.blog-card__link::before {
content: "";
width: 8.8px;
height: 6px;
background-color: currentColor;
-webkit-mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
transform: rotate(180deg);
}
.blog-card:hover .blog-card__link {
color: var(--wp--preset--color--primary-hover);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
/* Blog Hero Section */
.blog-hero {
background-color: var(--wp--preset--color--base);
padding: var(--wp--preset--spacing--2xl) var(--wp--preset--spacing--md);
}
.blog-hero-wrapper {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--lg);
}
.blog-hero-title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h1);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-1);
color: var(--wp--preset--color--base-invert);
margin: 0;
}
.blog-hero-description {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
margin: 0;
max-width: 90%;
}
/* Blog Filters Section */
.blog-filters-section {
margin-top: var(--wp--preset--spacing--lg);
}
.blog-filters-container {
display: flex;
gap: var(--wp--preset--spacing--lg);
flex-wrap: wrap;
align-items: flex-end;
}
.blog-filters-group {
display: flex;
gap: var(--wp--preset--spacing--md);
align-items: flex-end;
}
.blog-filter-field {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xs);
}
.blog-filter-label {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
color: var(--wp--preset--color--base-invert);
}
.blog-filter-select {
background-color: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--base);
border: none;
border-radius: var(--wp--custom--radius--large);
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
width: 337px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.blog-filter-select:hover {
background-color: var(--wp--preset--color--tertiary-hover);
}
.blog-filter-reset {
background: transparent;
border: none;
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
text-decoration: underline;
cursor: pointer;
padding: 0;
height: 34px;
line-height: var(--wp--custom--line-height--text--base);
}
.blog-filter-reset:hover {
opacity: 0.8;
}
/* Search Section */
.blog-search-group {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xs);
flex: 1;
min-width: 337px;
}
.blog-search-label {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
color: var(--wp--preset--color--base-invert);
}
.blog-search-form {
display: flex;
gap: var(--wp--preset--spacing--xs);
}
.blog-search-input {
background-color: var(--wp--preset--color--base-invert);
border: none;
border-radius: var(--wp--custom--radius--large);
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
width: 337px;
color: var(--wp--preset--color--base);
}
.blog-search-input::placeholder {
color: var(--wp--preset--color--base-secondary);
}
.blog-search-button {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border: none;
border-radius: var(--wp--custom--radius--large);
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--xs);
cursor: pointer;
transition: background-color 0.2s ease;
white-space: nowrap;
}
.blog-search-button:hover {
background-color: var(--wp--preset--color--primary-hover);
}
.blog-search-icon {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Articles Header */
.blog-articles-header {
text-align: left;
margin: var(--wp--preset--spacing--2xl) 0 var(--wp--preset--spacing--2xl);
}
.blog-articles-title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-2);
color: var(--wp--preset--color--base-invert);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Blog Posts Section */
.blog-posts-section {
padding: var(--wp--preset--spacing--xl) 0;
}
/* Blog Archive */
.blog-archive {
padding: 0;
background-color: var(--wp--preset--color--base);
}
.blog-archive-wrapper {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--md);
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
color: var(--wp--preset--color--base-invert);
}
.blog-archive-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--md);
}
.blog-archive-title {
margin: 0;
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-2);
color: var(--wp--preset--color--base-invert);
}
.blog-archive-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wp--preset--spacing--lg);
margin-bottom: var(--wp--preset--spacing--xl);
}
.blog-archive-grid .blog-card {
width: 100%;
}
.blog-archive-pagination {
display: flex;
justify-content: center;
margin-top: var(--wp--preset--spacing--sm);
}
.blog-archive-pagination .page-numbers {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.blog-archive-pagination .page-numbers li {
margin: 0;
}
.blog-archive-pagination .page-numbers a,
.blog-archive-pagination .page-numbers span {
color: var(--wp--preset--color--base-invert);
text-decoration: none;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
}
.blog-archive-pagination .page-numbers .current {
color: var(--wp--preset--color--primary);
text-decoration: underline;
text-underline-offset: 4px;
}
.blog-archive-empty {
margin: 0;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--base-invert);
}
/* Blog Single */
.single-post .blog-single {
padding-top: calc(71px + var(--wp--preset--spacing--xl)) !important;
}
.admin-bar.single-post .blog-single {
padding-top: calc(71px + 32px + var(--wp--preset--spacing--xl)) !important;
}
.single-post .blog-single__content .wp-block-post-title {
overflow-wrap: anywhere;
word-break: break-word;
}
.single-post .blog-single__content>h1.wp-block-post-title {
line-height: 1.2 !important;
margin-bottom: 0;
text-wrap: pretty;
}
.single-post .blog-single__meta {
align-items: center;
color: var(--wp--preset--color--custom);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--small);
}
.single-post .blog-single__meta .wp-block-post-author-name,
.single-post .blog-single__meta time {
color: var(--wp--preset--color--custom) !important;
}
.single-post .blog-single__meta-author {
margin: 0;
text-transform: uppercase;
font-weight: var(--wp--custom--font-weight--semibold);
letter-spacing: 0.02em;
}
.single-post .blog-single__meta-author::before {
content: "Posté par ";
text-transform: none;
font-weight: var(--wp--custom--font-weight--regular);
letter-spacing: normal;
}
.single-post .blog-single__meta-date {
margin: 0;
}
.single-post .blog-single__meta-date::before {
content: " | Le ";
}
.single-post .blog-single__content .wp-block-query .wp-block-post-title {
line-height: 1.35;
overflow-wrap: anywhere;
word-break: break-word;
}
.single-post .blog-single__content a {
color: var(--wp--preset--color--base-invert);
}
.single-post .blog-single__content .wp-block-query .wp-block-post-title a {
color: var(--wp--preset--color--base-invert);
}
@media (max-width: 781px) {
.single-post .blog-single {
padding-top: calc(71px + var(--wp--preset--spacing--lg)) !important;
}
.admin-bar.single-post .blog-single {
padding-top: calc(71px + 46px + var(--wp--preset--spacing--lg)) !important;
}
}
@media screen and (max-width: 991px) {
.blog-archive-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 767px) {
.blog-hero {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
}
.blog-hero-title {
font-size: clamp(1.875rem, 8vw, 3.125rem);
line-height: 1.2;
}
.blog-hero-description {
font-size: var(--wp--preset--font-size--base);
}
.blog-filters-container {
flex-direction: column;
}
.blog-filters-group {
flex-direction: column;
width: 100%;
}
.blog-filter-field {
width: 100%;
}
.blog-filter-select {
width: 100%;
}
.blog-search-group {
width: 100%;
}
.blog-search-input {
width: 100%;
}
.blog-search-form {
flex-direction: column;
}
.blog-search-button {
width: 100%;
justify-content: center;
}
.blog-articles-header {
margin: var(--wp--preset--spacing--lg) 0;
}
.blog-articles-title {
font-size: var(--wp--preset--font-size--large);
}
.blog-archive-grid {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--md);
}
.blog-card__image {
height: 220px;
}
}
/* Partner Card */
.partner-card {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--md);
width: 800px;
max-width: 100%;
padding: var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--base-invert);
border-radius: var(--wp--custom--radius--base);
box-shadow: var(--wp--preset--shadow--soft);
}
.partner-card__logo {
width: 250px;
height: 200px;
flex-shrink: 0;
overflow: hidden;
border-radius: var(--wp--custom--radius--base);
}
.partner-card__logo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.partner-card__content {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xs);
flex: 1;
min-width: 0;
}
.partner-card__title {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--medium);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--text--medium);
color: var(--wp--preset--color--base) !important;
margin: 0;
}
.partner-card__description {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--small);
color: var(--wp--preset--color--base-secondary);
margin: 0;
}
/* Responsive */
@media screen and (max-width: 767px) {
.partner-card {
flex-direction: column;
width: 100%;
max-width: var(--wp--custom--layout--max-width--card-compact);
}
.partner-card__logo {
width: 100%;
height: 198px;
}
}
/* Testimonial Card */
.testimonial-card {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xs);
padding: var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--surface-invert);
border-radius: var(--wp--custom--radius--base);
box-shadow: var(--wp--preset--shadow--soft);
max-width: var(--wp--custom--layout--max-width--testimonial);
}
.testimonial-card__header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.testimonial-card__author {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--medium);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--text--medium);
color: var(--wp--preset--color--base);
margin: 0;
}
.testimonial-card__quote-icon {
width: 67px;
height: 47px;
flex-shrink: 0;
transform: scaleY(-1);
/* Flip vertical pour avoir les guillemets vers le bas */
}
.testimonial-card__text {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--small);
color: var(--wp--preset--color--base-secondary);
margin: 0;
}
/* Subscription Card */
.subscription-card {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.subscription-card:hover {
border-color: var(--wp--preset--color--primary);
}
.subscription-card.is-active {
border-color: var(--wp--preset--color--primary);
box-shadow: var(--wp--preset--shadow--soft);
}
.subscription-card.is-open {
border-color: var(--wp--preset--color--primary);
}
.subscription-features {
list-style: none;
padding-left: 0;
}
.subscription-features li {
position: relative;
padding-left: 1.5em;
margin-bottom: var(--wp--preset--spacing--xs);
}
.subscription-features li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--wp--preset--color--primary);
font-weight: var(--wp--custom--font-weight--bold);
}
/* Partner Card */
.partner-card {
transition: transform 0.2s ease;
}
.partner-card:hover {
transform: scale(1.02);
}
/* ======================================
CHECKBOX (Custom Style)
====================================== */
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: var(--wp--custom--radius--small);
/* 4px */
border: 1px solid var(--wp--preset--color--base-invert);
background-color: transparent;
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
vertical-align: middle;
}
/* Hover state: Primary bg, no border */
input[type="checkbox"]:hover {
background-color: var(--wp--preset--color--primary);
border-color: transparent;
}
/* Active/Checked state: Primary bg, no border, white checkmark */
input[type="checkbox"]:checked {
background-color: var(--wp--preset--color--primary);
border-color: transparent;
}
input[type="checkbox"]:checked::after {
content: "";
width: 10px;
height: 8px;
/* Checkmark icon (base-invert color) */
background-color: var(--wp--preset--color--base-invert);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* ======================================
NOTIFICATIONS
====================================== */
.notification-success {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--lg);
/* 30px */
width: 780px;
max-width: 100%;
height: 70px;
padding: 0 24px;
background-color: var(--wp--preset--color--success);
border-radius: var(--wp--custom--radius--small);
}
.notification-success__content {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--md);
/* 20px */
}
.notification-success__icon {
width: 17px;
height: 17px;
flex-shrink: 0;
color: var(--wp--preset--color--base);
}
.notification-success__message {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base);
margin: 0;
width: 340px;
}
.notification-success__link {
flex: 1;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base);
text-align: right;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.notification-success__close {
width: 24px;
height: 24px;
flex-shrink: 0;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--wp--preset--color--base);
display: flex;
align-items: center;
justify-content: center;
}
.notification-success__close:hover {
opacity: 0.7;
}
/* Responsive */
@media screen and (max-width: 767px) {
.notification-success {
flex-wrap: wrap;
height: auto;
padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--md);
gap: var(--wp--preset--spacing--sm);
}
.notification-success__message {
width: auto;
flex: 1;
}
.notification-success__link {
order: 3;
width: 100%;
text-align: left;
}
.notification-success__close {
order: 2;
}
}
/* ======================================
BREADCRUMB (Fil d'Ariane)
====================================== */
.breadcrumb-wrapper {
background-color: var(--wp--preset--color--base-invert);
padding: var(--wp--preset--spacing--md) 50px;
/* 50px horizontal comme Figma */
padding-top: calc(71px + var(--wp--preset--spacing--md));
/* Compense le header fixed */
}
.admin-bar .breadcrumb-wrapper {
padding-top: calc(71px + 32px + var(--wp--preset--spacing--md));
/* Header + admin bar */
}
@media (max-width: 781px) {
.breadcrumb-wrapper {
padding: 10px var(--wp--preset--spacing--md);
/* 10px vertical */
padding-top: calc(71px + 10px);
/* Header mobile + 10px */
}
.admin-bar .breadcrumb-wrapper {
padding-top: calc(71px + 46px + 10px);
/* Header + admin bar mobile + 10px */
}
}
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--xs);
/* 8px */
}
.breadcrumb__link {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--xsmall);
color: var(--wp--preset--color--base-invert);
text-decoration: underline;
transition: color 0.2s ease;
}
.breadcrumb__link:hover {
color: var(--wp--preset--color--primary);
}
.breadcrumb__separator {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--xsmall);
color: var(--wp--preset--color--base-invert);
}
.breadcrumb__current {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--text--xsmall);
color: var(--wp--preset--color--base-invert);
}
/* Variant: Light text on dark background */
.breadcrumb-wrapper--dark .breadcrumb__link,
.breadcrumb-wrapper--dark .breadcrumb__separator,
.breadcrumb-wrapper--dark .breadcrumb__current {
color: var(--wp--preset--color--base);
}
.breadcrumb-wrapper--dark .breadcrumb__link:hover {
color: var(--wp--preset--color--primary);
}
/* Blog page breadcrumb on dark background */
.blog-archive-page .breadcrumb-wrapper {
background-color: var(--wp--preset--color--base);
}
.blog-archive-page .breadcrumb__link,
.blog-archive-page .breadcrumb__separator,
.blog-archive-page .breadcrumb__current {
color: var(--wp--preset--color--base-invert);
}
.blog-archive-page .breadcrumb__link:hover {
color: var(--wp--preset--color--primary);
}
/* ======================================
NAVIGATION EXAMPLE
====================================== */
.nav-example {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--md);
/* 20px */
flex-wrap: wrap;
}
.nav-link {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
text-decoration: none;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
border-radius: var(--wp--custom--radius--small);
transition: all 0.2s ease;
}
.nav-link:hover {
color: var(--wp--preset--color--primary);
background-color: var(--wp--custom--effects--overlay--primary-10);
}
.nav-link.current {
color: var(--wp--preset--color--primary);
font-weight: var(--wp--custom--font-weight--semibold);
}
/* ======================================
PAGINATION
====================================== */
.pagination {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--lg);
/* 30px */
}
.pagination__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 17px;
background-color: var(--wp--preset--color--base-invert);
border: 1px solid var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--base);
color: var(--wp--preset--color--base);
cursor: pointer;
transition: all 0.2s ease;
}
.pagination__arrow:hover {
background-color: var(--wp--preset--color--primary-hover);
border-color: var(--wp--preset--color--primary-hover);
color: var(--wp--preset--color--base-invert);
}
.pagination__arrow:active {
background-color: var(--wp--preset--color--primary-actif);
border-color: var(--wp--preset--color--primary-actif);
}
.pagination__arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pagination__arrow.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.pagination__arrow svg {
width: 14px;
height: 14px;
}
.pagination__numbers {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--lg);
/* 30px */
}
.pagination__link {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
text-decoration: none;
min-width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s ease;
position: relative;
}
.pagination__link:hover {
color: var(--wp--preset--color--primary);
}
.pagination__link::after {
content: "";
position: absolute;
left: 50%;
bottom: -7px;
transform: translateX(-50%) scale(0);
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
transition: transform 0.2s ease;
}
.pagination__link:hover::after {
transform: translateX(-50%) scale(1);
}
.pagination__link--active {
color: var(--wp--preset--color--primary) !important;
font-weight: var(--wp--custom--font-weight--bold);
}
.pagination__link--active::after {
transform: translateX(-50%) scale(1);
}
.pagination__ellipsis {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
min-width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive */
@media screen and (max-width: 767px) {
.pagination {
gap: var(--wp--preset--spacing--sm);
}
.pagination__arrow {
width: 40px;
height: 40px;
padding: 13px;
}
.pagination__numbers {
gap: var(--wp--preset--spacing--sm);
}
}
/* ======================================
UI KIT COLOR SWATCHES
====================================== */
.color-swatch {
min-width: 100px;
text-align: center;
}
/* ======================================
UI KIT BUTTON SWATCHES (non-interactive)
====================================== */
.button-swatches {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--sm);
}
.button-swatch {
display: inline-block;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: var(--wp--custom--line-height--text--base);
border-radius: var(--wp--custom--radius--large);
text-align: center;
cursor: default;
user-select: none;
}
/* Primary swatches */
.button-swatch--primary-default {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
}
.button-swatch--primary-hover {
background-color: var(--wp--preset--color--primary-hover);
color: var(--wp--preset--color--base-invert);
}
.button-swatch--primary-actif {
background-color: var(--wp--preset--color--primary-actif);
color: var(--wp--preset--color--base-invert);
}
.button-swatch--primary-disabled {
background-color: var(--wp--preset--color--tertiary);
color: var(--wp--preset--color--base-invert);
}
/* Secondary swatches */
.button-swatch--secondary-default {
background-color: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--primary);
}
.button-swatch--secondary-hover {
background-color: var(--wp--preset--color--secondary-hover);
color: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--primary);
}
.button-swatch--secondary-actif {
background-color: var(--wp--preset--color--secondary-actif);
color: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--primary);
}
.button-swatch--secondary-disabled {
background-color: var(--wp--preset--color--surface-secondary);
color: var(--wp--preset--color--tertiary);
border: 1px solid var(--wp--preset--color--tertiary);
}
/* ======================================
SLIDER NAVIGATION
====================================== */
.slider-nav {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--sm);
padding: var(--wp--preset--spacing--sm);
}
.slider-nav p {
margin: 0;
}
/* --- Arrows --- */
.slider-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
/* Standard touch target size */
height: 48px;
border-radius: var(--wp--custom--radius--base);
/* 10px */
cursor: pointer;
transition: all 0.2s ease;
/* Default: Bg Surface Invert (White), Border Base (Dark), Icon Base */
background-color: var(--wp--preset--color--base-invert);
border: 1px solid var(--wp--preset--color--base);
color: var(--wp--preset--color--base);
}
.slider-arrow--noline {
border-color: transparent;
}
/* Icon */
.slider-arrow::after {
content: "";
width: 14px;
height: 14px;
background-color: currentColor;
-webkit-mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
flex-shrink: 0;
}
/* Directions */
.slider-arrow--prev::after {
/* SVG icon points LEFT (<) by default */
transform: rotate(0deg);
}
.slider-arrow--next::after {
/* Points RIGHT (>) */
transform: rotate(180deg);
}
/* Hover: Bg Primary-Hover, No Border, Icon White */
.slider-arrow:hover {
background-color: var(--wp--preset--color--primary-hover);
border-color: transparent;
color: var(--wp--preset--color--base-invert);
}
/* Active: Bg Primary-Actif, No Border, Icon White */
.slider-arrow:active,
.slider-arrow.is-active {
background-color: var(--wp--preset--color--primary-actif);
border-color: transparent;
color: var(--wp--preset--color--base-invert);
}
/* Disabled: Low opacity, no pointer events */
.slider-arrow:disabled,
.slider-arrow.is-disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
/* --- Pagination (Dots) --- */
.slider-pagination {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--sm);
/* Figma gap */
}
.slider-dot {
width: 18px;
/* Figma dimensions */
height: 18px;
border-radius: 50%;
/* Default (Dark BG Context -> White Dots) */
background-color: var(--wp--preset--color--base-invert);
border: 2px solid var(--wp--preset--color--base-invert);
/* Solid white by default? Or simplified */
/* Looking at Figma CSS for variant "Fond Foncé" inactive:
"Oval... background: #FFFFFF; border: 2px solid #1A2131" (Wait, that's weird for dark bg)
Let's stick to visual logic + tokens:
Dark BG -> Dots should be Light.
Inactive: White (base-invert)
Active: Transparent/Dark center with White Border + White Dot?
*/
background-color: var(--wp--preset--color--base-invert);
border: 1px solid var(--wp--preset--color--base-invert);
/* Simple white dot */
cursor: pointer;
transition: all 0.2s ease;
box-sizing: border-box;
}
/* --- Pagination on DARK Background (Default) --- */
/* Inactive: White Dot */
.slider-pagination .slider-dot {
background-color: var(--wp--preset--color--base-invert);
border: 2px solid var(--wp--preset--color--base-invert);
}
/* Active: Border White, Transparent Bg, Inner White Dot */
.slider-pagination .slider-dot.is-active {
background-color: transparent;
border: 2px solid var(--wp--preset--color--base-invert);
position: relative;
transition: transform 0.3s ease;
}
.slider-pagination .slider-dot.is-active::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--wp--preset--color--base-invert);
transition: all 0.3s ease;
}
/* --- Pagination on LIGHT Background (.slider-pagination--light) --- */
/* Inactive: White Bg, Dark Border (Base) */
.slider-pagination--light .slider-dot {
background-color: var(--wp--preset--color--base-invert);
border: 2px solid var(--wp--preset--color--base);
}
/* Active: White Bg (Ring), Dark Border, Inner Dark Dot */
.slider-pagination--light .slider-dot.is-active {
background-color: var(--wp--preset--color--base-invert);
border: 2px solid var(--wp--preset--color--base);
position: relative;
transition: transform 0.3s ease;
}
.slider-pagination--light .slider-dot.is-active::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--wp--preset--color--base);
transition: all 0.3s ease;
}
/* ======================================
FOOTER
====================================== */
footer.wp-block-template-part {
margin-block-start: 0 !important;
margin-top: 0 !important;
}
.site-footer {
background-color: var(--wp--preset--color--base-invert);
border-top: 1px solid var(--wp--preset--color--tertiary);
padding: var(--wp--preset--spacing--2xl) var(--wp--preset--spacing--xl);
width: 100%;
}
.footer-container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 40px;
padding-top: var(--wp--preset--spacing--xs);
}
.footer-col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: var(--wp--preset--spacing--xs);
}
.footer-col--logo {
flex: 0 0 255px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0;
}
.footer-col--contact,
.footer-col--sitemap {
flex: 1;
}
.footer-col--newsletter {
flex: 2;
max-width: var(--wp--custom--layout--max-width--footer-newsletter-lg);
color: var(--wp--preset--color--base);
}
.footer-col--newsletter p {
color: var(--wp--preset--color--base-secondary);
}
.footer-logo-tagline {
display: none;
}
.footer-title {
font-family: var(--wp--preset--font-family--title) !important;
font-weight: 700 !important;
font-size: var(--wp--preset--font-size--medium) !important;
color: var(--wp--preset--color--base) !important;
margin-top: 0 !important;
margin-bottom: var(--wp--preset--spacing--md) !important;
text-transform: none;
}
.footer-address {
color: var(--wp--preset--color--base-secondary);
line-height: 1.6;
margin-bottom: var(--wp--preset--spacing--md);
}
.footer-link-red a {
color: var(--wp--preset--color--primary) !important;
text-decoration: none;
font-weight: 600;
}
.footer-link-red a:hover {
text-decoration: underline;
}
/* Site map navigation */
.footer-col--sitemap .wp-block-navigation {
color: var(--wp--preset--color--base);
}
.footer-col--sitemap .wp-block-navigation-item__content {
padding: 0 !important;
font-size: var(--wp--preset--font-size--base) !important;
color: var(--wp--preset--color--base) !important;
display: inline-flex;
align-items: center;
}
.footer-col--sitemap .wp-block-navigation-item__content::before {
content: ">";
margin-right: var(--wp--preset--spacing--xs);
color: var(--wp--preset--color--base);
font-weight: bold;
text-decoration: none !important;
}
.footer-col--sitemap .wp-block-navigation-item__content::after {
display: none !important;
/* Hide the dot from main navigation */
}
/* Newsletter form */
.newsletter-form {
display: flex;
align-items: stretch;
gap: var(--wp--preset--spacing--xs);
margin-top: var(--wp--preset--spacing--md);
margin-bottom: var(--wp--preset--spacing--md);
}
.newsletter-form input[type="email"] {
flex-grow: 1;
height: 41px;
/* Closer to Figma 40px */
padding: 0 var(--wp--preset--spacing--md);
background: var(--wp--preset--color--base-invert);
box-shadow: var(--wp--custom--effects--shadow--elevate-soft);
border-radius: var(--wp--custom--radius--large);
border: none;
box-sizing: border-box;
margin: 0;
font-family: var(--wp--preset--font-family--title);
font-style: italic;
font-size: var(--wp--preset--font-size--xsmall);
color: var(--wp--preset--color--base-secondary);
}
.newsletter-form .wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--wp--preset--color--primary);
border-radius: var(--wp--custom--radius--large);
color: var(--wp--preset--color--base-invert);
padding: 0 var(--wp--preset--spacing--md);
height: 41px;
border: none;
box-sizing: border-box;
margin: 0;
font-family: var(--wp--preset--font-family--text);
font-weight: var(--wp--custom--font-weight--semibold);
font-size: var(--wp--preset--font-size--base);
cursor: pointer;
transition: background-color 0.2s;
line-height: 1;
white-space: nowrap;
}
.newsletter-form .wp-element-button:hover {
background-color: var(--wp--preset--color--primary-hover) !important;
}
.newsletter-form--fluent form {
width: 100% !important;
margin: 0 !important;
}
.newsletter-form--fluent form > fieldset {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: var(--wp--preset--spacing--xs);
row-gap: 0;
width: 100% !important;
min-inline-size: 100% !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.newsletter-form--fluent .fluentform,
.newsletter-form--fluent .fluentform form {
width: 100% !important;
max-width: none !important;
}
.newsletter-form--fluent .ff-el-group {
margin: 0 !important;
width: 100% !important;
max-width: none !important;
}
.newsletter-form--fluent .ff-el-group:not(.ff_submit_btn_wrapper) {
grid-column: 1 !important;
min-width: 0 !important;
min-inline-size: 0 !important;
}
.newsletter-form--fluent .ff-el-input--label,
.newsletter-form--fluent .ff-el-group:not(.ff_submit_btn_wrapper)>label,
.newsletter-form--fluent .ff-el-form-help-message {
display: none !important;
margin: 0 !important;
}
.newsletter-form--fluent .ff-el-input--content {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.newsletter-form--fluent input.ff-el-form-control,
.newsletter-form--fluent .ff-el-form-control {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 41px;
padding: 0 var(--wp--preset--spacing--md);
background: var(--wp--preset--color--base-invert);
box-shadow: var(--wp--custom--effects--shadow--elevate-soft);
border-radius: var(--wp--custom--radius--large);
border: none;
box-sizing: border-box;
margin: 0;
font-family: var(--wp--preset--font-family--title);
font-style: italic;
font-size: var(--wp--preset--font-size--xsmall);
color: var(--wp--preset--color--base-secondary);
}
.newsletter-form--fluent .ff_submit_btn_wrapper {
margin: 0 !important;
grid-column: 2 !important;
justify-self: start;
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
min-inline-size: auto !important;
display: flex !important;
align-items: stretch;
}
.newsletter-form--fluent .ff-btn-submit,
.newsletter-form--fluent .ff-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--wp--preset--color--primary) !important;
border-radius: var(--wp--custom--radius--large);
color: var(--wp--preset--color--base-invert) !important;
padding: 0 var(--wp--preset--spacing--md);
height: 41px;
border: none;
box-sizing: border-box;
margin: 0;
font-family: var(--wp--preset--font-family--text);
font-weight: var(--wp--custom--font-weight--semibold);
font-size: var(--wp--preset--font-size--base);
cursor: pointer;
transition: background-color 0.2s;
line-height: 1;
white-space: nowrap;
width: auto !important;
min-width: fit-content !important;
max-width: none !important;
}
.newsletter-form--fluent .ff-btn-submit:hover,
.newsletter-form--fluent .ff-btn:hover {
background-color: var(--wp--preset--color--primary-hover) !important;
}
/* Socials */
.footer-socials {
display: flex;
gap: 24px;
margin-top: 24px;
}
.social-icon {
color: var(--wp--preset--color--base);
transition: color 0.2s;
}
.social-icon:hover {
color: var(--wp--preset--color--primary);
}
/* Bottom section */
.footer-separator {
border: none !important;
border-top: 1px solid var(--wp--preset--color--base) !important;
max-width: var(--wp--style--global--wide-size, 87.5rem);
opacity: 0.2;
}
.footer-bottom {
display: flex;
justify-content: center;
align-items: center;
/* Vertical center */
width: 100%;
min-height: 40px;
/* Minimal height for vertical centering feel */
}
.footer-legal {
color: var(--wp--preset--color--base);
text-align: center;
width: 100%;
margin: 0 !important;
}
.footer-legal a {
color: inherit;
text-decoration: none;
}
.footer-legal a:hover {
text-decoration: underline;
}
/* Responsive */
@media (max-width: 1024px) {
.site-footer {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
.footer-container {
flex-direction: column;
gap: var(--wp--preset--spacing--lg);
margin-bottom: var(--wp--preset--spacing--lg);
}
.footer-separator {
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--md);
}
.footer-col {
width: 100%;
max-width: none;
}
.footer-col--logo {
flex: 0 0 auto;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.newsletter-form {
flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
width: 100%;
}
}
/* ======================================
CARTES FORMATION
====================================== */
.formation-card {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--sm);
/* Matches Figma ~10px gap */
width: 370px;
background: var(--wp--preset--color--base-invert);
border-radius: var(--wp--custom--radius--base);
padding: var(--wp--preset--spacing--md);
box-shadow: var(--wp--preset--shadow--soft);
position: relative;
transition: background-color 0.3s ease;
text-decoration: none !important;
color: inherit !important;
box-sizing: border-box;
}
.formation-card:hover {
background-color: var(--wp--preset--color--tertiary-hover);
}
/* Pastilles / Badges */
.formation-card__badges {
position: absolute;
top: -20px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
z-index: 10;
}
.formation-card__tag {
background: var(--wp--preset--color--custom);
/* #9ABFF9 */
border-radius: 50px;
padding: 6px 12px;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base);
line-height: 1;
white-space: nowrap;
}
.formation-card__logos {
display: flex;
gap: 5px;
}
.formation-card__logo-img {
width: 35px;
height: 35px;
filter: drop-shadow(var(--wp--custom--effects--shadow--drop-logo));
object-fit: contain;
}
/* Thumbnail */
.formation-card__thumbnail {
width: 100%;
aspect-ratio: 37 / 20;
border-radius: var(--wp--custom--radius--base);
overflow: hidden;
margin-bottom: 0;
/* Handled by gap */
}
.formation-card__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.formation-card:hover .formation-card__thumbnail {
filter: drop-shadow(var(--wp--custom--effects--shadow--drop-thumbnail));
}
.formation-card:hover .formation-card__thumbnail img {
transform: scale(1.3);
}
/* Metadata (Lieu, Prix) */
.formation-card__meta {
display: flex;
justify-content: space-between;
margin-bottom: 0;
/* Handled by gap */
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base);
}
/* Author */
.formation-card__author {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
/* Handled by gap */
}
.formation-card__author-img {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}
.formation-card__author-name {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base);
}
/* Title & Excerpt */
.formation-card__title {
font-family: var(--wp--preset--font-family--text);
font-weight: var(--wp--custom--font-weight--bold);
font-size: var(--wp--preset--font-size--medium);
line-height: 1.3;
/* Tightened */
color: var(--wp--preset--color--base) !important;
margin-bottom: 0;
/* Handled by gap */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.formation-card__excerpt {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: 1.4;
/* Tightened */
color: var(--wp--preset--color--base-secondary);
margin-bottom: 0;
/* Handled by gap */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.formation-card:hover .formation-card__excerpt {
color: var(--wp--preset--color--base);
}
/* Footer (Link) */
.formation-card__footer {
margin-top: auto;
display: flex;
justify-content: flex-end;
}
.formation-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--wp--preset--color--primary);
font-weight: var(--wp--custom--font-weight--regular);
font-size: var(--wp--preset--font-size--base);
transition: color 0.2s ease, gap 0.2s ease;
}
.formation-card__link::before {
content: "";
width: 8.8px;
height: 6px;
background-color: currentColor;
-webkit-mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
transform: rotate(180deg);
}
.formation-card:hover .formation-card__link {
color: var(--wp--preset--color--primary-hover);
font-weight: var(--wp--custom--font-weight--semibold);
gap: 10px;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
/* Responsive */
@media screen and (max-width: 767px) {
.formation-card {
width: 100%;
max-width: var(--wp--custom--layout--max-width--card-compact);
margin: 0 auto;
}
.formation-card__thumbnail {
aspect-ratio: 37 / 20;
}
.formation-card__excerpt {
-webkit-line-clamp: 4;
}
}
/* ======================================
CARTES E-LEARNING (Dark Theme)
====================================== */
.elearning-card {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--sm);
/* Matches Figma ~10px gap */
width: 370px;
background: var(--wp--preset--color--base);
/* Fond sombre #1A2131 */
border-radius: var(--wp--custom--radius--base);
padding: var(--wp--preset--spacing--md);
box-shadow: var(--wp--preset--shadow--soft);
position: relative;
transition: background-color 0.4s ease;
text-decoration: none !important;
color: inherit !important;
box-sizing: border-box;
}
.elearning-card:hover {
background-color: var(--wp--preset--color--base-secondary);
/* Hover: #4F5E7F */
}
/* Pastilles / Badges */
.elearning-card__badges {
position: absolute;
top: -20px;
left: 0;
right: 0;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 10px;
z-index: 10;
}
.elearning-card__tag {
background: var(--wp--preset--color--custom);
/* #9ABFF9 */
border-radius: 50px;
padding: 6px 12px;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base);
line-height: 1;
white-space: nowrap;
}
.elearning-card__tag--free {
background: var(--wp--preset--color--success);
}
/* Thumbnail */
.elearning-card__thumbnail {
width: 100%;
height: 200px;
border-radius: var(--wp--custom--radius--base);
overflow: hidden;
margin-bottom: 0;
/* Handled by gap */
}
.elearning-card__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.elearning-card:hover .elearning-card__thumbnail img {
transform: scale(1.3);
}
/* Author */
.elearning-card__author {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
/* Handled by gap */
}
.elearning-card__author-img {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}
.elearning-card__author-name {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base-invert);
/* Blanc */
}
/* Title */
.elearning-card__title {
font-family: var(--wp--preset--font-family--text);
font-weight: var(--wp--custom--font-weight--bold);
font-size: var(--wp--preset--font-size--medium);
line-height: 1.3;
/* Tightened */
color: var(--wp--preset--color--custom) !important;
/* Bleu clair #9ABFF9 par défaut */
margin-bottom: 0;
/* Handled by gap */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s ease;
}
.elearning-card:hover .elearning-card__title {
color: var(--wp--preset--color--base-invert) !important;
/* Blanc au hover */
}
/* Excerpt */
.elearning-card__excerpt {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: 1.4;
/* Tightened */
color: var(--wp--preset--color--base-invert);
/* Blanc */
margin-bottom: 0;
/* Handled by gap */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Footer (Link) */
.elearning-card__footer {
margin-top: auto;
display: flex;
justify-content: flex-end;
}
.elearning-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--wp--preset--color--contrast-2);
font-weight: var(--wp--custom--font-weight--regular);
font-size: var(--wp--preset--font-size--base);
transition: color 0.2s ease, gap 0.2s ease;
text-decoration: none;
}
.elearning-card__link::before {
content: "";
width: 8.8px;
height: 6px;
background-color: currentColor;
-webkit-mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
mask: url('../icons/ic_arrow.svg') no-repeat center / contain;
transform: rotate(180deg);
}
.elearning-card:hover .elearning-card__link {
color: var(--wp--preset--color--base-invert);
font-weight: var(--wp--custom--font-weight--semibold);
gap: 10px;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
/* Responsive */
@media screen and (max-width: 767px) {
.elearning-card {
width: 100%;
max-width: var(--wp--custom--layout--max-width--card-mobile);
margin: 0 auto;
}
.elearning-card__thumbnail {
height: 150px;
}
.elearning-card__excerpt {
-webkit-line-clamp: 4;
}
}
/* ======================================
ELEARNING ARCHIVE PAGE
====================================== */
/* Main container - override WP block constraints */
.elearning-archive {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elearning-archive-page,
.elearning-archive-page .elearning-archive {
background-color: var(--wp--preset--color--base-invert);
}
.formation-archive-page,
.formation-archive-page .formation-archive {
background-color: var(--wp--preset--color--base);
}
/* Archive Wrapper */
.elearning-archive-wrapper {
width: 100%;
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
padding: 0 var(--wp--preset--spacing--lg);
box-sizing: border-box;
}
/* Mobile padding for wrapper */
@media screen and (max-width: 767px) {
.elearning-archive-wrapper {
padding: 0 var(--wp--preset--spacing--md);
}
}
/* Hero Section */
.elearning-hero {
display: flex;
align-items: center;
padding: var(--wp--preset--spacing--lg) 0;
gap: var(--wp--preset--spacing--xl);
margin-top: 10px;
/* 10px après le breadcrumb */
}
.elearning-hero__content {
flex: 0 0 50%;
display: flex;
flex-direction: column;
gap: 24px;
}
.elearning-hero__badge {
margin-bottom: 0;
}
.badge {
display: inline-flex;
align-items: center;
padding: 5px 15px;
border-radius: 50px;
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
text-transform: uppercase;
align-self: flex-start;
}
.badge--new {
background-color: transparent;
color: var(--wp--preset--color--base);
}
.elearning-hero__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h1);
font-weight: var(--wp--custom--font-weight--bold);
line-height: 1.3;
color: var(--wp--preset--color--base);
margin: 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
.elearning-hero__excerpt {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base);
}
.elearning-hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--xs);
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
height: 40px;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border: none;
border-radius: 50px;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease;
align-self: flex-start;
}
.elearning-hero__cta:hover {
background-color: var(--wp--preset--color--primary-hover);
}
.elearning-hero__visual {
flex: 0 0 50%;
position: relative;
}
.elearning-hero__image {
width: 100%;
aspect-ratio: 964 / 460;
height: auto;
border-radius: var(--wp--custom--radius--base);
overflow: hidden;
position: relative;
}
.elearning-hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.elearning-hero__instructor {
position: absolute;
bottom: var(--wp--preset--spacing--md);
right: var(--wp--preset--spacing--md);
z-index: 2;
}
.elearning-hero__instructor-img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid var(--wp--preset--color--base-invert);
object-fit: cover;
box-shadow: var(--wp--custom--effects--shadow--avatar);
}
/* Filters Section */
.elearning-filters {
padding: 0;
margin-bottom: var(--wp--preset--spacing--xl);
margin-top: var(--wp--preset--spacing--xl);
}
.elearning-filters__wrapper {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: var(--wp--preset--spacing--md);
align-items: end;
}
.elearning-filters__categories,
.elearning-filters__sort,
.elearning-filters__search {
display: flex;
flex-direction: column;
gap: 5px;
}
.elearning-filters__categories label,
.elearning-filters__sort label,
.elearning-filters__search label {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
color: var(--wp--preset--color--base);
}
.elearning-filters__search-wrapper {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.elearning-filters__search-input {
width: 337px;
max-width: 100%;
height: 40px;
padding: 5px var(--wp--preset--spacing--md);
border: none;
border-radius: 50px;
background-color: var(--wp--preset--color--base-invert);
box-shadow: var(--wp--preset--shadow--soft);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
color: var(--wp--preset--color--base);
outline: none;
box-sizing: border-box;
}
.elearning-filters__search-input::placeholder {
color: var(--wp--preset--color--base-secondary);
font-style: italic;
}
.elearning-filters__search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--xs);
height: 40px;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border: none;
border-radius: 50px;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
cursor: pointer;
transition: background-color 0.2s ease;
white-space: nowrap;
}
.elearning-filters__search-btn:hover {
background-color: var(--wp--preset--color--primary-hover);
}
/* List Header */
.elearning-list-header {
padding: 0;
margin-bottom: var(--wp--preset--spacing--lg);
}
.elearning-list-title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--xlarge);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base);
margin: 0;
}
/* Grid Section */
.elearning-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wp--preset--spacing--lg);
padding: 0;
margin-bottom: var(--wp--preset--spacing--xxl);
}
/* Promo Card Styles */
.elearning-card--promo {
background-color: var(--wp--preset--color--base-invert);
border: none;
border-radius: var(--wp--custom--radius--base);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--md);
gap: 70px;
}
.elearning-card--promo:hover {
background-color: var(--wp--preset--color--base-invert);
}
.elearning-card__promo-logo {
width: 255px;
height: 51px;
flex-shrink: 0;
}
.elearning-card__promo-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.elearning-card__promo-content {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: var(--wp--preset--spacing--lg);
width: 100%;
}
.elearning-card__promo-title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-2);
color: var(--wp--preset--color--base);
margin: 0;
}
.elearning-card__promo-text {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base);
margin: 0;
}
.elearning-card__promo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
height: 40px;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border: none;
border-radius: 50px;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: var(--wp--custom--line-height--text--base);
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.elearning-card__promo-btn:hover {
background-color: var(--wp--preset--color--primary-hover);
}
/* Load More Button */
.elearning-load-more {
display: flex;
justify-content: center;
align-items: center;
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
margin-bottom: var(--wp--preset--spacing--xxl);
}
.elearning-load-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--sm) 40px;
height: 48px;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border: none;
border-radius: 50px;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.elearning-load-more-btn:hover {
background-color: var(--wp--preset--color--primary-hover);
}
.elearning-load-more-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.elearning-load-more-btn.loading {
opacity: 0.7;
}
/* Responsive - Tablet */
@media screen and (max-width: 1024px) {
.elearning-hero {
flex-direction: column;
padding: var(--wp--preset--spacing--lg) 0;
}
.elearning-hero__content,
.elearning-hero__visual {
flex: 0 0 100%;
width: 100%;
}
/* Image en premier (au-dessus du contenu) */
.elearning-hero__visual {
order: -1;
margin-bottom: var(--wp--preset--spacing--md);
}
.elearning-filters__wrapper {
grid-template-columns: 1fr;
}
.elearning-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Responsive - Mobile */
@media screen and (max-width: 767px) {
.elearning-hero {
padding: var(--wp--preset--spacing--md) 0;
margin-bottom: var(--wp--preset--spacing--lg);
}
.elearning-hero__content,
.elearning-hero__visual {
width: 100%;
}
.elearning-hero__title {
font-size: var(--wp--preset--font-size--h2);
}
.elearning-hero__image {
width: 100%;
aspect-ratio: 964 / 460;
height: auto;
}
.elearning-hero__instructor-img {
width: 70px;
height: 70px;
border-width: 3px;
}
.elearning-filters__search-wrapper {
flex-wrap: wrap;
}
.elearning-filters__search-input {
width: 100%;
flex: 1 1 100%;
}
.elearning-filters__search-btn {
width: 100%;
justify-content: center;
}
.elearning-grid {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--md);
}
}
/* ======================================
FORMATION ARCHIVE PAGE (INVERTED)
====================================== */
.formation-archive-page .site-header-inner {
background-color: var(--wp--preset--color--base);
border-bottom-color: var(--wp--custom--effects--overlay--white-10);
}
.formation-archive-page .breadcrumb-wrapper {
background-color: var(--wp--preset--color--base);
}
.formation-archive-page .formation-archive {
color: var(--wp--preset--color--base-invert);
}
.formation-archive-page .elearning-hero__title,
.formation-archive-page .elearning-hero__excerpt,
.formation-archive-page .elearning-list-title,
.formation-archive-page .elearning-filters__categories label,
.formation-archive-page .elearning-filters__sort label,
.formation-archive-page .elearning-filters__search label {
color: var(--wp--preset--color--base-invert);
}
.formation-archive-page .badge--session {
background-color: var(--wp--preset--color--custom);
color: var(--wp--preset--color--base);
}
.formation-hero__meta {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--md);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base-invert);
}
.formation-archive-page .formation-hero__image {
aspect-ratio: 37 / 20;
height: auto;
}
.formation-archive-page .formation-hero__image img {
object-fit: contain;
background-color: var(--wp--preset--color--base-secondary);
}
.formation-archive-page .form-select,
.formation-archive-page .elearning-filters__search-input {
background-color: var(--wp--preset--color--base-secondary);
color: var(--wp--preset--color--base-invert);
border: 1px solid var(--wp--custom--effects--overlay--white-12);
box-shadow: none;
}
.formation-archive-page .form-select {
background-image: none;
font-style: normal;
}
.formation-archive-page .elearning-filters__search-input::placeholder {
color: var(--wp--custom--effects--overlay--white-70);
}
.formation-archive-page .form-select option {
color: var(--wp--preset--color--base-invert);
background-color: var(--wp--preset--color--base-secondary);
}
.formation-no-results {
color: var(--wp--preset--color--base-invert);
margin: 0;
padding: var(--wp--preset--spacing--xl) 0;
}
@media screen and (max-width: 767px) {
.formation-hero__meta {
flex-wrap: wrap;
gap: var(--wp--preset--spacing--xs);
}
}
/* ======================================
BLOC DE CONTENU
====================================== */
.content-bloc {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--wp--custom--layout--max-width--content-bloc);
border: 1px solid var(--wp--preset--color--base-invert);
border-radius: var(--wp--custom--radius--base);
box-shadow: var(--wp--preset--shadow--soft);
transition: background-color 0.3s ease;
text-decoration: none !important;
overflow: hidden;
padding: var(--wp--preset--spacing--lg);
box-sizing: border-box;
}
.content-bloc:hover {
background-color: var(--wp--preset--color--tertiary-hover);
/* #E6F0FF */
border-color: transparent;
}
/* Image */
.content-bloc__image {
width: 100%;
height: 200px;
overflow: hidden;
border-radius: var(--wp--custom--radius--base);
margin-bottom: var(--wp--preset--spacing--md);
}
.content-bloc__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
display: block;
}
.content-bloc:hover .content-bloc__image img {
transform: scale(var(--wp--custom--transform--hover-scale));
}
/* Content */
.content-bloc__content {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--md);
}
/* Title */
.content-bloc__title {
font-family: var(--wp--preset--font-family--title);
font-weight: var(--wp--custom--font-weight--bold);
font-size: var(--wp--preset--font-size--large);
line-height: var(--wp--custom--line-height--text--large);
color: var(--wp--preset--color--custom) !important;
/* Bleu clair #9ABFF9 */
margin: 0;
transition: color 0.3s ease;
}
.content-bloc:hover .content-bloc__title {
color: var(--wp--preset--color--base) !important;
/* Sombre #1A2131 */
}
/* Description */
.content-bloc__description {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
/* Blanc */
margin: 0;
transition: color 0.3s ease;
}
.content-bloc:hover .content-bloc__description {
color: var(--wp--preset--color--base-secondary);
/* Gris #4F5E7F */
}
/* Button (Secondary style) */
.content-bloc__button {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--primary);
border-radius: var(--wp--custom--radius--large);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: var(--wp--custom--line-height--text--base);
text-decoration: none;
transition: background-color 0.3s ease;
}
.content-bloc__button:hover,
.content-bloc:hover .content-bloc__button {
background-color: var(--wp--preset--color--secondary-hover);
/* #FCD7E3 */
}
.content-bloc__button:active,
.content-bloc:active .content-bloc__button {
background-color: var(--wp--preset--color--secondary-actif);
/* #F8B5CB */
}
/* Responsive */
@media screen and (max-width: 767px) {
.content-bloc {
width: 100%;
padding: var(--wp--preset--spacing--md);
}
.content-bloc__image {
height: 200px;
}
}
/* ======================================
PAGE D'ACCUEIL - HERO BANNER
====================================== */
.home-hero {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
}
.home-hero__background {
position: absolute;
inset: 0;
z-index: 0;
}
.home-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(26, 33, 49, 0) 0%, var(--wp--preset--color--base) 100%);
}
.home-hero__content {
position: relative;
z-index: 1;
max-width: var(--wp--style--global--wide-size, 87.5rem);
width: 100%;
margin: var(--wp--preset--spacing--xxl) auto;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.home-hero__content-wrapper {
max-width: 50%;
}
.home-hero__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h1);
font-weight: var(--wp--custom--font-weight--bold);
line-height: 1.2;
color: var(--wp--preset--color--base-invert);
margin: 0 0 var(--wp--preset--spacing--xl) 0;
}
.home-hero__subtitle {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
margin: 0 0 var(--wp--preset--spacing--lg) 0;
max-width: var(--wp--custom--layout--max-width--hero-subtitle);
}
.home-hero__buttons {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--md);
}
/* Normalize CTA sizing on Home sections rendered by shortcodes */
.home-hero__buttons .wp-block-button__link,
.home-offers .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 var(--wp--preset--spacing--md);
box-sizing: border-box;
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
text-decoration: none;
}
.home-hero__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
border-radius: var(--wp--custom--radius--large);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: none;
transition: all 0.2s ease;
}
.home-hero__btn--primary {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border: none;
}
.home-hero__btn--primary:hover {
background-color: var(--wp--preset--color--primary-hover);
}
.home-hero__btn--secondary {
background-color: transparent;
color: var(--wp--preset--color--base-invert);
border: 1px solid var(--wp--preset--color--base-invert);
}
.home-hero__btn--secondary:hover {
background-color: var(--wp--custom--effects--overlay--white-10);
}
/* Hero Responsive */
@media screen and (max-width: 767px) {
.home-hero {
min-height: 500px;
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
justify-content: center;
}
.home-hero__content {
max-width: 100%;
margin: var(--wp--preset--spacing--xl) auto;
}
.home-hero__content-wrapper {
max-width: 100%;
width: 100%;
}
.home-hero__title {
font-size: var(--wp--preset--font-size--h2);
}
.home-hero__buttons {
flex-direction: column;
width: 100%;
align-items: stretch;
}
.home-hero__buttons .wp-block-button,
.home-hero__buttons .wp-block-button__link {
width: 100%;
max-width: 100%;
justify-content: center;
}
.home-hero__buttons .wp-block-button {
margin: 0;
}
.home-hero__buttons .wp-block-button__link {
display: inline-flex;
align-items: center;
box-sizing: border-box;
white-space: nowrap;
font-size: clamp(0.85rem, 3.6vw, 0.95rem);
line-height: 1.2;
min-height: 48px;
padding: 0 14px;
}
}
/* ======================================
PAGE D'ACCUEIL - NOS OFFRES
====================================== */
.home-offers {
padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--lg);
background-color: var(--wp--preset--color--base);
}
.home-offers__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base-invert);
margin: 0 0 var(--wp--preset--spacing--xl) 0;
text-align: center;
}
.home-offers__title--full {
grid-column: 1 / -1;
text-align: left;
margin-bottom: 0;
}
.home-offers__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--wp--preset--spacing--lg);
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.home-offers .content-bloc {
width: 100%;
}
.home-offers .content-bloc__content {
flex: 1;
}
.home-offers .content-bloc__description {
flex: 1;
}
.home-offers .content-bloc__content .wp-block-button {
margin-top: auto;
}
/* Responsive Nos offres */
@media screen and (max-width: 767px) {
.home-offers {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
}
.home-offers__grid {
grid-template-columns: 1fr;
}
}
/* ======================================
PAGE D'ACCUEIL - FORMATIONS SLIDER
====================================== */
.home-formations {
padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--lg);
background-color: var(--wp--preset--color--base);
}
.home-formations__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base-invert);
margin: 0 auto var(--wp--preset--spacing--md) auto;
max-width: var(--wp--style--global--wide-size, 87.5rem);
text-align: left;
padding-top: var(--wp--preset--spacing--xl);
}
.home-formations__slider {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
overflow: hidden;
}
.home-formations__cta br,
.home-elearnings__cta br {
display: none;
}
.home-formations__track {
display: flex;
gap: var(--wp--preset--spacing--lg);
padding: var(--wp--preset--spacing--lg) 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.home-formations__track::-webkit-scrollbar {
display: none;
}
.home-formations__track .formation-card {
flex: 0 0 370px;
scroll-snap-align: start;
}
.home-formations__footer {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: var(--wp--preset--spacing--lg) auto 0;
padding-top: var(--wp--preset--spacing--md);
}
.home-formations__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border-radius: var(--wp--custom--radius--large);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: none;
transition: background-color 0.2s ease;
}
.home-formations__cta:hover {
background-color: var(--wp--preset--color--primary-hover);
}
/* Responsive Formations */
@media screen and (max-width: 767px) {
.home-formations {
padding: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--xl) var(--wp--preset--spacing--sm);
}
.home-formations__title {
padding-left: var(--wp--preset--spacing--sm);
/* "Marge" effect */
}
.home-formations__track .formation-card {
flex: 0 0 290px;
}
.home-formations__footer {
flex-direction: column-reverse;
gap: var(--wp--preset--spacing--sm);
margin-top: 0;
padding-top: 0;
}
.home-formations__footer p {
display: contents;
}
.home-formations__track {
padding-bottom: 0;
}
.slider-nav {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.slider-arrow {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
flex-shrink: 0;
}
}
/* ======================================
PAGE D'ACCUEIL - E-LEARNINGS SLIDER
====================================== */
.home-elearnings {
padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--lg);
background-color: var(--wp--preset--color--base-invert);
}
.home-elearnings__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base);
margin: 0 auto var(--wp--preset--spacing--md) auto;
max-width: var(--wp--style--global--wide-size, 87.5rem);
text-align: left;
padding-top: var(--wp--preset--spacing--xl);
}
.home-elearnings__subtitle {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-secondary);
margin: 0 auto;
max-width: var(--wp--style--global--wide-size, 87.5rem);
text-align: left;
}
.home-elearnings__slider {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
overflow: hidden;
}
.home-elearnings__track {
display: flex;
gap: var(--wp--preset--spacing--lg);
padding: var(--wp--preset--spacing--lg) 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.home-elearnings__track::-webkit-scrollbar {
display: none;
}
.home-elearnings__track .elearning-card {
flex: 0 0 370px;
scroll-snap-align: start;
}
.home-elearnings__footer {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: var(--wp--preset--spacing--lg) auto 0;
padding-top: var(--wp--preset--spacing--md);
}
.home-elearnings__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border-radius: var(--wp--custom--radius--large);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: none;
transition: background-color 0.2s ease;
}
.home-elearnings__cta:hover {
background-color: var(--wp--preset--color--primary-hover);
}
/* Responsive E-learnings */
@media screen and (max-width: 767px) {
.home-elearnings {
padding: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--xl) var(--wp--preset--spacing--sm);
}
.home-elearnings__title,
.home-elearnings__subtitle {
padding-left: var(--wp--preset--spacing--sm);
}
.home-elearnings__track .elearning-card {
flex: 0 0 290px;
}
.home-elearnings__footer {
flex-direction: column-reverse;
gap: var(--wp--preset--spacing--sm);
margin-top: 0;
padding-top: 0;
}
.home-elearnings__footer p {
display: contents;
}
.home-elearnings__track {
padding-bottom: 0;
}
}
/* ======================================
PAGE D'ACCUEIL - CHIFFRES CLÉS
====================================== */
.home-key-figures {
display: flex;
justify-content: center;
align-items: stretch;
gap: 0;
background-color: var(--wp--preset--color--base-invert);
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
margin-top: 0 !important;
}
.home-key-figures__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--xs);
padding: var(--wp--preset--spacing--lg);
text-align: center;
border-right: 1px solid var(--wp--preset--color--surface-secondary);
}
.home-key-figures__item:last-child {
border-right: none;
}
.home-key-figures__number {
font-family: var(--wp--preset--font-family--title);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--primary);
line-height: 1;
}
.home-key-figures__label {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
color: var(--wp--preset--color--base);
}
/* Responsive Chiffres clés */
@media screen and (max-width: 767px) {
.home-key-figures {
flex-direction: column;
gap: var(--wp--preset--spacing--md);
}
.home-key-figures__item {
border-right: none;
border-bottom: 1px solid var(--wp--preset--color--surface-secondary);
padding: var(--wp--preset--spacing--md);
}
.home-key-figures__item:last-child {
border-bottom: none;
}
}
/* ======================================
PAGE D'ACCUEIL - NOS VALEURS
====================================== */
.home-values {
width: 100%;
margin: 0 !important;
/* Force no margin */
padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--lg);
padding-bottom: var(--wp--preset--spacing--2xl);
/* Espace avant le footer */
background-color: var(--wp--preset--color--base-invert);
}
.home-values__container {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--xxl);
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.home-values__content {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--lg);
}
.home-values__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base);
margin: 0;
}
.home-values__description {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-secondary);
margin: 0;
}
.home-values__cta {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border-radius: var(--wp--custom--radius--large);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: none;
transition: background-color 0.2s ease;
}
.home-values__cta:hover {
background-color: var(--wp--preset--color--primary-hover);
}
.home-values__visual {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.home-values__canvas-container {
width: 100%;
height: 100%;
min-height: 25rem;
position: relative;
}
.home-values__illustration {
width: 100%;
max-width: var(--wp--custom--layout--max-width--values-illustration);
height: 350px;
background: linear-gradient(135deg, var(--wp--preset--color--tertiary-hover) 0%, var(--wp--preset--color--custom) 100%);
border-radius: var(--wp--custom--radius--base);
/* Placeholder - remplacer par une vraie image ou illustration */
}
/* Responsive Nos valeurs */
@media screen and (max-width: 1024px) {
.home-values__container {
flex-direction: column;
text-align: left;
gap: var(--wp--preset--spacing--xl);
padding-left: var(--wp--preset--spacing--sm);
/* Align with others */
}
.home-values__content {
align-items: flex-start;
width: 100%;
}
.home-values__visual {
width: 100%;
min-height: 300px;
}
.home-values__cta {
align-self: flex-start;
}
}
@media screen and (max-width: 767px) {
.home-values {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
/* Reduced padding */
padding-bottom: var(--wp--preset--spacing--lg);
max-width: 100vw;
box-sizing: border-box;
}
.home-values__description {
text-align: justify;
/* Better text flow on mobile */
}
.home-values__visual {
display: none;
}
#canvas-container {
min-height: 0 !important;
}
}
/* ======================================
PAGE D'ACCUEIL - PARTENAIRES
====================================== */
.home-partners {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
background-color: var(--wp--preset--color--base-invert);
}
.home-partners__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base);
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto var(--wp--preset--spacing--xl) auto;
text-align: left;
}
.home-partners__grid {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--xl);
max-width: var(--wp--style--global--content-size, 75rem);
margin: 0 auto;
}
.home-partners__item {
padding: var(--wp--preset--spacing--md);
}
.home-partners__logo {
max-width: var(--wp--custom--layout--max-width--partner-logo);
height: auto;
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.3s ease;
}
.home-partners__item:hover .home-partners__logo {
filter: grayscale(0%);
opacity: 1;
}
@keyframes homePartnersMarquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(calc(-1 * var(--home-partners-marquee-shift, 0px)), 0, 0);
}
}
.home-partners--ticker .home-partners__viewport {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
overflow: hidden;
}
.home-partners--ticker .home-partners__grid {
flex-wrap: nowrap;
width: max-content;
max-width: none;
margin: 0 auto;
}
.home-partners--ticker .home-partners__item {
flex: 0 0 auto;
}
.home-partners--ticker.is-marquee-active .home-partners__grid {
justify-content: flex-start;
margin: 0;
animation: homePartnersMarquee var(--home-partners-marquee-duration, 40s) linear infinite;
}
.home-partners--ticker.is-marquee-paused .home-partners__grid {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.home-partners--ticker.is-marquee-active .home-partners__grid {
animation: none;
transform: none;
}
}
/* Responsive Partenaires */
@media screen and (max-width: 767px) {
.home-partners {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
}
.home-partners__grid {
gap: var(--wp--preset--spacing--md);
}
.home-partners__logo {
max-width: var(--wp--custom--layout--max-width--partner-logo-mobile);
}
}
/* ======================================
PAGE NOS PARTENAIRES
====================================== */
.partners-page {
background-color: var(--wp--preset--color--base);
}
.partners-page .site-header-inner {
background-color: var(--wp--preset--color--base);
}
.partners-page .breadcrumb-wrapper {
background-color: var(--wp--preset--color--base);
}
.partners-page .breadcrumb__link,
.partners-page .breadcrumb__separator,
.partners-page .breadcrumb__current {
color: var(--wp--preset--color--base-invert);
}
.partners-page .breadcrumb__link:hover {
color: var(--wp--preset--color--primary);
}
.partners-page .home-partners {
background-color: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--base);
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
}
.partners-hero {
padding: var(--wp--preset--spacing--xl);
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--base-invert);
}
.partners-hero__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
text-align: left;
}
.partners-hero__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h1);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-1);
color: var(--wp--preset--color--base-invert);
margin: 0 0 var(--wp--preset--spacing--md) 0;
}
.partners-hero__subtitle {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--large);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--large);
color: var(--wp--preset--color--base-invert);
margin: 0;
opacity: 0.9;
}
.partners-grid-section {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
background-color: var(--wp--preset--color--base);
}
.partners-grid-section__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.partners-grid-section__title {
margin: 0 0 var(--wp--preset--spacing--lg);
color: var(--wp--preset--color--base-invert);
}
.partners-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--xl);
justify-items: center;
}
.partners-empty {
text-align: center;
padding: var(--wp--preset--spacing--2xl) 0;
}
.partners-empty p {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--base-secondary);
margin: 0;
}
.partner-card__link {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--2xs);
margin-top: var(--wp--preset--spacing--sm);
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
text-decoration: none;
border-radius: var(--wp--custom--radius--base);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--semibold);
transition: all 0.2s ease;
}
.partner-card__link:hover {
background-color: var(--wp--preset--color--primary-hover);
transform: translateY(-1px);
}
.partner-card__logo-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: var(--wp--preset--color--surface-secondary);
border-radius: var(--wp--custom--radius--base);
}
.partner-card__logo-placeholder span {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--large);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base-secondary);
text-align: center;
}
/* Responsive */
@media screen and (max-width: 1024px) {
.partners-grid {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--lg);
}
.partners-hero {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}
.partners-grid-section {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
}
}
@media screen and (max-width: 767px) {
.partners-hero {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}
.partners-grid-section {
padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
}
.partners-hero__title {
font-size: var(--wp--preset--font-size--h2);
}
.partners-hero__subtitle {
font-size: var(--wp--preset--font-size--base);
}
.partners-grid {
gap: var(--wp--preset--spacing--md);
}
}
.partners-spacer {
padding: var(--wp--preset--spacing--xl) 0;
background-color: var(--wp--preset--color--base);
}
.partners-spacer__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
/* ======================================
PAGE LE PROJET
====================================== */
/* Force header background color for project page */
.project-page--full-header-bg .site-header-inner {
background-color: var(--wp--preset--color--base) !important;
}
/* Le Projet: breadcrumb on base background */
.project-page .breadcrumb-wrapper {
background-color: var(--wp--preset--color--base);
}
.project-page .breadcrumb__link,
.project-page .breadcrumb__separator,
.project-page .breadcrumb__current {
color: var(--wp--preset--color--base-invert);
}
.project-page .breadcrumb__link:hover {
color: var(--wp--preset--color--primary);
}
/* Hero Section */
.project-page .project-hero {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl);
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--base-invert);
}
.project-page .project-hero__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
padding: 0 var(--wp--preset--spacing--xl);
}
.project-page .project-hero__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h1);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-1);
margin: 0 0 var(--wp--preset--spacing--md) 0;
color: var(--wp--preset--color--base-invert);
}
.project-page .project-hero__subtitle {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
margin: 0;
color: var(--wp--preset--color--base-invert);
}
/* Project Sections */
.project-section {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
background-color: var(--wp--preset--color--base);
}
.project-section__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--wp--preset--spacing--2xl);
align-items: center;
position: relative;
}
/* Ligne centrale animée (desktop only) */
.project-story {
position: relative;
}
.project-story__line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
transform: translateX(-50%);
pointer-events: none;
z-index: 0;
--project-line-soft-edge: 14px;
}
.project-story__line-track,
.project-story__line-progress {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.project-story__line-track {
background-color: rgb(255 255 255 / 0.14);
border-radius: 999px;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0,
#000 var(--project-line-soft-edge),
#000 calc(100% - var(--project-line-soft-edge)),
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0,
#000 var(--project-line-soft-edge),
#000 calc(100% - var(--project-line-soft-edge)),
transparent 100%
);
}
.project-story__line-progress {
background: linear-gradient(
to bottom,
var(--wp--preset--color--tertiary-hover) 0%,
var(--wp--preset--color--tertiary) 45%,
var(--wp--preset--color--primary) 100%
);
transform-origin: top center;
transform: scaleY(var(--project-line-progress, 0));
will-change: transform;
transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
border-radius: 999px;
box-shadow:
0 0 10px rgb(210 20 82 / 0.45),
0 0 18px rgb(105 130 170 / 0.35);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0,
#000 var(--project-line-soft-edge),
#000 calc(100% - var(--project-line-soft-edge)),
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0,
#000 var(--project-line-soft-edge),
#000 calc(100% - var(--project-line-soft-edge)),
transparent 100%
);
}
.project-story__line-progress::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 999px;
background: inherit;
filter: blur(6px);
opacity: 0.65;
pointer-events: none;
z-index: -1;
}
/* Points décoratifs */
.project-section--text-left .project-section__container::before {
display: none;
}
.project-section__content {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--md);
color: var(--wp--preset--color--base-invert);
position: relative;
z-index: 1;
}
.project-section__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-2);
margin: 0;
color: var(--wp--preset--color--base-invert);
}
.project-section__text {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
}
.project-section__text p {
margin: 0 0 var(--wp--preset--spacing--base) 0;
text-align: justify;
}
.project-section__text p:last-child {
margin-bottom: 0;
}
.project-section__visual {
display: flex;
align-items: center;
justify-content: center;
min-height: 500px;
position: relative;
z-index: 1;
}
.project-section__logo {
width: 270px;
height: 270px;
display: flex;
align-items: center;
justify-content: center;
}
.project-section__logo img {
max-width: 100%;
height: auto;
object-fit: contain;
}
/* Liste avec icônes */
.project-list {
list-style: none;
padding: 0;
margin: var(--wp--preset--spacing--md) 0;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--md);
}
.project-list li {
display: flex;
gap: var(--wp--preset--spacing--sm);
align-items: flex-start;
text-align: justify;
}
.project-list__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 2px;
color: var(--wp--preset--color--base-invert);
}
.project-list li span {
flex: 1;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
}
/* Ordre inversé pour section text-right */
.project-section--text-right .project-section__container {
grid-template-columns: 1fr 1fr;
}
.project-section--text-right .project-section__visual {
order: -1;
}
/* Espace visuel autour de la ligne centrale */
.project-section--text-left .project-section__content {
padding-right: var(--wp--preset--spacing--xl);
}
.project-section--text-right .project-section__content {
padding-left: var(--wp--preset--spacing--xl);
}
/* CTA Buttons Section */
.project-cta-buttons {
display: flex;
gap: var(--wp--preset--spacing--md);
justify-content: center;
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl);
background-color: var(--wp--preset--color--base);
}
/* Spacer section pour espacer avec le footer */
.project-spacer {
background-color: var(--wp--preset--color--base);
padding: var(--wp--preset--spacing--xl) 0;
}
.project-spacer__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
padding: 0 var(--wp--preset--spacing--xl);
}
/* Responsive */
@media screen and (max-width: 1024px) {
.project-section__container {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--xl);
}
.project-section--text-right .project-section__container {
grid-template-columns: 1fr;
}
.project-story__line {
display: none;
}
.project-section--text-left .project-section__container::before {
display: none;
}
.project-section--text-right .project-section__visual {
order: 0;
}
.project-section__visual {
min-height: 300px;
}
}
@media screen and (max-width: 767px) {
.project-page .project-hero {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
.project-page .project-hero__container {
padding: 0;
}
.project-section {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
.project-section__container {
grid-template-columns: minmax(0, 1fr);
padding: var(--wp--preset--spacing--md) 0;
gap: var(--wp--preset--spacing--lg);
}
.project-section--text-right .project-section__container {
grid-template-columns: minmax(0, 1fr);
}
.project-section__content,
.project-section--text-left .project-section__content,
.project-section--text-right .project-section__content {
padding-left: 0;
padding-right: 0;
}
.project-section__logo {
width: 200px;
height: 200px;
}
.project-cta-buttons {
flex-direction: column;
align-items: stretch;
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
.project-cta-buttons .wp-block-button {
width: 100%;
}
.project-cta-buttons .wp-block-button__link {
width: 100%;
text-align: center;
}
.project-spacer {
padding: var(--wp--preset--spacing--xl) 0;
}
}
/* ======================================
PAGE EQUIPE
====================================== */
.team-page {
background-color: var(--wp--preset--color--base);
}
.team-page--full-header-bg .site-header-inner {
background-color: var(--wp--preset--color--base) !important;
}
.team-page .breadcrumb-wrapper {
background-color: var(--wp--preset--color--base);
}
.team-page .breadcrumb__link,
.team-page .breadcrumb__separator,
.team-page .breadcrumb__current {
color: var(--wp--preset--color--base-invert);
}
.team-page .breadcrumb__link:hover {
color: var(--wp--preset--color--primary);
}
.team-page-main {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--base-invert);
padding-bottom: var(--wp--preset--spacing--2xl);
}
.team-page-hero {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
background-color: var(--wp--preset--color--base);
}
.team-page-hero__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.team-page-hero__title {
margin: 0;
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h1);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-1);
color: var(--wp--preset--color--base-invert);
}
.team-page-section {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
background-color: var(--wp--preset--color--base);
}
.team-page-section__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.team-page-section__title {
margin: 0 0 var(--wp--preset--spacing--lg) 0;
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-2);
color: var(--wp--preset--color--base-invert);
}
.team-page-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wp--preset--spacing--lg);
justify-items: center;
}
.team-page-grid .team-card {
width: 100%;
max-width: 26.25rem;
}
.team-card--contact {
background-color: var(--wp--preset--color--base);
}
.team-page-grid .team-card--contact.team-card--contact-full-row {
grid-column: 1 / -1;
max-width: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
gap: var(--wp--preset--spacing--lg);
padding: var(--wp--preset--spacing--md);
}
.team-card__image--contact {
height: 12.5rem;
background-color: var(--wp--preset--color--base);
display: flex;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--md);
}
.team-card__image--contact::after {
display: none;
}
.team-card__image--contact img {
width: 100%;
max-width: 15.9375rem;
height: auto;
object-fit: contain;
}
.team-card__contact-content {
display: flex;
flex-direction: column;
flex: 1;
gap: var(--wp--preset--spacing--sm);
padding: var(--wp--preset--spacing--md);
color: var(--wp--preset--color--base-invert);
}
.team-card__contact-title {
margin: 0;
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--medium);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--text--medium);
color: var(--wp--preset--color--base-invert);
}
.team-card__contact-description {
margin: 0;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: var(--wp--custom--line-height--text--small);
color: var(--wp--preset--color--base-invert);
}
.team-card__contact-content .wp-block-button {
margin-top: auto;
}
.team-card__contact-content .wp-block-button__link {
width: 100%;
text-align: center;
}
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__image--contact {
height: 100%;
min-height: 11rem;
padding: var(--wp--preset--spacing--sm);
}
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__contact-content {
grid-column: 2 / 4;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: center;
column-gap: var(--wp--preset--spacing--lg);
row-gap: var(--wp--preset--spacing--xs);
padding: 0;
}
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__contact-title,
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__contact-description {
grid-column: 1;
}
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__contact-content .wp-block-button {
grid-column: 2;
grid-row: 1 / span 2;
margin: 0;
justify-self: end;
align-self: center;
}
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__contact-content .wp-block-button__link {
width: auto;
min-width: 14rem;
white-space: nowrap;
}
.team-page-empty {
margin: 0;
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
}
.team-page-section--correspondants {
margin-top: var(--wp--preset--spacing--xl);
}
.team-page-section--correspondants .team-page-section__container {
background-color: var(--wp--preset--color--base-invert);
border-radius: var(--wp--custom--radius--base);
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
}
.team-page-section--correspondants .team-page-section__title {
color: var(--wp--preset--color--base);
}
.team-page-section--correspondants .team-card {
background-color: var(--wp--preset--color--base-invert);
border: 1px solid var(--wp--custom--effects--overlay--white-10);
color: var(--wp--preset--color--base);
}
.team-page-section--correspondants .team-card__name {
color: var(--wp--preset--color--base);
}
.team-page-section--correspondants .team-card__role {
color: var(--wp--preset--color--custom);
}
.team-page-section--correspondants .team-card__description p {
color: var(--wp--preset--color--base);
}
.team-page-section--correspondants .team-card__social {
border-color: var(--wp--custom--effects--overlay--white-10);
}
.team-page-section--correspondants .team-page-empty {
color: var(--wp--preset--color--base);
}
@media screen and (max-width: 1024px) {
.team-page-hero,
.team-page-section {
padding-left: var(--wp--preset--spacing--md);
padding-right: var(--wp--preset--spacing--md);
}
}
@media screen and (max-width: 767px) {
.team-page-hero {
padding-top: var(--wp--preset--spacing--lg);
padding-bottom: var(--wp--preset--spacing--md);
padding-left: var(--wp--preset--spacing--sm);
padding-right: var(--wp--preset--spacing--sm);
}
.team-page-section {
padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
}
.team-page-grid {
grid-template-columns: 1fr;
}
.team-page-grid .team-card--contact.team-card--contact-full-row {
grid-column: auto;
grid-template-columns: 1fr;
gap: 0;
padding: 0;
}
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__image--contact {
min-height: 0;
padding: var(--wp--preset--spacing--md);
}
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__contact-content {
grid-column: auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--wp--preset--spacing--sm);
padding: var(--wp--preset--spacing--md);
}
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__contact-content .wp-block-button {
grid-column: auto;
grid-row: auto;
margin-top: auto;
justify-self: auto;
align-self: auto;
}
.team-page-grid .team-card--contact.team-card--contact-full-row .team-card__contact-content .wp-block-button__link {
width: 100%;
min-width: 0;
white-space: normal;
}
.team-page-section--correspondants {
margin-top: var(--wp--preset--spacing--lg);
}
.team-page-section--correspondants .team-page-section__container {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
}
/* ======================================
PAGE CONTACT
====================================== */
.contact-page {
background-color: var(--wp--preset--color--base);
}
.contact-page--full-header-bg .site-header-inner {
background-color: var(--wp--preset--color--base) !important;
}
.contact-page .breadcrumb-wrapper {
background-color: var(--wp--preset--color--base);
}
.contact-page .breadcrumb__link,
.contact-page .breadcrumb__separator,
.contact-page .breadcrumb__current {
color: var(--wp--preset--color--base-invert);
}
.contact-page .breadcrumb__link:hover {
color: var(--wp--preset--color--primary);
}
.contact-main {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--base-invert);
padding-bottom: var(--wp--preset--spacing--2xl);
}
.contact-section {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--2xl);
}
.contact-section__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.contact-section__title {
margin: 0 0 var(--wp--preset--spacing--md) 0;
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h1);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--title--h-1);
color: var(--wp--preset--color--base-invert);
}
.contact-section__intro {
margin: 0;
max-width: 72rem;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
}
.contact-section__intro + .contact-section__intro {
margin-top: var(--wp--preset--spacing--2xs);
}
.contact-section__intro a {
color: var(--wp--preset--color--secondary-hover);
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-form {
margin-top: var(--wp--preset--spacing--lg);
padding-bottom: var(--wp--preset--spacing--lg);
}
.contact-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-form__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--md);
padding: var(--wp--preset--spacing--xs) 0;
border-top: 1px solid var(--wp--preset--color--tertiary);
border-bottom: 1px solid var(--wp--preset--color--tertiary);
}
.contact-form__header-title {
margin: 0;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--small);
color: var(--wp--preset--color--base-invert);
}
.contact-form__header-required {
margin: 0;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--xsmall);
color: var(--wp--preset--color--base-invert);
}
.contact-form__grid {
margin-top: var(--wp--preset--spacing--lg);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--wp--preset--spacing--lg);
row-gap: var(--wp--preset--spacing--md);
}
.contact-form .form-field {
max-width: none;
}
.contact-form .form-field__wrapper {
width: 100%;
}
.contact-form .form-input {
width: 100%;
max-width: none;
}
.contact-form .form-field__hint {
line-height: var(--wp--custom--line-height--text--small);
}
.contact-form .form-field--full {
margin-top: var(--wp--preset--spacing--md);
max-width: none;
}
.contact-form__textarea {
min-height: 7.5rem;
height: auto;
border-radius: var(--wp--custom--radius--base);
padding-top: var(--wp--preset--spacing--sm);
padding-bottom: var(--wp--preset--spacing--sm);
resize: vertical;
font-style: normal;
}
.contact-form__consents {
margin-top: var(--wp--preset--spacing--md);
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xs);
}
.contact-form__consent {
display: flex;
align-items: flex-start;
gap: var(--wp--preset--spacing--xs);
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
line-height: var(--wp--custom--line-height--text--base);
}
.contact-form__consent input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
}
.contact-form__consent a {
color: var(--wp--preset--color--secondary-hover);
text-decoration: underline;
text-underline-offset: 2px;
}
.contact-form__actions {
margin-top: var(--wp--preset--spacing--lg);
display: flex;
justify-content: center;
}
.contact-form__actions .wp-block-button {
margin: 0;
}
.contact-form__submit {
min-width: 9.375rem;
min-height: 2.0625rem;
border: none;
}
.contact-form__submit:disabled {
background-color: var(--wp--preset--color--tertiary) !important;
color: var(--wp--preset--color--base-invert) !important;
cursor: not-allowed;
}
.contact-form__feedback {
margin: var(--wp--preset--spacing--md) 0 0 0;
color: var(--wp--preset--color--secondary-hover);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: var(--wp--custom--line-height--text--small);
}
.contact-form__success {
margin-top: var(--wp--preset--spacing--lg);
width: 100%;
}
.contact-form__success[hidden],
.contact-form__feedback[hidden],
.notification-success[hidden] {
display: none !important;
}
.contact-form--fluent .fluentform {
margin-top: var(--wp--preset--spacing--lg);
}
.contact-form--fluent .ff-el-group {
margin-bottom: var(--wp--preset--spacing--sm);
}
.contact-form--fluent .ff-el-input--label label,
.contact-form--fluent .ff-el-input--label {
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--semibold);
}
.contact-form--fluent .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.contact-form--fluent .ff-el-input--label.asterisk-right .ff-el-is-required::after {
color: var(--wp--preset--color--primary);
}
.contact-form--fluent :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
width: 100%;
border: 1px solid transparent !important;
border-radius: 999px !important;
background: #f3f4f7 !important;
color: var(--wp--preset--color--base) !important;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: 1.4;
padding: 0.68rem 0.9rem;
}
.contact-form--fluent textarea.ff-el-form-control {
border-radius: var(--wp--custom--radius--base) !important;
min-height: 120px;
resize: vertical;
}
.contact-form--fluent .ff-el-group textarea.ff-el-form-control,
.contact-form--fluent .ff-el-input--content textarea.ff-el-form-control {
border-radius: var(--wp--custom--radius--base) !important;
}
.contact-form--fluent textarea[name="description"] {
border-radius: var(--wp--custom--radius--base) !important;
}
.contact-form--fluent :is(select, input, textarea)::placeholder {
color: #7f8ca3;
}
.contact-form--fluent :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea):focus {
border-color: rgb(210 20 82 / 0.65);
box-shadow: 0 0 0 3px rgb(210 20 82 / 0.15);
outline: none;
}
.contact-form--fluent .ff-el-form-check-label {
display: flex;
align-items: flex-start;
gap: 0.55rem;
}
.contact-form--fluent .ff_t_c,
.contact-form--fluent .ff-el-form-check-label {
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: 1.45;
}
.contact-form--fluent .ff-el-form-check-input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: var(--wp--custom--radius--small);
border: 1px solid var(--wp--preset--color--base-invert) !important;
background-color: transparent !important;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
vertical-align: middle;
}
.contact-form--fluent .ff-el-form-check-input[type="checkbox"]:hover {
background-color: var(--wp--preset--color--primary) !important;
border-color: transparent !important;
}
.contact-form--fluent .ff-el-form-check-input[type="checkbox"]::after {
content: "";
width: 10px;
height: 8px;
background-color: var(--wp--preset--color--base-invert);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transform: scale(0);
transition: transform 0.15s ease;
}
.contact-form--fluent .ff-el-form-check-input[type="checkbox"]:checked {
background-color: var(--wp--preset--color--primary) !important;
border-color: var(--wp--preset--color--primary) !important;
}
.contact-form--fluent .ff-el-form-check-input[type="checkbox"]:checked::after {
transform: scale(1);
}
.contact-form--fluent .ff_submit_btn_wrapper {
margin-top: var(--wp--preset--spacing--lg);
display: flex;
justify-content: center;
}
.contact-form--fluent .ff-btn-submit,
.contact-form--fluent .ff-btn {
appearance: none;
border: 1px solid transparent;
border-radius: var(--wp--custom--radius--large);
background: var(--wp--preset--color--primary) !important;
color: var(--wp--preset--color--base-invert) !important;
cursor: pointer;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--bold);
line-height: 1.1;
padding: 0.78rem 1.1rem;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
min-width: 18rem;
min-height: 2.75rem;
}
.contact-form--fluent .ff-btn-submit:hover,
.contact-form--fluent .ff-btn:hover {
background: var(--wp--preset--color--primary-hover) !important;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgb(210 20 82 / 0.2);
}
.contact-form--fluent .ff-btn-submit:disabled,
.contact-form--fluent .ff-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.contact-form--fluent .ff-message-success {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--sm);
margin-top: var(--wp--preset--spacing--md);
padding: 0.85rem 1rem;
border: 0 !important;
border-radius: var(--wp--custom--radius--small) !important;
background: var(--wp--preset--color--success) !important;
color: var(--wp--preset--color--base) !important;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: 1.35;
}
.contact-form--fluent .ff-message-success::before {
content: "";
width: 1rem;
height: 1rem;
flex-shrink: 0;
background-color: var(--wp--preset--color--base);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.contact-form--fluent .ff-message-error {
margin-top: var(--wp--preset--spacing--md);
border-radius: var(--wp--custom--radius--small);
padding: 0.6rem 0.75rem;
border: 1px solid rgb(212 20 82 / 0.3);
background: rgb(212 20 82 / 0.08);
color: var(--wp--preset--color--base-invert);
}
@media screen and (max-width: 767px) {
.newsletter-form--fluent form > fieldset {
grid-template-columns: 1fr;
row-gap: var(--wp--preset--spacing--xs);
}
.newsletter-form--fluent .ff_submit_btn_wrapper {
grid-column: 1 !important;
}
.contact-form--fluent .ff-btn-submit,
.contact-form--fluent .ff-btn {
width: 100%;
min-width: 0;
}
}
@media screen and (max-width: 1024px) {
.contact-section {
padding-left: var(--wp--preset--spacing--md);
padding-right: var(--wp--preset--spacing--md);
}
}
@media screen and (max-width: 767px) {
.contact-section {
padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--2xl);
}
.contact-form__header {
flex-wrap: wrap;
gap: var(--wp--preset--spacing--xs);
}
.contact-form__header-required {
margin-left: auto;
}
.contact-form__grid {
grid-template-columns: 1fr;
}
}
/* ======================================
FORMATIONS STATISTIQUES (Figma 482-17354)
====================================== */
.formations-stats {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
background-color: var(--wp--preset--color--base);
}
.formations-stats__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
display: flex;
justify-content: center;
align-items: stretch;
gap: var(--wp--preset--spacing--xl);
}
.formations-stats__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--xs);
padding: var(--wp--preset--spacing--lg);
text-align: center;
}
.formations-stats__number {
font-family: var(--wp--preset--font-family--title);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--custom);
line-height: 1;
}
.formations-stats__label {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
color: var(--wp--preset--color--base-invert);
}
@media screen and (max-width: 767px) {
.formations-stats {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--sm);
}
.formations-stats__container {
flex-direction: column;
gap: var(--wp--preset--spacing--lg);
}
.formations-stats__item {
padding: var(--wp--preset--spacing--md);
}
.formations-stats__label {
font-size: var(--wp--preset--font-size--small);
}
}
/* ======================================
FORMATIONS ENGAGEMENTS (Figma 482-17364)
====================================== */
.formations-engagements {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
background-color: var(--wp--preset--color--base-invert);
}
.formations-engagements__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.formations-engagements__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base);
margin: 0 0 var(--wp--preset--spacing--xl) 0;
text-align: center;
}
.formations-engagements__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wp--preset--spacing--xl);
align-items: start;
}
.formations-engagements__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.formations-engagements__icon {
width: 64px;
height: 64px;
margin-bottom: var(--wp--preset--spacing--md);
}
.formations-engagements__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.formations-engagements__item-title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--medium);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base);
margin: 0 0 var(--wp--preset--spacing--sm) 0;
}
.formations-engagements__item-text {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--regular);
color: var(--wp--preset--color--base-secondary);
line-height: var(--wp--custom--line-height--text--base);
margin: 0;
}
@media screen and (max-width: 1024px) {
.formations-engagements__grid {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--xl);
}
}
@media screen and (max-width: 767px) {
.formations-engagements {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--sm);
}
.formations-engagements__title {
font-size: var(--wp--preset--font-size--large);
margin-bottom: var(--wp--preset--spacing--xl);
}
.formations-engagements__icon {
width: 48px;
height: 48px;
}
.formations-engagements__item-title {
font-size: var(--wp--preset--font-size--base);
}
.formations-engagements__item-text {
font-size: var(--wp--preset--font-size--small);
}
}
/* ======================================
FORMATIONS INFOS UTILES + QUALIOPI (Figma 482-17394)
====================================== */
.formations-infos {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
background-color: var(--wp--preset--color--base);
}
.formations-infos__container {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.formations-infos__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base-invert);
margin: 0 0 var(--wp--preset--spacing--xl) 0;
}
.formations-infos__accordions {
margin-bottom: var(--wp--preset--spacing--xl);
}
.formations-infos__accordions .accordion {
margin-bottom: var(--wp--preset--spacing--sm);
}
.formations-infos__accordions .accordion:last-child {
margin-bottom: 0;
}
.formations-infos__qualiopi {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: var(--wp--preset--spacing--xl);
border-top: 1px solid var(--wp--preset--color--tertiary);
}
.formations-infos__qualiopi-logo {
max-width: var(--wp--custom--layout--max-width--qualiopi-logo);
height: auto;
margin-bottom: var(--wp--preset--spacing--md);
}
.formations-infos__qualiopi-text {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base-invert);
margin: 0;
}
/* Accordions sur fond base : header en base-invert pour lisibilité */
.formations-infos__accordions .accordion__header {
color: var(--wp--preset--color--base);
}
.formations-infos__accordions .accordion__content p,
.formations-infos__accordions .accordion__content a {
color: var(--wp--preset--color--base);
}
.formations-infos__accordions .accordion__content a:hover {
color: var(--wp--preset--color--primary);
}
.formations-infos__accordions .formalites-liberaux-cards,
.formations-infos__accordions .formalites-salaries-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--sm);
margin-top: var(--wp--preset--spacing--sm);
}
.formations-infos__accordions .formalites-liberaux-card,
.formations-infos__accordions .formalites-salaries-card {
background-color: var(--wp--preset--color--base-invert);
border: 1px solid var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--base);
padding: var(--wp--preset--spacing--md);
box-sizing: border-box;
min-width: 0;
color: var(--wp--preset--color--base);
}
.formations-infos__accordions .formalites-liberaux-card__title,
.formations-infos__accordions .formalites-salaries-card__title {
margin: 0 0 var(--wp--preset--spacing--sm) 0;
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--medium);
font-weight: var(--wp--custom--font-weight--bold);
}
.formations-infos__accordions .formalites-liberaux-card ul,
.formations-infos__accordions .formalites-salaries-card ul {
margin: 0;
padding-left: 1.2rem;
}
.formations-infos__accordions .formalites-liberaux-card li,
.formations-infos__accordions .formalites-salaries-card li {
color: var(--wp--preset--color--base);
overflow-wrap: anywhere;
}
.formations-infos__accordions .formalites-liberaux-card a,
.formations-infos__accordions .formalites-salaries-card a {
color: var(--wp--preset--color--base);
text-decoration: underline;
overflow-wrap: anywhere;
word-break: break-word;
}
.formations-infos__accordions .formalites-liberaux-card a:hover,
.formations-infos__accordions .formalites-salaries-card a:hover {
color: var(--wp--preset--color--base);
}
.formations-infos__accordions .formalites-liberaux-card li + li,
.formations-infos__accordions .formalites-salaries-card li + li {
margin-top: 0.5rem;
}
.formations-infos__accordions .formalites-salaries-note {
margin-top: var(--wp--preset--spacing--sm);
}
@media screen and (max-width: 767px) {
.formations-infos {
padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--sm);
}
.formations-infos__title {
font-size: var(--wp--preset--font-size--large);
margin-bottom: var(--wp--preset--spacing--lg);
}
.formations-infos__qualiopi {
padding-top: var(--wp--preset--spacing--xl);
}
.formations-infos__qualiopi-logo {
max-width: var(--wp--custom--layout--max-width--qualiopi-logo-mobile);
}
.formations-infos__accordions .formalites-liberaux-cards,
.formations-infos__accordions .formalites-salaries-cards {
grid-template-columns: 1fr;
}
.formations-infos__accordions .formalites-liberaux-card,
.formations-infos__accordions .formalites-salaries-card {
padding: var(--wp--preset--spacing--sm);
}
.formations-infos__accordions .formalites-liberaux-card ul,
.formations-infos__accordions .formalites-salaries-card ul {
padding-left: 1rem;
}
}
/* ======================================
SINGLE FORMATION (Figma 507-19161)
====================================== */
.formation-single-page {
background-color: var(--wp--preset--color--base);
}
.formation-single-page .site-header-inner,
.formation-single-page .breadcrumb-wrapper {
background-color: transparent;
}
.formation-single-page .breadcrumb__link,
.formation-single-page .breadcrumb__separator,
.formation-single-page .breadcrumb__current {
color: var(--wp--preset--color--base-invert);
}
.formation-single-page .breadcrumb__link:hover {
color: var(--wp--preset--color--primary);
}
.formation-single__wrapper {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
/* Hero : bloc image puis bloc infos (Figma 507-19168) */
.formation-single__hero {
margin-top: 10px;
border-radius: var(--wp--custom--radius--base);
overflow: hidden;
}
.formation-single__hero-img-block {
width: 100%;
aspect-ratio: 2 / 1;
max-height: 400px;
overflow: hidden;
border-radius: var(--wp--custom--radius--base);
}
.formation-single__hero-img-block picture {
display: block;
width: 100%;
height: 100%;
}
.formation-single__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.formation-single__hero-info {
background-color: var(--wp--preset--color--base);
padding: var(--wp--preset--spacing--xl) 0;
border-radius: 0 0 var(--wp--custom--radius--base) var(--wp--custom--radius--base);
}
.formation-single__hero-info-inner {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.formation-single__hero-content {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--md);
}
.formation-single__title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h1);
font-weight: var(--wp--custom--font-weight--bold);
line-height: 1.25;
color: var(--wp--preset--color--base-invert);
margin: 0;
}
.formation-single__hero-meta {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--md);
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
}
.formation-single__meta-item {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--xs);
}
/* Meta icons : couleur base-invert (SVG en mask) */
.formation-single__meta-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
background-color: var(--wp--preset--color--base-invert);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.formation-single__meta-icon--euro {
mask-image: url('../icons/ic_euro.svg');
-webkit-mask-image: url('../icons/ic_euro.svg');
}
.formation-single__meta-icon--personnes {
mask-image: url('../icons/ic_personnes.svg');
-webkit-mask-image: url('../icons/ic_personnes.svg');
}
.formation-single__sessions-wrap {
display: flex;
align-items: flex-end;
gap: var(--wp--preset--spacing--md);
width: 100%;
}
.formation-single__sessions {
display: grid;
gap: var(--wp--preset--spacing--sm);
width: fit-content;
max-width: 75%;
}
.formation-single__session-card {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wp--preset--spacing--lg);
padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--surface-secondary);
border-radius: var(--wp--custom--radius--base);
color: var(--wp--preset--color--base);
font-size: var(--wp--preset--font-size--base);
width: 100%;
min-width: 0;
}
.formation-single__session-label {
flex-shrink: 0;
}
.formation-single__session-dates,
.formation-single__session-lieu {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--xs);
min-width: 0;
overflow-wrap: anywhere;
}
.formation-single__session-card .formation-single__session-icon {
width: 18px;
height: 18px;
object-fit: contain;
flex-shrink: 0;
}
.formation-single__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
border: none;
border-radius: var(--wp--custom--radius--large);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease;
align-self: flex-start;
}
.formation-single__cta:hover {
background-color: var(--wp--preset--color--primary-hover);
color: var(--wp--preset--color--base-invert);
}
.formation-single__no-session {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--wp--preset--spacing--xs);
}
.formation-single__no-session-text {
margin: 0;
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
}
.formation-single__no-session-link,
.formation-single__no-session-link:visited {
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: underline;
}
.formation-single__no-session-link:hover {
color: var(--wp--preset--color--primary-hover);
}
.formation-single__inscription-form {
display: grid;
gap: var(--wp--preset--spacing--sm);
width: 100%;
max-width: 44rem;
}
.formation-single__session-selector {
margin: 0;
padding: 0;
border: 0;
}
.formation-single__session-selector-legend {
margin-bottom: var(--wp--preset--spacing--xs);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base-invert);
}
.formation-single__session-options {
display: grid;
gap: var(--wp--preset--spacing--xs);
}
.formation-single__session-option {
display: block;
cursor: pointer;
position: relative;
}
.formation-single__session-option-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.formation-single__session-option-content {
display: grid;
gap: 0.25rem;
padding: var(--wp--preset--spacing--sm);
border-radius: var(--wp--custom--radius--small);
border: 1px solid rgb(255 255 255 / 0.24);
background-color: rgb(255 255 255 / 0.08);
color: var(--wp--preset--color--base-invert);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.formation-single__session-option-title {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--bold);
line-height: var(--wp--custom--line-height--text--base);
}
.formation-single__session-option-line {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: var(--wp--custom--line-height--text--small);
}
.formation-single__session-option-input:checked + .formation-single__session-option-content {
border-color: var(--wp--preset--color--primary);
background-color: rgb(212 20 82 / 0.2);
}
.formation-single__session-option:hover .formation-single__session-option-content {
border-color: rgb(255 255 255 / 0.5);
}
.formation-single__session-option-input:focus-visible + .formation-single__session-option-content {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
}
.formation-single__rating {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 0.625rem;
text-align: right;
flex-shrink: 0;
min-width: fit-content;
margin-left: auto;
}
.formation-single__rating-value {
display: block;
font-family: var(--wp--preset--font-family--title);
font-size: clamp(2.5rem, 5vw, 3.75rem);
line-height: 1;
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--custom, #9ABFF9);
}
.formation-single__rating-label {
display: block;
font-family: var(--wp--preset--font-family--text);
line-height: var(--wp--custom--line-height--text--base);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base-invert);
}
.formation-single__testimonials-reco {
margin: var(--wp--preset--spacing--md) 0 0;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
}
.formation-single__testimonials-reco strong {
font-weight: var(--wp--custom--font-weight--bold);
}
/* Main content */
.formation-single__main {
padding: var(--wp--preset--spacing--xl) 0;
background-color: var(--wp--preset--color--base);
}
.formation-single__main-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--wp--preset--spacing--xl);
align-items: start;
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
}
.formation-single__block-title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base-invert);
margin: 0 0 var(--wp--preset--spacing--md) 0;
}
.formation-single__principle-text {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: var(--wp--custom--line-height--text--base);
color: var(--wp--preset--color--base-invert);
margin-bottom: var(--wp--preset--spacing--md);
}
.formation-single__principle-text p {
margin: 0 0 1em 0;
}
.formation-single__principle-text p:last-child {
margin-bottom: 0;
}
.formation-single__link {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--xs);
color: var(--wp--preset--color--primary);
text-decoration: underline;
margin-bottom: var(--wp--preset--spacing--md);
}
.formation-single__link-icon {
display: inline-block;
width: 16px;
height: 16px;
flex-shrink: 0;
background-color: currentColor;
mask: url('../icons/ic_lien_externe.svg') no-repeat center / contain;
-webkit-mask: url('../icons/ic_lien_externe.svg') no-repeat center / contain;
}
.formation-single__link-icon--download {
mask-image: url('../icons/ic_t%C3%A9l%C3%A9charger.svg');
-webkit-mask-image: url('../icons/ic_t%C3%A9l%C3%A9charger.svg');
}
.formation-single__link:hover {
color: var(--wp--preset--color--primary-hover);
}
.formation-single__link--programme,
.formation-single__link--programme:visited,
.formation-single__link--programme:hover,
.formation-single__link--programme:active {
color: var(--wp--preset--color--base-invert);
font-weight: var(--wp--custom--font-weight--bold);
}
.formation-single__principle-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--wp--preset--spacing--md);
}
.formation-single__principle-actions .formation-single__link {
margin-bottom: 0;
}
.formation-single__intra-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
background-color: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--primary);
border-radius: 50px;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--semibold);
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.formation-single__intra-btn:hover {
background-color: var(--wp--preset--color--secondary-hover);
color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
}
.formation-single__intra-btn:active {
background-color: var(--wp--preset--color--secondary-actif);
color: var(--wp--preset--color--primary-actif);
border-color: var(--wp--preset--color--primary-actif);
}
.formation-single__intra-btn[disabled],
.formation-single__intra-btn.is-disabled,
.formation-single__intra-btn[aria-disabled="true"] {
background-color: var(--wp--preset--color--surface-secondary);
color: var(--wp--preset--color--tertiary);
border-color: var(--wp--preset--color--tertiary);
cursor: not-allowed;
pointer-events: none;
}
.formation-single__sidebar-col {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--xl);
}
/* Blocs Financement et Formateur : fond base-invert, texte base (Figma 507-19219) */
.formation-single__financement,
.formation-single__formateur {
background-color: var(--wp--preset--color--base-invert);
color: var(--wp--preset--color--base);
border-radius: var(--wp--custom--radius--base);
padding: var(--wp--preset--spacing--md);
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--md);
}
.formation-single__financement .formation-single__block-title,
.formation-single__formateur .formation-single__block-title {
color: var(--wp--preset--color--base);
}
.formation-single__financement-text {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
line-height: 1.5;
color: var(--wp--preset--color--base);
margin: 0 0 var(--wp--preset--spacing--md) 0;
}
.formation-single__financement-accordions {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--sm);
width: 100%;
max-width: 100%;
}
.formation-single__financement-accordions .accordion {
margin: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
border-color: var(--wp--preset--color--tertiary);
}
.formation-single__financement-accordions .accordion__header {
font-size: var(--wp--preset--font-size--medium);
line-height: var(--wp--custom--line-height--text--large);
min-height: 52px;
padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
color: var(--wp--preset--color--base);
}
.formation-single__financement-accordions .accordion__content {
padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
overflow-wrap: anywhere;
word-break: break-word;
}
.formation-single__financement-accordions .accordion__content p {
color: var(--wp--preset--color--base);
margin: 0 0 var(--wp--preset--spacing--xs) 0;
}
.formation-single__financement-accordions .accordion__content p:last-child {
margin-bottom: 0;
}
.formation-single__financement-accordions .accordion__content a {
color: var(--wp--preset--color--primary);
text-decoration: underline;
}
.formation-single__financement-accordions .accordion__content a:hover {
color: var(--wp--preset--color--primary-hover);
}
.formation-single__financement-code {
font-weight: var(--wp--custom--font-weight--bold);
}
.formation-single__financement-pending {
margin: 0;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--base-secondary);
}
.formation-single__financement-logos {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--md);
align-items: center;
}
.formation-single__logo {
max-height: 100px;
width: auto;
object-fit: contain;
}
.formation-single__logo.is-pending {
filter: grayscale(100%);
opacity: 0.45;
}
.formation-single__formateur .formation-single__formateur-name {
color: var(--wp--preset--color--base-secondary);
margin: 0 0 var(--wp--preset--spacing--xs) 0;
}
.formation-single__formateur-name {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--base);
font-weight: var(--wp--custom--font-weight--bold);
}
.formation-single__formateur-card {
display: flex;
gap: var(--wp--preset--spacing--md);
align-items: flex-start;
}
.formation-single__formateur-text {
flex: 1 1 auto;
min-width: 0;
}
.formation-single__formateur-visual {
flex-shrink: 0;
}
.formation-single__formateur-img {
width: 170px;
height: 170px;
border-radius: 50%;
object-fit: cover;
}
.formation-single__formateur-bio {
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: var(--wp--custom--line-height--text--small);
color: var(--wp--preset--color--base-secondary);
}
.formation-single__formateur-bio-list {
margin: 0 0 0.5em 0;
padding-left: 1.25em;
}
.formation-single__formateur-bio-list li {
margin-bottom: 0.25em;
}
.formation-single__formateur-links {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--md);
align-items: center;
}
.formation-single__formateur-link {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--xs);
color: var(--wp--preset--color--base);
}
.formation-single__formateur-icon {
width: 17px;
height: 17px;
flex-shrink: 0;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.formation-single__formateur-icon--instagram {
mask-image: url('../icons/ic_instagram.svg');
-webkit-mask-image: url('../icons/ic_instagram.svg');
}
.formation-single__formateur-icon--twitter {
mask-image: url('../icons/ic_tw.svg');
-webkit-mask-image: url('../icons/ic_tw.svg');
}
.formation-single__formateur-icon--linkedin {
mask-image: url('../icons/ic_linkedin.svg');
-webkit-mask-image: url('../icons/ic_linkedin.svg');
}
.formation-single__formateur-icon--facebook {
mask-image: url('../icons/ic_fb.svg');
-webkit-mask-image: url('../icons/ic_fb.svg');
}
.formation-single__formateur-icon--website {
mask-image: url('../icons/ic_lien_externe.svg');
-webkit-mask-image: url('../icons/ic_lien_externe.svg');
}
.formation-single__formateur-icon--researchgate {
mask-image: url('../icons/ic_lien_externe.svg');
-webkit-mask-image: url('../icons/ic_lien_externe.svg');
}
.formation-single__formateur-icon--cv {
mask-image: url('../icons/ic_t%C3%A9l%C3%A9charger.svg');
-webkit-mask-image: url('../icons/ic_t%C3%A9l%C3%A9charger.svg');
}
.formation-single__formateur-icon--email {
mask-image: url('../icons/ic_message.svg');
-webkit-mask-image: url('../icons/ic_message.svg');
}
@media screen and (max-width: 479px) {
.formation-single__formateur-card {
flex-direction: column-reverse;
}
.formation-single__formateur-img {
width: 140px;
height: 140px;
}
}
/* Gallery */
.formation-single__gallery {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: var(--wp--preset--spacing--xl, 3.125rem) var(--wp--preset--spacing--lg, 1.875rem);
background-color: var(--wp--preset--color--base-invert);
}
.formation-single__gallery-inner {
max-width: var(--wp--style--global--wide-size, 87.5rem);
width: 100%;
margin: 0 auto;
}
.formation-single__gallery-title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base);
margin: 0 0 var(--wp--preset--spacing--xl) 0;
text-transform: uppercase;
}
.formation-single__gallery-track {
display: flex;
gap: var(--wp--preset--spacing--md);
overflow-x: auto;
padding-bottom: var(--wp--preset--spacing--sm);
scroll-snap-type: x mandatory;
}
.formation-single__gallery-item {
flex: 0 0 280px;
scroll-snap-align: start;
border-radius: var(--wp--custom--radius--base);
overflow: hidden;
}
.formation-single__gallery-track,
.formation-single__testimonials-list {
scrollbar-width: none;
}
.formation-single__gallery-track::-webkit-scrollbar,
.formation-single__testimonials-list::-webkit-scrollbar {
display: none;
}
.formation-single__gallery-slider,
.formation-single__testimonials-slider {
display: flex;
flex-direction: column;
}
.formation-single__gallery-item img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
/* Testimonials */
.formation-single__testimonials {
padding: var(--wp--preset--spacing--xl) 0;
background-color: var(--wp--preset--color--base);
position: relative;
overflow: hidden;
isolation: isolate;
}
.formation-single__testimonials::before,
.formation-single__testimonials::after {
content: "";
position: absolute;
width: clamp(12rem, 18vw, 20rem);
aspect-ratio: 32 / 47;
background-color: var(--wp--preset--color--custom, #9ABFF9);
opacity: 0.35;
pointer-events: none;
z-index: 0;
-webkit-mask: url('../icons/ic_quote_shape.svg') no-repeat center / contain;
mask: url('../icons/ic_quote_shape.svg') no-repeat center / contain;
transform: rotate(180deg);
}
.formation-single__testimonials::before {
left: 1rem;
bottom: -7rem;
}
.formation-single__testimonials::after {
left: clamp(13rem, 30vw, 26rem);
bottom: -7rem;
}
.formation-single__testimonials-inner {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin: 0 auto;
position: relative;
z-index: 1;
}
.formation-single__testimonials-title {
font-family: var(--wp--preset--font-family--title);
font-size: var(--wp--preset--font-size--h2);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base-invert);
margin: 0 0 var(--wp--preset--spacing--xl) 0;
text-transform: uppercase;
}
.formation-single__testimonials-list {
display: flex;
gap: var(--wp--preset--spacing--md, 1.25rem);
overflow-x: auto;
margin-bottom: var(--wp--preset--spacing--lg);
padding-bottom: var(--wp--preset--spacing--sm);
scroll-snap-type: x mandatory;
background: transparent;
}
.formation-single__testimonial-card {
flex: 0 0 23.125rem;
max-width: 23.125rem;
background-color: var(--wp--preset--color--surface-invert);
border-radius: var(--wp--custom--radius--base);
padding: var(--wp--preset--spacing--md);
box-shadow: none;
scroll-snap-align: start;
}
.formation-single__slider-nav {
justify-content: flex-end;
width: 100%;
padding: var(--wp--preset--spacing--sm) 0 0;
}
.formation-single__slider-nav .slider-arrow--next {
border-top-right-radius: var(--wp--custom--radius--base);
border-bottom-right-radius: var(--wp--custom--radius--base);
}
.formation-single__testimonial-quote {
display: inline-flex;
align-items: flex-start;
gap: 4px;
flex-shrink: 0;
}
.formation-single__testimonial-quote-icon {
width: 32px;
height: 47px;
display: block;
}
.formation-single__cta--center {
display: block;
width: fit-content;
margin: var(--wp--preset--spacing--lg) auto 0;
}
.formation-single__no-session--center {
align-items: center;
text-align: center;
margin-top: var(--wp--preset--spacing--lg);
}
.formation-single__cta--mobile-after-formateur {
display: none;
}
.formation-single__no-session--mobile-after-formateur {
display: none;
}
@media screen and (max-width: 991px) {
.formation-single__main-inner {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 767px) {
.formation-single__hero {
margin-inline: var(--wp--preset--spacing--md);
}
.formation-single__hero-img-block {
aspect-ratio: 37 / 20;
max-height: none;
}
.formation-single__hero-info {
padding: var(--wp--preset--spacing--md) 0;
}
.formation-single__hero-content {
padding-inline: var(--wp--preset--spacing--md);
}
.formation-single__main-inner,
.formation-single__gallery-inner,
.formation-single__testimonials-inner {
padding-inline: var(--wp--preset--spacing--md);
}
.formation-single__title {
font-size: var(--wp--preset--font-size--h2);
line-height: var(--wp--custom--line-height--title--h-2);
}
.formation-single__hero-meta {
flex-direction: column;
align-items: flex-start;
gap: var(--wp--preset--spacing--sm);
}
.formation-single__sessions-wrap {
flex-direction: column;
align-items: flex-start;
gap: var(--wp--preset--spacing--sm);
}
.formation-single__sessions {
width: 100%;
gap: var(--wp--preset--spacing--sm);
}
.formation-single__inscription-form {
max-width: 100%;
}
.formation-single__session-card {
align-items: flex-start;
gap: var(--wp--preset--spacing--sm);
font-size: var(--wp--preset--font-size--small);
}
.formation-single__session-label {
width: 100%;
}
.formation-single__session-dates,
.formation-single__session-lieu {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.formation-single__rating {
align-items: flex-start;
text-align: left;
margin-left: 0;
}
.formation-single__main {
padding: var(--wp--preset--spacing--lg) 0;
}
.formation-single__main-inner {
gap: var(--wp--preset--spacing--lg);
}
.formation-single__sidebar-col {
gap: var(--wp--preset--spacing--md);
}
.formation-single__financement,
.formation-single__formateur {
padding: var(--wp--preset--spacing--md);
}
.formation-single__logo {
max-height: 72px;
}
.formation-single__formateur-card {
flex-direction: column-reverse;
gap: var(--wp--preset--spacing--md);
}
.formation-single__formateur-img {
width: 170px;
height: 170px;
}
.formation-single__formateur-links {
gap: var(--wp--preset--spacing--sm);
}
.formation-single__cta--mobile-after-formateur {
display: inline-flex;
}
.formation-single__no-session--mobile-after-formateur {
display: flex;
}
.formation-single__gallery {
padding: var(--wp--preset--spacing--xl) 0;
}
.formation-single__gallery-title {
margin-bottom: var(--wp--preset--spacing--lg);
}
.formation-single__gallery-track {
gap: var(--wp--preset--spacing--md);
}
.formation-single__gallery-item {
flex: 0 0 17.5rem;
}
.formation-single__testimonials-list {
margin-bottom: var(--wp--preset--spacing--md);
}
.formation-single__testimonial-card {
flex: 0 0 min(19.5rem, calc(100vw - (var(--wp--preset--spacing--md) * 3)));
max-width: min(19.5rem, calc(100vw - (var(--wp--preset--spacing--md) * 8)));
}
.formation-single__gallery .formation-single__slider-nav,
.formation-single__testimonials .formation-single__slider-nav {
padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg) 0;
box-sizing: border-box;
}
.formation-single__testimonials::before,
.formation-single__testimonials::after {
width: clamp(9rem, 28vw, 13rem);
bottom: -3rem;
}
.formation-single__testimonials::before {
left: 1rem;
}
.formation-single__testimonials::after {
left: clamp(11rem, 54vw, 16rem);
}
}
@media screen and (max-width: 767px) {
.formation-archive-page .formation-grid {
gap: var(--wp--preset--spacing--lg);
}
}
/* ======================================
INSCRIPTION (PLUGIN ak-inscription)
====================================== */
.inscription-page {
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--base-invert);
}
.inscription-page--full-header-bg .site-header-inner {
background-color: var(--wp--preset--color--base) !important;
}
.inscription-page main.wp-block-group {
padding-top: calc(71px + var(--wp--preset--spacing--lg)) !important;
}
.admin-bar.inscription-page main.wp-block-group {
padding-top: calc(71px + 32px + var(--wp--preset--spacing--lg)) !important;
}
.inscription-page .wp-block-post-title {
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--md);
color: var(--wp--preset--color--base-invert);
}
.ak-inscription-root {
max-width: min(56rem, calc(100vw - (var(--wp--preset--spacing--md) * 2)));
margin: var(--wp--preset--spacing--xl) auto;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
color: var(--wp--preset--color--base-invert);
}
.ak-inscription-root .ak-inscription-controls {
margin: 0 0 var(--wp--preset--spacing--lg);
padding: 0 !important;
border: 0 !important;
border-top: 1px solid rgb(255 255 255 / 0.28) !important;
border-radius: 0 !important;
background: transparent !important;
}
.ak-inscription-root .ak-inscription-field {
margin-bottom: var(--wp--preset--spacing--sm);
}
.ak-inscription-root .ak-inscription-hint,
.ak-inscription-root .ak-inscription-message {
margin: var(--wp--preset--spacing--xs) 0 0;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--xsmall);
line-height: 1.35;
}
.ak-inscription-root .ak-inscription-hint {
color: rgb(255 255 255 / 0.7);
}
.ak-inscription-root .ak-inscription-message {
color: #ffb3cc;
}
.ak-inscription-root label {
display: block;
margin-bottom: 0.45rem;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--bold);
color: var(--wp--preset--color--base-invert);
}
.ak-inscription-root .ff-el-group {
margin-bottom: var(--wp--preset--spacing--sm);
}
.ak-inscription-root .ff-el-input--label label,
.ak-inscription-root .ff-el-input--label {
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--semibold);
}
.ak-inscription-root .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.ak-inscription-root .ff-el-input--label.asterisk-right .ff-el-is-required::after {
color: var(--wp--preset--color--primary);
}
.ak-inscription-root :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
width: 100%;
border: 1px solid transparent;
border-radius: 999px;
background: #f3f4f7;
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: 1.4;
padding: 0.68rem 0.9rem;
}
.ak-inscription-root textarea.ff-el-form-control {
border-radius: var(--wp--custom--radius--small);
min-height: 120px;
}
.ak-inscription-root :is(select, input, textarea)::placeholder {
color: #7f8ca3;
}
.ak-inscription-root :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea):focus {
border-color: rgb(210 20 82 / 0.65);
box-shadow: 0 0 0 3px rgb(210 20 82 / 0.15);
outline: none;
}
.ak-inscription-root .ff-el-form-check.ff-el-tc {
margin-top: var(--wp--preset--spacing--md);
}
.ak-inscription-root .ff-el-form-check-label {
display: flex;
align-items: flex-start;
gap: 0.55rem;
}
.ak-inscription-root .ff_t_c,
.ak-inscription-root .ff-el-form-check-label {
color: var(--wp--preset--color--base-invert);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
line-height: 1.45;
}
.ak-inscription-root .ff-el-form-check-input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: var(--wp--custom--radius--small);
border: 1px solid var(--wp--preset--color--base-invert);
background-color: transparent;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
vertical-align: middle;
}
.ak-inscription-root .ff-el-form-check-input[type="checkbox"]:hover {
background-color: var(--wp--preset--color--primary);
border-color: transparent;
}
.ak-inscription-root .ff-el-form-check-input[type="checkbox"]::after {
content: "";
width: 10px;
height: 8px;
background-color: var(--wp--preset--color--base-invert);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
transform: scale(0);
transition: transform 0.15s ease;
}
.ak-inscription-root .ff-el-form-check-input[type="checkbox"]:checked {
background-color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
}
.ak-inscription-root .ff-el-form-check-input[type="checkbox"]:checked::after {
transform: scale(1);
}
.ak-inscription-root :is(button[type="submit"], input[type="submit"], .ff-btn-submit) {
appearance: none;
border: 1px solid transparent;
border-radius: var(--wp--custom--radius--large);
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--base-invert);
cursor: pointer;
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--bold);
line-height: 1.1;
padding: 0.78rem 1.1rem;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ak-inscription-root .ff_submit_btn_wrapper {
margin-top: var(--wp--preset--spacing--md);
}
.ak-inscription-root .ff-btn-submit:not(.ff_btn_no_style) {
background-color: var(--wp--preset--color--primary) !important;
color: var(--wp--preset--color--base-invert) !important;
min-width: 18rem;
min-height: 2.75rem;
}
.ak-inscription-root :is(button[type="submit"], input[type="submit"], .ff-btn-submit):hover {
background: var(--wp--preset--color--primary-hover);
transform: translateY(-1px);
box-shadow: 0 10px 20px rgb(210 20 82 / 0.2);
}
.ak-inscription-root :is(button[type="submit"], input[type="submit"], .ff-btn-submit):disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.ak-inscription-root .ff-btn-submit.ff-working,
.ak-inscription-root .ff-btn.ff-working {
position: relative;
overflow: visible;
box-shadow: 0 0 0 2px rgb(255 174 87 / 0.45), 0 10px 18px rgb(255 136 46 / 0.28);
}
.ak-inscription-root .ff-btn-submit.ff-working::after,
.ak-inscription-root .ff-btn.ff-working::after {
content: none !important;
animation: none !important;
}
.ak-inscription-root .ff-btn-submit.ff-working::before,
.ak-inscription-root .ff-btn.ff-working::before {
content: "";
position: absolute;
inset: -5px;
border-radius: inherit;
border: 2px solid rgb(255 198 143 / 0.45);
border-top-color: #ff9a3c;
border-right-color: #ffb05e;
pointer-events: none;
animation: ak-inscription-submit-ring 0.85s linear infinite;
}
@keyframes ak-inscription-submit-ring {
to {
transform: rotate(1turn);
}
}
.ak-inscription-root .ff-message-success {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--sm);
margin-top: var(--wp--preset--spacing--md);
padding: 0.85rem 1rem;
border: 0;
border-radius: var(--wp--custom--radius--small);
background: var(--wp--preset--color--success);
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: 1.35;
}
.ak-inscription-root .ff-message-success::before {
content: "";
width: 1rem;
height: 1rem;
flex-shrink: 0;
background-color: var(--wp--preset--color--base);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.ak-inscription-root .ff-message-success.ak-inscription-status--pending {
border: 1px solid #ffc387;
background: #ffe8cc;
color: #8f3f00;
}
.ak-inscription-root .ff-message-success.ak-inscription-status--pending::before {
background-color: #8f3f00;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.ak-inscription-root .ak-inscription-success {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--sm);
margin-top: var(--wp--preset--spacing--md);
padding: 0.85rem 1rem;
border: 0;
border-radius: var(--wp--custom--radius--small);
background: var(--wp--preset--color--success);
color: var(--wp--preset--color--base);
font-family: var(--wp--preset--font-family--text);
font-size: var(--wp--preset--font-size--small);
font-weight: var(--wp--custom--font-weight--semibold);
line-height: 1.35;
}
.ak-inscription-root .ak-inscription-success::before {
content: "";
width: 1rem;
height: 1rem;
flex-shrink: 0;
background-color: var(--wp--preset--color--base);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.ak-inscription-root :is(.ff-message-error, .ak-inscription-error) {
border-radius: var(--wp--custom--radius--small);
padding: 0.6rem 0.75rem;
border: 1px solid rgb(212 20 82 / 0.3);
background: rgb(212 20 82 / 0.08);
}
@media screen and (max-width: 767px) {
.inscription-page main.wp-block-group {
padding-top: calc(71px + var(--wp--preset--spacing--md)) !important;
}
.admin-bar.inscription-page main.wp-block-group {
padding-top: calc(71px + 46px + var(--wp--preset--spacing--md)) !important;
}
.ak-inscription-root {
margin-block: var(--wp--preset--spacing--lg);
padding: 0;
}
.ak-inscription-root .ff-btn-submit:not(.ff_btn_no_style) {
width: 100%;
min-width: 0;
}
}