/* ========================================================================= WPForms #401 — Formulaire Contact (design Figma STADIUP) Styles limités aux champs du formulaire. Le conteneur, titre, description et close icon sont gérés ailleurs (Oxygen). Variables consommées depuis Oxygen (variables.css) : --primary #ffd400 · --secondary #000 · --body Poppins · --heading soulmaze --radius-10 · --red-500 ========================================================================= */ /* ========================================================================= Lenis — smooth scroll (classes posées sur par Lenis) ========================================================================= */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } /* --- Masquer les honeypots anti-spam (WPForms les cachait via son CSS) --- */ #wpforms-401 .wpforms-field-hp, #wpforms-401-field_1-container, #wpforms-401-field_2-container { display: none !important; } /* --- Grille 3 colonnes : placement explicite (l'ordre DOM ≠ ordre visuel) --- */ #wpforms-401 .wpforms-field-container { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 45px; row-gap: 30px; align-items: start; } /* Colonne 1 */ #wpforms-401-field_3-container { grid-column: 1; grid-row: 1; } /* Prénom */ #wpforms-401-field_4-container { grid-column: 1; grid-row: 2; } /* Email */ #wpforms-401-field_7-container { grid-column: 1; grid-row: 3; } /* Nom de société */ /* Colonne 2 */ #wpforms-401-field_5-container { grid-column: 2; grid-row: 1; } /* Nom */ #wpforms-401-field_6-container { grid-column: 2; grid-row: 2; } /* Téléphone */ #wpforms-401-field_8-container { grid-column: 2; grid-row: 3; } /* Sujet */ /* Colonne 3 — Message pleine hauteur */ #wpforms-401-field_9-container { grid-column: 3; grid-row: 1 / span 3; display: flex; flex-direction: column; align-self: stretch; } /* RGPD sous les colonnes 1 et 2 */ #wpforms-401-field_10-container { grid-column: 1 / span 2; grid-row: 4; } /* --- Reset des champs --- */ #wpforms-401 .wpforms-field { margin: 0; padding: 0; max-width: none; } /* --- Labels (Figma H3 : MADE Soulmaze 20/25) --- */ #wpforms-401 .wpforms-field-label { display: block; margin: 0 0 5px; font-family: var(--heading, "MADE Soulmaze"), sans-serif; font-size: 20px; line-height: 25px; font-weight: 400; color: var(--secondary, #000); } #wpforms-401 .wpforms-required-label { color: var(--secondary, #000); } /* --- Champs de saisie : underline uniquement --- */ #wpforms-401 input[type="text"], #wpforms-401 input[type="email"], #wpforms-401 input[type="tel"], #wpforms-401 select, #wpforms-401 textarea { width: 100%; box-sizing: border-box; padding: 15px 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.5); border-radius: 0; background: transparent; font-family: var(--body, "Poppins", sans-serif); font-size: 16px; line-height: 24px; color: var(--secondary, #000); -webkit-appearance: none; appearance: none; outline: none; } #wpforms-401 ::placeholder { color: rgba(0, 0, 0, 0.6); opacity: 1; } #wpforms-401 input:focus, #wpforms-401 select:focus, #wpforms-401 textarea:focus { border-bottom-color: var(--secondary, #000); } /* --- Select "Sujet" : chevron custom --- */ #wpforms-401 select { padding-right: 24px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; } /* --- Message : remplit la hauteur de la colonne --- */ #wpforms-401-field_9-container textarea { flex: 1 1 auto; min-height: 180px; resize: vertical; } /* --- RGPD (checkbox) --- */ #wpforms-401-field_10-container ul { list-style: none; margin: 8px 0 0; padding: 0; } #wpforms-401-field_10-container li { display: flex; align-items: flex-start; gap: 10px; } #wpforms-401-field_10-container input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin: 3px 0 0; accent-color: var(--primary, #ffd400); cursor: pointer; } #wpforms-401-field_10-container .wpforms-field-label-inline { font-family: var(--body, "Poppins", sans-serif); font-size: 14px; line-height: 20px; color: var(--secondary, #000); cursor: pointer; } /* Description RGPD (texte reCAPTCHA / mention légale) */ #wpforms-401 .wpforms-field-description { margin: 8px 0 0; font-family: var(--body, "Poppins", sans-serif); font-size: 0.8rem; line-height: 18px; color: rgba(0, 0, 0, 0.55); } #wpforms-401 .wpforms-field-description a { color: inherit; text-decoration: underline; } /* --- Bouton envoyer (décollé de l'angle bas-droit de la modale) --- */ #wpforms-401 .wpforms-submit-container { display: flex; justify-content: flex-end; margin-top: 30px; padding-right: var(--gap-10, 10px); padding-bottom: var(--gap-10, 10px); } #wpforms-401 .wpforms-submit { display: inline-flex; align-items: center; gap: 12px; padding: 16px 25px; border: 0; border-radius: var(--radius-10, 10px); background: var(--primary, #ffd400); color: var(--secondary, #000); font-family: var(--heading, "MADE Soulmaze"), sans-serif; font-size: 13px; line-height: 1.4; cursor: pointer; transition: opacity 0.2s ease; } /* Même flèche que les boutons « Contact » et « Mouvement sportif ». Elle sert de masque et non d'image : le fichier est jaune (d'où le nom de la variable), la couleur vient d'ici et suit celle du libellé. */ #wpforms-401 .wpforms-submit::after { content: ""; width: 24px; height: 18px; background-color: currentColor; -webkit-mask: var(--chevron-right-primary) no-repeat center / contain; mask: var(--chevron-right-primary) no-repeat center / contain; } #wpforms-401 .wpforms-submit:hover { opacity: 0.85; } /* --- États d'erreur (le CSS WPForms ayant été retiré) --- */ #wpforms-401 input.wpforms-error, #wpforms-401 select.wpforms-error, #wpforms-401 textarea.wpforms-error { border-bottom-color: var(--red-500, #ef4444); } /* Message d'erreur : (classic) ou (modern markup) */ #wpforms-401 label.wpforms-error, #wpforms-401 em.wpforms-error { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 4px; font-family: var(--body, "Poppins", sans-serif); font-size: 0.8rem; font-style: normal; background: var(--red-500, #ef4444); color: var(--white, #fff); } /* Masquer le badge reCAPTCHA (mention légale conservée dans la description) */ .grecaptcha-badge { visibility: hidden; } /* --- Responsive : une seule colonne sous 1120px (tablette paysage) --- */ @media (max-width: 1119px) { #wpforms-401 .wpforms-field-container { grid-template-columns: 1fr; } #wpforms-401 .wpforms-field-container > .wpforms-field { grid-column: 1 !important; grid-row: auto !important; } #wpforms-401-field_9-container { align-self: auto; } #wpforms-401 .wpforms-submit-container { justify-content: stretch; padding-right: 0; /* bouton pleine largeur */ } #wpforms-401 .wpforms-submit { width: 100%; justify-content: center; } } .contact-form__close svg { cursor: pointer; } /* Arrow-btn : les 2 libellés (repos / survol) empilés dans une même cellule grid → la largeur du bouton = le plus large des deux, stable (aucun reflow au hover) */ .arrow-btn__labels { display: grid; } .arrow-btn__labels .arrow-btn__label { grid-area: 1 / 1; white-space: nowrap; } /* La modale défile sur elle-même (max-height + overflow réglés dans Oxygen) ; sur iOS le verrou de Lenis ne retient pas le body en bout de course. */ .contact-form { overscroll-behavior: contain; } /* Backdrop de la modale contact — opacité animée en JS (GSAP), sous la .contact-form (z-index 100) */ .contact-form__overlay { position: fixed; inset: 0; z-index: 99; background-color: var(--secondary, #000); opacity: 0; visibility: hidden; cursor: pointer; } /* Avant que le JS ne construise le slider, la piste garde ses logos à taille réelle et dépasse de l'écran : la page défile alors latéralement, et tout ce qui se dimensionne sur la fenêtre de mise en page en hérite — le tiroir du menu faisait 370px sur un écran de 320. Les règles ci-dessous ne s'appliquant qu'une fois la classe posée, il faut contenir cet état intermédiaire à part. */ .partners-carousel:not(.partners-carousel--slider) { max-width: 100%; overflow: hidden; } /* --- Carrousel partenaires : slider infini (mise en page ; le déplacement est piloté par GSAP) --- */ /* Le wrapper devient une fenêtre qui rogne les logos ; les flèches prev/next restent la navigation. */ .partners-carousel--slider .partners-carousel__wrapper { position: relative; /* offsetParent des logos → leur offsetLeft reste stable au resize */ flex: 1 1 auto; min-width: 0; /* autorise le flex item à rétrécir → le rognage fonctionne */ /* Rogne les logos hors piste, mais à gauche et à droite seulement : l'effet loupe agrandit le logo central de 20 %, soit 8px de débord vertical que `overflow:hidden` seul coupait. Le rognage se fait au bord de la boîte de padding, d'où le padding vertical (et les marges négatives qui lui rendent sa place). `clip-path` ne convient pas : il masque sans contenir, la page défilerait de toute la longueur de la piste. */ overflow: hidden; box-sizing: content-box; padding-block: 16px; margin-block: -16px; flex-wrap: nowrap; justify-content: flex-start; cursor: grab; } .partners-carousel--slider .partners-carousel__wrapper:active { cursor: grabbing; } /* Les logos ne se compressent pas : le helper les déplace par transform (x/xPercent) */ .partners-carousel--slider .partner-logo { flex: 0 0 auto; } /* Mobile landscape (breakpoint Oxygen 767px) et en dessous : flèches masquées (côté Oxygen), logos bord à bord, carrousel borné à 100 % pour éviter tout overflow horizontal, et gap élargi pour compenser l'effet d'agrandissement qui resserrait trop les logos. */ @media (max-width: 767px) { .partners-carousel--slider { max-width: 100%; /* Pas de rognage ici : la piste contient déjà son débordement, et couper à ce niveau recouperait les logos agrandis. */ gap: 0; } /* Visibilité des flèches masquée côté Oxygen (breakpoint Phone Landscape). */ /* Logos bord à bord (plus de gouttières de flèches) et davantage espacés : l'effet d'agrandissement les resserrait trop avec un petit gap. */ .partners-carousel--slider .partners-carousel__wrapper { gap: var(--gap-45, 40px); } } /* Header flottant : au repos il est à 15px du haut (réglé dans Oxygen), et il se rapproche à 5px dès que la page défile. Seul l'état défilé est ici : il dépend d'une classe posée par header.js, que le builder ne connaît pas. La transition l'accompagne plutôt que de vivre dans les réglages Oxygen — bien qu'elle y soit exprimable — parce qu'elle n'existe que pour animer ce changement d'état : les séparer, c'est risquer qu'on retire l'une en laissant l'autre. */ .header { transition: top 0.3s ease-out; } .header.is-scrolled { top: 5px; } @media (prefers-reduced-motion: reduce) { .header { transition: none; } } /* État de repos du bouton flèche : la flèche occupe le padding large, à gauche, dégagée du texte. Au survol elle glisse à droite et il faut lui libérer la place — c'est arrowButtons.js qui inverse les deux paddings, dans la même timeline GSAP que la flèche. Piloté ici en :hover, ce demi-geste se désynchronisait et cessait de s'appliquer au moindre changement de cascade ou de media query ; côté JS il ne peut plus diverger de la flèche qu'il accompagne. Ces deux longueurs sont la géométrie propre du bouton (calée sur la course de la flèche), pas du rythme d'espacement : aucun token --gap-* ne vaut 40 ou 20px. Le JS les lit ici, ce fichier reste donc la source unique. */ .breakdance-menu .menu__last-entry.arrow-btn .breakdance-menu-link { --arrow-btn-pad-wide: 40px; --arrow-btn-pad-narrow: 20px; padding-inline: var(--arrow-btn-pad-wide) var(--arrow-btn-pad-narrow); } /* Habillage « ADN » : le mot doit dépasser de la vidéo des quatre côtés, or sa colonne va de 340 à 1069px à l'intérieur d'un même point d'arrêt — aucune valeur en px ne déborde partout. 44cqw le garde à 1,11 fois sa colonne quelle que soit la taille. Volontairement absent des réglages Oxygen, qui n'exprime pas les unités de conteneur : ne pas l'y redéclarer, il gagnerait la cascade. */ /* Contient le débord latéral du motif « ADN » sans couper son débord vertical. `clip` sur un seul axe est la seule combinaison légale avec `visible` ; Oxygen ne l'exprime pas. */ .our-dna { overflow-x: clip; overflow-y: visible; } .our-dna__video-container { container-type: inline-size; } .our-dna__video-text { font-size: 44cqw; } /* Dans le tiroir, le libellé peut revenir à la ligne plutôt que d'élargir l'entrée au-delà de la largeur du panneau. Sur desktop il reste sur une ligne (largeur stable au survol). */ @media (max-width: 1119px) { .menu__last-entry .arrow-btn__label { white-space: normal; } } /* Le conteneur du site est plafonné à 1371px : au-dessus, ses marges automatiques écartent le contenu des bords ; en dessous il occupe toute la largeur et seuls ses 25px de padding l'en séparent — d'où un texte de héros collé au bord jusqu'à 1371px, puis 60px d'un coup. Ce retrait complète la marge au lieu de s'y ajouter : identique sur téléphone et au-delà de 1440px, il ne comble que le creux. Aucun point d'arrêt Oxygen ne tombe sur cette largeur — et le `right` des icônes a été retiré du builder pour suivre la même valeur. Ne pas le redéclarer là-bas. Sélecteur à deux classes : le conteneur porte aussi `.container`, dont Oxygen fixe le padding — à spécificité égale sa feuille, écrite après, l'emporterait. */ .hero .hero__text-wrapper { --hero-inset: max( var(--gap-25, 25px), min(var(--gap-60, 60px), 5vw) - max(0px, (100vw - var(--container-size, 1371px)) / 2) ); padding-inline: var(--hero-inset); } .wrapper-idon { right: var(--hero-inset); } /* Créés à l'exécution par hero.js. En span, parce qu'un
n'admet pas de
— d'où le display explicite : SplitText ne le pose que sur ses
, et ni le masquage du mot ni la translation de son contenu ne s'appliquent à un élément inline. */ .hero__description-word { display: inline-block; } .hero__description-word-inner { display: block; } /* Éléments créés à l'exécution par referenceCards.js. `inherit` leur donne le rayon de la carte parente (border-radius n'est pas héritée par défaut) : le reflet s'y clippe lui-même, et le wrapper de flip — qui n'a pas de fond — n'en a besoin que pour donner sa forme à l'ombre du tilt. Ces sélecteurs ne matchent rien si le JS n'a pas tourné. */ .reference-card__flip-inner, .reference-card__glare { border-radius: inherit; } /* ========================================================================= CSS écrit à la main, rapatrié depuis Oxygen (2026-08-14) ------------------------------------------------------------------------- Ces règles vivaient dans le champ « CSS personnalisé » des classes Oxygen, donc en base de données et hors de git. Elles ont été VIDÉES côté Oxygen : ce fichier en est désormais la seule source. Ne pas les redéclarer dans le builder — ce serait une seconde source qui divergerait. Le `:selector` d'Oxygen a été résolu en nom de classe réel. RÈGLE : on ne met ici que ce que les réglages Oxygen ne savent PAS faire — viser autre chose que la classe elle-même (enfant, voisin, pseudo-élément), ou une propriété absente de l'interface (flex-wrap, column-count, writing-mode, -webkit-text-stroke, variables CSS). Tout ce qui est réglable dans le builder reste dans le builder : sinon on a deux sources pour la même propriété, et Oxygen gagne de toute façon (ses feuilles sont écrites après celle-ci, et il les imprime lui-même — aucune priorité d'enqueue n'y change quoi que ce soit). ========================================================================= */ .container .breakdance-menu,.container .breakdance-menu-list { width:100%; } .expertise-card__description { column-count:2; } .expertise-card__description * { margin:0; } @media (max-width:767px) { .expertise-card__description { column-count:1; } .expertise-card__description * { margin-block:var(--gap-10); } } .expertise-card__wrapper:hover img { transform:scale(1.03); } .primary-list ul { color:var(--bde-brand-primary-color); font-weight:600; } .header + * { margin-top:100px; } .header__menu .breakdance-menu-list { gap:var(--gap-10); } .reference-card__tail__description * { margin:0; padding:0; color:var(--secondary); } .accordion__entries .bde-faq__icon { background:var(--gray); padding:18px; } .accordion__entries .bde-faq__question { flex-direction:row-reverse; justify-content:flex-end; gap:var(--gap-25); } .video-testimonial__grid { flex-wrap:wrap; } /* Trois colonnes seulement à partir de la tablette. Sans borne, ce calcul s'appliquait aussi au téléphone, où la grille est pourtant déjà passée en colonne : à 385px de large il donnait (335 - 250) / 3 = 28px, et la vidéo de témoignage tombait à cette taille. */ @media (min-width: 768px) { .video-testimonial__grid>* { flex:0 1 calc((100% - 250px) / 3)!important; max-width:calc((100% - 250px) / 3); } } /* La carte CEO est une rangée flex qui passe à la ligne : sur téléphone le logo LinkedIn retombe sous la PHOTO, à gauche, au lieu de suivre le texte. En grille, la photo occupe les deux lignes et le logo se range sous le nom et le poste. */ @media (max-width: 767px) { /* Classes doublées : cette feuille passe avant celles d'Oxygen, qui définit déjà ces mêmes sélecteurs — à spécificité égale, c'est la sienne qui l'emporte. */ .footer__ceo.footer__ceo { display: grid; grid-template-columns: auto 1fr; justify-content: start; align-items: center; column-gap: 20px; row-gap: 12px; } .footer__ceo .footer__ceo-img-wrapper { grid-row: 1 / span 2; align-self: center; } .footer__ceo .footer__ceo-infos, .footer__ceo > .bde-icon { grid-column: 2; justify-self: start; } .footer__ceo .footer__ceo-img-wrapper img { width: 110px; height: auto; } } /* Les tailles de titre d'Oxygen forment une échelle modulaire : h6 = base, et chaque niveau multiplie par --bde-font-size-ratio (h2 = 16 x 1,25^4 = 39px). Le ratio est codé en dur dans le gabarit Twig du plugin, sans variante par point d'arrêt : la même échelle s'applique donc au téléphone, où les titres débordent de leur cadre. Réduire le ratio ici les recalcule tous d'un coup, en gardant leurs proportions. */ @media (max-width: 767px) { /* `:root:root` et non `:root` : cette feuille est imprimée AVANT celles d'Oxygen, donc à spécificité égale c'est la sienne qui gagne. Doubler le sélecteur suffit, sans recourir à !important. */ :root:root { --bde-font-size-ratio: 1.180; /* Ces deux-là sont des variables Oxygen, réglées à une valeur unique dans le builder : il n'y expose pas de déclinaison par point d'arrêt. Elles portent les titres de cartes, qui débordaient de leur cadre à 30px. */ --font-size-h1: 2rem; --font-size-h2: 1.5rem; } } /* Firefox peint la vidéo dans sa propre couche de composition : ni l'overflow du wrapper ni un border-radius sur l'élément ne la rognent — seuls les contrôles natifs suivent, d'où des coins carrés sur l'image et arrondis sur la barre de lecture. `clip-path`, lui, est appliqué par le compositeur. ⚠️ La valeur doit rester alignée sur le rayon réglé dans le builder (20px). */ .video-story { --video-radius: 20px; } .video-story { position: relative; } .video-story .ee-video-container, .video-story .ee-video { border-radius: inherit; clip-path: inset(0 round var(--video-radius)); } /* Ceinture et bretelles : sur les Firefox qui décodent la vidéo en matériel, ni le border-radius ni le clip-path ne l'atteignent — la couche vidéo est composée par dessus. Ce calque repeint le fond du wrapper (noir) par-dessus les quatre coins, ce qui ne dépend d'aucun clipping. Invisible là où le clip-path suffit déjà. */ .video-story::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: 0 0 0 100vmax #000; pointer-events: none; } /* En plein écran la vidéo sort de ce wrapper : le calque n'a plus lieu d'être. */ .video-story:has(video:fullscreen)::after { display: none; } /* En téléphone, la vidéo prend toute la largeur et « Promo N », posé en absolu à sa gauche, tombe hors de l'écran. On lui réserve la place plutôt que de le laisser couper : le texte revient au bord du conteneur, la vidéo se décale d'autant. */ @media (max-width: 767px) { .video-testimonial__grid .text-story { left: 0; width: 58px; font-size: 50px; } /* La marge vaut la largeur du texte vertical : il vient donc buter contre le bord gauche de la vidéo, sans intervalle. */ .video-testimonial__grid .video-story { margin-left: 48px; } } /* Seuls le contour et le sens d'écriture restent ici : l'interface Oxygen ne les expose pas. La couleur (transparent) et le transform sont dans les réglages. */ .text-story { -webkit-text-stroke: 2px var(--primary); writing-mode: vertical-rl; } .arrow-btn { --translate-x:0; } .arrow-btn .breakdance-menu-link::before { content:""; background:var(--chevron-right-primary) no-repeat center center / contain; width:20px; height:20px; position:absolute; left:10px; transform:translateX(var(--translate-x,0)); } .page-content h2 { font-size:1.5rem; font-family:var(--body); line-height:1; } .page-content h3 { font-size:1.2rem; font-family:var(--body); line-height:1; } /* Pas de largeur sur .cmplz-document : Complianz pose cette classe sur le , donc la contrainte s'appliquait à toute la page, footer compris. La colonne de lecture est déjà tenue par .page-content. */ .footer__copyright__links li:not(:last-child)::after { content:"-"; margin-left:10px; } @media (max-width:1023px) { .footer__copyright__links li:not(:last-child)::after { margin-left:5px!important; } } @media (max-width:767px) { .footer__copyright__links li::after { display:none; } } /* Footer calé en bas de l'écran quand le contenu ne remplit pas la page (404, pages courtes). Le header étant en position:fixed, seuls
et .footer sont des items de la colonne. body et main ne sont pas des éléments Oxygen : le builder ne sait pas les styler. */ body { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; } main { flex:1 0 auto; } /* 404 : contenu centré dans la hauteur laissée libre entre le header et le footer. Scopé par la classe error404 que WordPress pose lui-même sur . */ body.error404 main { display:flex; flex-direction:column; justify-content:center; } /* Le style global du bouton primary réserve jusqu'à 155px à droite (clamp(50px,17vw,155px)) pour ses grands CTA ; sur le libellé court de la 404 c'est déséquilibré. La flèche ::after occupe 22→48px depuis le bord droit, 70px la dégagent sans la serrer. La classe est posée par Oxygen sur le wrapper, pas sur le : d'où le sélecteur d'enfant. */ .page-404__cta .button-atom--primary { padding-right:70px; } /* Les vidéos sont en `object-fit: cover` pour remplir leur cadre dans la page. En plein écran le