d'image remplace le
![]()
de la maquette : meme debord de 9 %
en haut et 118 % de hauteur, que la parallaxe (--py) fait glisser */
.mtr-page .section-photo .section-photo-img{
position:absolute;left:0;top:-9%;width:100%;height:118%;
background-size:cover;background-position:center;
transform:translate3d(0,var(--py,0px),0) scale(1.02);will-change:transform;
filter:grayscale(1) contrast(1.08) brightness(.97);
}
@media (prefers-reduced-motion: reduce){
.mtr-page .section-photo .section-photo-img{transform:none;}
}
/* ---
: la classe est sur le widget, et la
qu'il
contient prendrait sinon l'interlignage des paragraphes --- */
.mtr-page .callout p{line-height:inherit;}
/* --- Le contexte : 3 paragraphes en colonnes (orphans/widows de la maquette) --- */
.mtr-page.contexte .body-columns p{orphans:3;widows:3;}
/* --- fiche projet : la maquette est un
, dont la marge par defaut
(16px en haut et en bas) fait partie du rendu valide --- */
.mtr-page.meta-strip{border-top:16px solid var(--bg);}
.mtr-page .meta-grid{margin-bottom:16px;}
/* --- fiche projet : dt/dd de la maquette, devenus des widgets Titre --- */
.mtr-page .meta-item .meta-dt{
font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.56px;
letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);
margin-bottom:6px;
}
.mtr-page .meta-item .meta-dd{
font-weight:600;font-size:15.04px;color:var(--text);line-height:1.35;
}
/* --- liste des capacites : le texte prend la place restante --- */
.mtr-page .cap-item .cap-mark{flex:none !important;width:auto !important;}
.mtr-page .cap-item .cap-txt{flex:1 1 0 !important;min-width:0;width:auto !important;}
/* --- marges portees par un style inline dans la maquette --- */
.mtr-page .cap-intro{margin-top:40px;}
/* --- conclusion : deux colonnes ; la 1re phrase en Barlow majuscule
(`.closing .wrap > p:first-child` dans la maquette) --- */
.mtr-page.closing .closing-lead p{
font-family:'Barlow Condensed',ui-sans-serif,sans-serif;font-weight:700;
text-transform:uppercase;font-size:clamp(22.4px,2.3vw,30.4px);line-height:1.15;
}
.mtr-page.closing .muted p{color:var(--text-muted);font-size:15.68px;}
/* --- animations d'entree : le fadeInUp d'Elementor monte de 100 % de la
hauteur de l'element, en 1,25 s. On le ramene au .reveal de la maquette.
Changer l'animation dans Elementor (Advanced -> Motion Effects) reste
possible : cette regle ne vise que fadeInUp. --- */
@keyframes mtr-reveal{
from{opacity:0;transform:translateY(26px);}
to{opacity:1;transform:none;}
}
.mtr-page .animated.fadeInUp{
animation-name:mtr-reveal !important;
animation-duration:.8s !important;
animation-timing-function:cubic-bezier(.16,.8,.4,1) !important;
}
/* ==================================================================
SECTION CONTACT (ajoutee 2026-10-05)
Le formulaire est le Gravity Form n° 2, insere par un widget Shortcode.
La maquette n'avait qu'une imitation de son balisage : les regles
ci-dessous visent le VRAI balisage de Gravity Forms 2.5+ (.gform_fields,
.gfield, .gchoice, input.gform_button) et passent en !important ce que
la feuille du plugin (theme « Gravity Forms 2.5 » ou « Orbital »)
imposerait sinon.
================================================================== */
/* --- etapes 1-2-3 : le numero etait un compteur CSS sur un , c'est
desormais un widget Titre (.contact-step-num) --- */
.mtr-page.contact .contact-steps{display:flex !important;flex-direction:column !important;gap:clamp(28px,4vw,44px) !important;}
.mtr-page.contact .contact-step{
display:grid !important;grid-template-columns:52px minmax(0,1fr) !important;
column-gap:20px !important;align-items:start;
}
.mtr-page.contact .contact-step > *{width:auto !important;max-width:none !important;}
.mtr-page.contact .contact-step-num{
width:52px !important;height:52px;border-radius:50%;
display:grid;place-items:center;
background:var(--navy-bg);color:var(--navy-text);
box-shadow:inset 0 0 0 2px var(--teal-500);
font-family:'Barlow Condensed',ui-sans-serif,sans-serif;font-weight:700;font-size:20px;line-height:1;
}
.mtr-page.contact .contact-step-body{padding-top:10px;}
.mtr-page.contact .contact-step-body h3.elementor-heading-title{
font-size:clamp(20.8px,2vw,25.6px);color:var(--accent);line-height:1.1;margin:0 0 8px;
}
.mtr-page.contact .contact-step-txt p{color:var(--text-muted);font-size:15.68px;}
.mtr-page.contact .contact-intro{margin-bottom:clamp(28px,4vw,44px);max-width:46ch;}
.mtr-page.contact .contact-intro p{font-size:17.28px;color:var(--text);}
/* --- deux colonnes (texte 5 / formulaire 7), une seule sous 860px --- */
.mtr-page.contact .contact-grid{
display:grid !important;grid-template-columns:minmax(0,5fr) minmax(0,7fr) !important;
gap:clamp(32px,6vw,80px) !important;align-items:start !important;
}
.mtr-page.contact .contact-grid > *{width:auto !important;max-width:none !important;min-width:0;}
@media (max-width:860px){ .mtr-page.contact .contact-grid{grid-template-columns:minmax(0,1fr) !important;} }
/* --- Gravity Forms : grille des champs (2 colonnes, « Half » = 1 colonne).
Le plugin pose une grille de 12 colonnes et `span 6` sur les demi-champs :
on remplace les deux, sinon les demi-champs creent des colonnes en trop. --- */
.mtr-page .contact-form .gform_wrapper{margin:0 !important;padding:0 !important;max-width:none !important;}
.mtr-page .contact-form .gform_heading{display:none;}
.mtr-page .contact-form .gform_fields{
display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:18px 24px !important;margin:0 !important;padding:0 !important;list-style:none;
}
.mtr-page .contact-form .gfield{grid-column:1 / -1 !important;margin:0 !important;padding:0 !important;border:0;min-width:0;}
.mtr-page .contact-form .gfield--width-half{grid-column:span 1 !important;}
@media (max-width:560px){ .mtr-page .contact-form .gfield--width-half{grid-column:1 / -1 !important;} }
.mtr-page .contact-form .gfield.gfield_visibility_hidden,
.mtr-page .contact-form .gform_hidden{display:none !important;}
/* --- champs --- */
.mtr-page .contact-form input[type=text],
.mtr-page .contact-form input[type=email],
.mtr-page .contact-form input[type=tel],
.mtr-page .contact-form input[type=url],
.mtr-page .contact-form input[type=number],
.mtr-page .contact-form select,
.mtr-page .contact-form textarea{
width:100% !important;max-width:none !important;box-sizing:border-box !important;height:auto !important;
font-family:'Public Sans',ui-sans-serif,system-ui,sans-serif !important;font-size:15.68px !important;
font-weight:400 !important;line-height:1.4 !important;color:var(--text) !important;
background:var(--bg-elevated) !important;border:1px solid var(--steel-200) !important;
border-radius:4px !important;padding:20px !important;box-shadow:none !important;
transition:border-color .2s ease, box-shadow .2s ease;
}
.mtr-page .contact-form textarea{height:156px !important;min-height:156px;resize:vertical;display:block;}
.mtr-page .contact-form ::placeholder{color:var(--text-soft) !important;opacity:1 !important;}
.mtr-page .contact-form input:focus,
.mtr-page .contact-form select:focus,
.mtr-page .contact-form textarea:focus{
outline:none !important;border-color:var(--accent) !important;
box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
/* --- question Oui/Non (champ Radio Buttons) --- */
.mtr-page .contact-form .gfield--type-radio{margin-top:8px !important;}
.mtr-page .contact-form .gfield--type-radio legend.gfield_label,
.mtr-page .contact-form .gfield--type-radio .gfield_label{
display:block;font-family:'Public Sans',ui-sans-serif,system-ui,sans-serif !important;
font-weight:700 !important;font-size:15.04px !important;line-height:1.5 !important;
color:var(--text) !important;padding:0 !important;margin:0 0 14px !important;
}
.mtr-page .contact-form .gfield_required,
.mtr-page .contact-form .gfield_required_text{
color:var(--text-muted) !important;font-weight:600 !important;font-style:normal !important;font-size:inherit !important;
}
.mtr-page .contact-form .gfield_radio{display:flex !important;flex-direction:column !important;gap:12px !important;}
.mtr-page .contact-form .gchoice{display:flex !important;align-items:center !important;gap:12px !important;margin:0 !important;}
.mtr-page .contact-form .gchoice label{
font-size:15.2px !important;color:var(--text) !important;cursor:pointer;margin:0 !important;
padding:0 !important;max-width:none !important;font-weight:400 !important;
}
.mtr-page .contact-form input[type=radio]{
-webkit-appearance:none !important;appearance:none !important;margin:0 !important;flex:none;
width:22px !important;height:22px !important;border-radius:50% !important;
border:2px solid var(--text) !important;background:transparent !important;box-shadow:none !important;
display:grid !important;place-items:center;cursor:pointer;padding:0 !important;
}
.mtr-page .contact-form input[type=radio]::before{
content:"" !important;width:10px !important;height:10px !important;border-radius:50% !important;
background:var(--accent) !important;transform:scale(0);transition:transform .15s ease;
position:static !important;inset:auto !important;opacity:1 !important;
}
.mtr-page .contact-form input[type=radio]:checked{border-color:var(--accent) !important;}
.mtr-page .contact-form input[type=radio]:checked::before{transform:scale(1);}
.mtr-page .contact-form input[type=radio]:focus-visible{outline:2px solid var(--accent) !important;outline-offset:2px;}
/* --- correctifs contre le THEME du site (style.css du theme Atomik),
releves sur la page reelle le 2026-10-05 :
1. il sort tout bouton radio de Gravity Forms de l'ecran
(`position:absolute;left:-9999px`) et dessine a la place un rond
blanc sur le ::before du