/*
Theme Name: La Forge
Theme URI:
Description: Enfold child theme.
Author: Larsen
Author URI: https://larsen.fr
Template: enfold
Version: 0.4.0
*/
/* =========================================================================
La Forge — webfonts locales (Cinzel titres + Roboto corps) · charte V2 · 2026-07-17
Fichiers dans /fonts/ (child-theme). Zéro appel Google Fonts distant
(cf. functions.php : add_filter('avf_output_google_webfonts_script','__return_false')).
Licences : Cinzel OFL, Roboto Apache 2.0 — usage commercial libre (cf. assets/canon/fonts/README.md).
========================================================================= */
@font-face{
font-family:'Cinzel';
src:url('fonts/Cinzel-Regular.ttf') format('truetype');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Cinzel';
src:url('fonts/Cinzel-Bold.ttf') format('truetype');
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Roboto';
src:url('fonts/Roboto-Regular.ttf') format('truetype');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Roboto';
src:url('fonts/Roboto-Bold.ttf') format('truetype');
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Roboto';
src:url('fonts/Roboto-Italic.ttf') format('truetype');
font-weight:400; font-style:italic; font-display:swap;
}
/* =========================================================================
La Forge — formulaires FluentForm (child-theme) · P7 #2003 · 2026-07-06
FluentForm n'est PAS un élément Enfold → CSS custom légitime (habillage charte).
La LARGEUR et les couleurs de fond/menu sont gérées en natif Enfold (pas ici).
Teinte : Ambre #D07A2C · fond #0f0f0f · crème #e8e0d3.
========================================================================= */
:root{ --lf-amber:#D07A2C; --lf-amber-soft:#e0954e; --lf-bg:#0f0f0f; --lf-panel:#17140f; --lf-line:#3a2f22; --lf-cream:#e8e0d3; --lf-muted:#a99d88; }
.fluentform, .frm-fluent-form{
max-width:760px; margin:0 auto; color:var(--lf-cream);
font-family:'Cormorant Garamond',Georgia,serif; font-size:1.05rem;
}
/* labels */
.fluentform .ff-el-input--label label{
color:var(--lf-cream); font-family:'Cinzel',serif; font-weight:600;
letter-spacing:.04em; font-size:.92rem; margin-bottom:.5rem; line-height:1.35;
}
.fluentform .ff-el-is-required .ff-el-input--label label:after{ color:var(--lf-amber); }
/* champs */
.fluentform input[type=text], .fluentform input[type=email], .fluentform input[type=tel],
.fluentform input[type=number], .fluentform textarea, .fluentform select,
.fluentform .ff-el-form-control{
background:var(--lf-panel) !important; color:var(--lf-cream) !important;
border:1px solid var(--lf-line) !important; border-radius:5px !important;
padding:.85rem 1rem !important; font-size:1.05rem; line-height:1.5;
box-shadow:none !important; transition:border-color .18s ease, box-shadow .18s ease;
}
.fluentform textarea{ min-height:130px; resize:vertical; }
.fluentform ::placeholder{ color:#8a7f6c; opacity:1; }
.fluentform .ff-el-form-control:focus{
border-color:var(--lf-amber) !important;
box-shadow:0 0 0 3px rgba(208,122,44,.18) !important; outline:none !important;
}
.fluentform .ff-el-group{ margin-bottom:1.5rem; }
/* checkbox RGPD */
.fluentform .ff-el-form-check input[type=checkbox]{ accent-color:var(--lf-amber); width:18px; height:18px; }
.fluentform .ff-el-form-check-label, .fluentform .ff-el-form-check label{ color:var(--lf-muted); font-size:.95rem; line-height:1.5; }
/* ---- multi-step : barre de progression + titres ---- */
#top .fluentform .ff-step-header{ margin-bottom:2rem; }
/* ---- Prefixe #top : NECESSAIRE, pas cosmetique (P7 #2932, 2026-09-02).
fluent-forms-public.css pose exactement la meme specificite que nous :
.fluentform .ff-el-progress{ height:1.3rem } -> (0,2,0), comme la notre
.fluentform .ff-step-titles li.ff_active{ color:#007bff } -> (0,3,1), comme la notre
A egalite, c'est l'ORDRE DE CHARGEMENT qui tranche — et il differait d'une langue a
l'autre. `#top` (l'enveloppe d'Enfold) porte nos regles a (1,x,y) : elles gagnent
quel que soit l'ordre, sans recourir a !important. ---- */
#top .fluentform .ff-el-progress{ background:#241d14 !important; border-radius:20px; height:6px; overflow:hidden; }
#top .fluentform .ff-el-progress-bar{
background:linear-gradient(90deg,var(--lf-amber),var(--lf-amber-soft)) !important;
color:transparent !important; height:6px; box-shadow:0 0 12px rgba(208,122,44,.5);
}
#top .fluentform .ff-step-titles{ display:flex; gap:.5rem; margin:.4rem 0 1.25rem; padding:0; list-style:none; }
#top .fluentform .ff-step-titles li{
flex:1 1 0; min-width:0; text-align:center; color:#6f6555; font-family:'Cinzel',serif;
font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding-bottom:.4rem;
border-bottom:2px solid #2a2318; word-break:break-word; hyphens:auto;
display:flex; flex-direction:column; align-items:center;
}
/* ---- Hauteur d'en-tete EGALE d'une langue a l'autre (P7 #2932, 2026-09-02).
Retour Arsene : « sur le formulaire en anglais la barre de progression est plus
epaisse ». Mesure : la barre fait 6px des deux cotes et les deux pages chargent
les MEMES feuilles — ce qui differe, c'est la rangee de titres. « Your experience »
passe sur deux lignes la ou « Ton vecu » tient sur une, et l'en-tete entier monte.
On reserve donc la hauteur de deux lignes dans les deux langues. ---- */
.fluentform .ff-step-titles .lfg-step-label{
display:block; line-height:1.25; min-height:2.5em;
}
/* Compteur « n / N » : le repere le plus lisible, et sans traduction. */
.fluentform .lfg-step-count{
font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.16em;
color:var(--lf-amber); text-align:right; margin:.5rem 0 0; font-variant-numeric:tabular-nums;
}
/* Titre de l'etape courante, en clair : la rangee ci-dessus est en 0.72rem
majuscules, illisible au premier coup d'oeil. */
.fluentform .lfg-step-legend{
margin:0 0 1.6rem; text-align:center; font-family:'Cinzel',serif;
font-size:1.05rem; letter-spacing:.04em; color:var(--lf-cream);
}
@media (max-width:480px){
.fluentform .lfg-step-legend{ font-size:.95rem; margin-bottom:1.2rem; }
}
/* puces rondes numerotees (override du badge carre blanc par defaut FluentForm free —
cf. plugins/fluentform/assets/css/fluent-forms-public.css .ff-step-titles li:before,
content:counter(step) deja pose par le plugin, on ne redefinit que l'habillage) */
.fluentform .ff-step-titles li:before{
background:transparent !important; border:1.5px solid var(--lf-line) !important;
border-radius:50% !important; color:var(--lf-muted) !important;
width:26px !important; height:26px !important; line-height:23px !important;
font-size:.72rem !important; font-family:'Cinzel',serif; font-weight:600;
margin:0 auto .4rem !important; box-shadow:none;
}
/* ---- Le trait de liaison entre les pastilles d etapes est RETIRE (P7 #2930, 2026-09-02).
FluentForm le pose ainsi :
.ff-step-titles li:after{ background:#000; height:2px; top:9px; left:-50%; width:100% }
Le top:9px centre le trait sur la pastille NATIVE de 20px (9 + 1 = 10 = sa moitie). Or la
regle ci-dessus porte les pastilles a 26px, dont le milieu est a 13px : le trait passe donc
2 a 4px trop haut, et le jeu left:-50% / first-child / last-child le fait s interrompre en
decalage des cercles. Recaler ce top au pixel le rendrait dependant de la taille des
pastilles, y compris de la variante mobile a 20px plus bas.
Surtout, il fait triple emploi : la barre de progression au-dessus donne l avancement, et
le border-bottom de li.ff_active marque l etape courante. Retour Arsene : « cela porte a
confusion ». On le supprime plutot que de le recalibrer. ---- */
.fluentform .ff-step-titles li:after{ display:none; }
/* ---- Etats d etape : FluentForm nomme ses classes « ff_active » et « ff_completed »
(assets/css/fluent-forms-public.css : .ff-step-titles li.ff_active / li.ff_completed ;
son JS ne pose « active » que sur d autres composants). Ces regles ciblaient « active » et
« completed » tout court : elles n ont donc JAMAIS pu s appliquer, et la mise en avant de
l etape courante n a jamais ete visible. Corrige apres balayage, P7 #2930, 2026-09-02. ---- */
#top .fluentform .ff-step-titles li.ff_active{ color:var(--lf-amber); border-bottom-color:var(--lf-amber); font-weight:700; }
.fluentform .ff-step-titles li.ff_active:before{
background:var(--lf-amber) !important; border-color:var(--lf-amber) !important; color:#161310 !important;
box-shadow:0 0 10px rgba(208,122,44,.5);
}
#top .fluentform .ff-step-titles li.ff_completed{ color:var(--lf-cream); border-bottom-color:var(--lf-line); }
.fluentform .ff-step-titles li.ff_completed:before{
border-color:var(--lf-amber-soft) !important; color:var(--lf-cream) !important;
}
@media (max-width:480px){
.fluentform .ff-step-titles{ gap:.2rem; }
.fluentform .ff-step-titles li{ font-size:.56rem; letter-spacing:.02em; padding-bottom:.3rem; }
.fluentform .ff-step-titles li:before{ width:20px !important; height:20px !important; line-height:17px !important; font-size:.6rem !important; margin:0 auto .3rem !important; }
}
/* PV-2 (2026-07-21) : sous ~400px, 5 titres d'etape complets ne tiennent plus (coupures
mi-mot moches malgre hyphens/word-break) -> pattern stepper mobile standard : ne garder
que les puces numerotees + le trait actif, masquer le libelle texte (reste dans le DOM/
accessible, juste visuellement masque via font-size:0 — pas de perte a11y). */
@media (max-width:400px){
.fluentform .ff-step-titles li{ font-size:0; padding-bottom:.5rem; }
.fluentform .ff-step-titles .lfg-step-label{ min-height:0; }
}
/* ---- boutons ---- */
.fluentform .ff-btn, .fluentform button[type=submit], .fluentform .step-nav button{
font-family:'Cinzel',serif; font-weight:600; letter-spacing:.06em; font-size:.92rem;
padding:.8rem 1.9rem !important; border-radius:5px !important; border:1px solid transparent;
cursor:pointer; transition:all .18s ease;
}
.fluentform .ff-btn-submit, .fluentform .ff-btn-next, .fluentform button[type=submit]{
background:var(--lf-amber) !important; color:#161310 !important; border-color:var(--lf-amber) !important;
}
.fluentform .ff-btn-submit:hover, .fluentform .ff-btn-next:hover, .fluentform button[type=submit]:hover{
background:var(--lf-amber-soft) !important; box-shadow:0 4px 18px rgba(208,122,44,.35);
}
.fluentform .ff-btn-prev{
background:transparent !important; color:var(--lf-muted) !important; border-color:var(--lf-line) !important;
}
.fluentform .ff-btn-prev:hover{ color:var(--lf-cream) !important; border-color:var(--lf-muted) !important; }
.fluentform .step-nav{ display:flex; justify-content:space-between; margin-top:2rem; }
/* messages d'erreur */
.fluentform .error, .fluentform .ff-el-is-error .text-danger, .fluentform .ff-el-form-control.ff-el-is-error{ color:#e59a92; border-color:#a5564d !important; }
/* =========================================================================
La Forge — header logo SVG (lockup horizontal) : scoping taille + anti-doublon
Defaut Enfold : SVG logo inline sans width/height -> rendu a la taille
intrinseque du viewBox => hors gabarit header.
Cf. doctrine wordpress/enfold-protocole-design-tech.md P13 (SVG auto-porte).
Palette 100% sombre (tous colorsets #141414/#1c1c1c) -> pas besoin de 2
couleurs de logo differentes transparent/scroll, l'ambre convient aux 2
etats ; on masque juste le doublon "sub" (swap alternate) pour eviter le
stack visuel, on garde uniquement le logo principal, correctement calibre.
2026-07-18 (L1 lockup souverain) : bascule flamme seule (carre 1500x1500)
-> lockup horizontal (flamme + wordmark, viewBox 2507.41x808.60, ratio
~3.10:1) -> dimensions passees de 46x46 (carre) a 149x48 (meme ratio que
le viewBox, largeur recalculee : 48 * 2507.41/808.60 ~= 148.8px).
2026-07-20 (Tier 2 logo, P7 #2300, ratio "hybride" decide par Arsene :
PICTO_GAP_RATIO 0.55->0.70, FLAME_TO_CAP_RATIO 2.75->2.70) : nouveau
viewBox 2541.62x795.60 (ratio 3.195:1) -> largeur recalculee a hauteur
fixe 48px : 48 * 2541.62/795.60 ~= 153.4px -> 153px. Assets sources :
assets/canon/lockup-2026-07-20-hybrid/ (repo) — fichier deploye ecrase
le meme chemin uploads que le 07-18 (attachment #150, meme URL, pas de
nouvel upload media).
L1 (padding + centrage vertical, retour Arsene checkpoint 07-19) :
Enfold centre nativement le logo via line-height=hauteur de la barre
menu sur un enfant inline-block/vertical-align — notre `line-height:0`
+ `a.av-contains-svg{display:block}` cassaient ce mecanisme (display:
block ignore vertical-align) -> le logo restait cale en haut du bloc.
Fix (v1, position:absolute+translateY) valide desktop MAIS casse en
mobile : `.av-logo-container{height:auto}` en responsive + logo devenu
seul enfant hors-flux -> conteneur s'effondre a 0 -> logo coupe en haut
(`.inner-container{overflow:hidden}`). Fix v2 (retenu) : restaure le
mecanisme NATIF Enfold — `.logo` reste dans le flux, inline-block +
vertical-align:middle, herite du line-height pose par Enfold sur
`.av-logo-container` (88/90/80/116/118px selon etat) ; l'ancre passe de
`display:block` a `display:inline-block` (garde vertical-align actif).
Robuste a toutes les hauteurs/breakpoints car ne depend plus d'une
hauteur de conteneur figee ni de sortir le logo du flux.
L4 (padding autour de l'ensemble) : padding vertical sur l'ancre
`a.av-contains-svg` (respiration haut/bas ; le gutter horizontal du
header est deja gere par `.container` Enfold natif).
2026-07-20 iter3 (P7 #2300, retour Arsene « unite d'espacement = largeur
du F ») : nouveau viewBox 2821.68x1075.66 (OUTER_MARGIN_RATIO 0.18->F
~0.7186, marge exterieure du SVG lui-meme) -> largeur recalculee a
hauteur fixe 48px : 48 * 2821.68/1075.66 ~= 125.9px -> 126px (etait
153px). Assets : assets/canon/lockup-2026-07-20-hybrid/ (racine, valeurs
par defaut du script desormais alignees sur F_GLYPH_WIDTH_RATIO).
Fix padding menu (checkpoint iter3, logo "colle au bas" en etat sticky
scrolled) : root-cause mesuree en DOM (Playwright, computed styles) —
`a.av-contains-svg` herite un `height:100%` NATIF Enfold (box-sizing:
border-box) cale sur `.av-logo-container` (116/118px en haut de page,
58px en sticky/scroll desktop). Notre `padding:10px 0` etait bien
SYMETRIQUE dans la feuille de style, mais en etat sticky (58px de haut
conteneur) le contenu utile (padding 10+10 + svg 48px = 68px) DEPASSE
les 58px disponibles -> le SVG (hauteur fixe, non compressible) deborde
du padding-box et vient toucher exactement le bord bas du conteneur
(overflow visuel = 0 gap en bas, 10px en haut restants) = "colle au
bas". Le vrai centrage ne peut PAS etre garanti par un padding fixe en
px (les etats du header ont des hauteurs tres differentes, 58 a 118px) —
remplace par un centrage flex sur l'ancre elle-meme, qui distribue
l'espace disponible symetriquement quel que soit `height:100%` herite,
sans jamais deborder (58px de conteneur > 48px de svg = marge encore
possible, meme reduite). Verifie QA Playwright 2 etats (top+scrolled)
+ mobile, cf. _internal/qa-tier2-logo-2026-07-20/iter3-*.
========================================================================= */
.logo.avia-svg-logo{
position:relative; display:inline-block; vertical-align:middle; line-height:normal;
}
.logo.avia-svg-logo a.av-contains-svg{
display:flex; align-items:center; justify-content:center; padding:0;
}
.logo.avia-svg-logo svg{ display:block; width:126px; height:48px; flex-shrink:0; }
.logo.avia-svg-logo .avia-svg-logo-sub{ position:absolute; top:0; left:0; opacity:0; pointer-events:none; }
/* =========================================================================
La Forge — reveal cooptation « niveau caché » · P7 #2260 (punch-list 18/07)
Mécanisme : logique conditionnelle NATIVE FluentForm (champ toggle
`invite_par_gardien` → container `#container_parrain` masqué par défaut via
la classe `.has-conditions{display:none}` de FluentForm lui-même). Ce bloc
n'est QUE de l'habillage CSS : le show/hide (classes .ff_cond_v/.ff_excluded,
slideDown/slideUp 200ms) est géré par fluentform-advanced.js, natif, zéro JS
custom ajouté ici. Champs restent non-obligatoires (settings FluentForm).
========================================================================= */
/* Le déclencheur : checkbox natif transformé en levier ambre (pas un simple
toggle brut) — cf. field settings.container_class = "lfg-reveal-toggle". */
.fluentform .lfg-reveal-toggle{
margin:2rem 0 1.5rem; padding:1.05rem 1.3rem;
background:linear-gradient(145deg, rgba(208,122,44,.07), rgba(208,122,44,.02));
border:1px solid var(--lf-line); border-radius:6px;
transition:border-color .25s ease, box-shadow .25s ease;
}
.fluentform .lfg-reveal-toggle .ff-el-input--label label{ margin-bottom:.7rem; }
/* FluentForm base masque nativement l'input (.ff-el-form-check input{opacity:0;
position:absolute;z-index:-1}) au profit d'un indicateur custom — ici on VEUT
l'input visible (c'est notre switch), donc on reprend la main explicitement
sur label + input avec une sélecteur plus specifique (classe .ff-el-form-check-input
en plus du type) pour battre proprement la regle de base sans dependre d'un
rapport de specificite fragile. */
.fluentform .lfg-reveal-toggle .ff-el-form-check-label{
display:flex; align-items:center; gap:.8rem; cursor:pointer; padding-left:0;
}
.fluentform .lfg-reveal-toggle input[type=checkbox].ff-el-form-check-input{
position:relative; top:0; opacity:1; z-index:1; vertical-align:middle;
appearance:none; -webkit-appearance:none;
flex:0 0 42px; width:42px; height:24px; margin:0;
background:#241d14; border:1px solid var(--lf-line); border-radius:20px;
cursor:pointer; transition:background .25s ease, border-color .25s ease;
}
.fluentform .lfg-reveal-toggle input[type=checkbox].ff-el-form-check-input::before{
content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
border-radius:50%; background:var(--lf-muted);
transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.fluentform .lfg-reveal-toggle input[type=checkbox].ff-el-form-check-input:checked{
background:rgba(208,122,44,.25); border-color:var(--lf-amber);
}
.fluentform .lfg-reveal-toggle input[type=checkbox].ff-el-form-check-input:checked::before{
transform:translateX(18px); background:var(--lf-amber);
box-shadow:0 0 10px 2px rgba(208,122,44,.7);
}
.fluentform .lfg-reveal-toggle .ff-el-form-check-label span{
color:var(--lf-cream); font-size:.95rem; cursor:pointer; flex:1 1 auto;
}
.fluentform .lfg-reveal-toggle:has(input:checked){
border-color:var(--lf-amber); box-shadow:0 0 16px rgba(208,122,44,.18);
}
/* icone info (tooltip) : bleu Enfold/FluentForm par defaut -> ambre, coherence charte */
.fluentform .ff-el-tooltip svg{ fill:var(--lf-amber) !important; opacity:.85; }
/* La section révélée : embrasement bref (glow + montée en fondu des champs),
PAS un simple "apparaît d'un coup" — esprit "niveau caché" feu/forêt. */
.fluentform #container_parrain.has-conditions{ position:relative; border-radius:6px; padding:1.1rem 1.25rem; }
.fluentform #container_parrain.has-conditions.ff_cond_v{
animation:lfgCooptEmbrasement 900ms ease-out;
}
@keyframes lfgCooptEmbrasement{
0%{ filter:brightness(1) saturate(1); box-shadow:0 0 0 rgba(208,122,44,0); }
30%{ filter:brightness(1.35) saturate(1.3); box-shadow:0 0 46px 8px rgba(208,122,44,.5); }
100%{ filter:brightness(1) saturate(1); box-shadow:0 0 0 rgba(208,122,44,0); }
}
/* Étincelle qui « prend » avant que les champs n'apparaissent */
.fluentform #container_parrain.has-conditions.ff_cond_v::before{
content:''; position:absolute; top:-6px; left:16px; width:10px; height:10px;
border-radius:50%; pointer-events:none;
background:radial-gradient(circle, #F0A85C 0%, rgba(240,168,92,0) 70%);
animation:lfgCooptSpark 700ms ease-out forwards;
}
@keyframes lfgCooptSpark{
0%{ opacity:0; transform:scale(.4) translateY(6px); }
35%{ opacity:1; transform:scale(1.6) translateY(-4px); }
100%{ opacity:0; transform:scale(2.4) translateY(-14px); }
}
/* Les 2 champs (prénom/nom du parrain) montent en fondu, légèrement décalés */
.fluentform #container_parrain.has-conditions.ff_cond_v .ff-el-group{
animation:lfgCooptFieldRise 650ms cubic-bezier(.22,.7,.32,1) both;
}
.fluentform #container_parrain.has-conditions.ff_cond_v .ff-t-cell:nth-of-type(2) .ff-el-group{
animation-delay:.12s;
}
@keyframes lfgCooptFieldRise{
0%{ opacity:0; transform:translateY(10px); }
100%{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
.fluentform #container_parrain.has-conditions.ff_cond_v,
.fluentform #container_parrain.has-conditions.ff_cond_v::before,
.fluentform #container_parrain.has-conditions.ff_cond_v .ff-el-group{ animation:none !important; }
.fluentform .lfg-reveal-toggle input[type=checkbox],
.fluentform .lfg-reveal-toggle input[type=checkbox]::before{ transition:none !important; }
}
/* =========================================================================
La Forge — multi-step REEL (panneaux JS) · P7 #2260 correctif 2026-07-19
Le HTML des panneaux est genere par laforge_form3_stepper_js() (functions.php,
wp_footer). Masquage par defaut -> visible seulement si .lfg-panel-active
(ajoutee par le JS). Reutilise .ff-step-header/.ff-el-progress/.ff-step-titles/
.step-nav deja stylees ambre ci-dessus (prevu a l'origine pour le multi-step
natif FluentForm Pro, jamais rendu car Pro non installe — meme classes,
nouveau HTML, zero doublon de regles couleur/typo necessaire).
========================================================================= */
.fluentform .lfg-step-panel{ display:none; }
.fluentform .lfg-step-panel.lfg-panel-active{
display:block; animation:lfgPanelIn .4s ease-out;
}
@keyframes lfgPanelIn{
0%{ opacity:0; transform:translateY(8px); }
100%{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
.fluentform .lfg-step-panel.lfg-panel-active{ animation:none; }
}
/* =========================================================================
La Forge — Design Tier 1 (work-order design-workorder-2026-07-19.md, P7 #2300)
Reglages natifs d'abord (post_content ALB) ; CSS ci-dessous = uniquement ce
qui n'a pas d'equivalent natif Enfold (CAPS bouton, recadrage image ALB,
alignement label FluentForm avec/sans tooltip, espacement CTA).
========================================================================= */
/* ---- HP1 : boutons Enfold (av_button / av_buttonrow) ---------------------
Taille deja native (size='large'/'x_large' dans post_content). Complement
CSS : CAPS (aucune option native sur av_button pour la casse), radius
"pilule" lateral — snippet REUTILISE tel quel depuis spaconsulting.fr
(wp-content/uploads/dynamic_avia/spa-consulting_theme.css :
"/* ---- Pilule, capitales et interlettrage des boutons : plus de CSS ici (P7 #2930, 2026-09-02).
La doc officielle Enfold prescrit l option native : Enfold Options > Advanced Styling >
Misc > Buttons > Border radius (+ Text Transform et Letter Spacing dans la meme entree).
Elle est reglee a 100px / uppercase / 0.05em, ce qui couvre TOUS les boutons Enfold,
quelle que soit leur taille. Les boutons hors Enfold (Fluent Forms) sont traites a part
dans laforge_form_pill_css(). ---- */
/* ---- Le retrait de bordure ne vaut QUE pour les variantes pleines (P7 #2930, 2026-09-02).
`border:none !important` etait pose sur TOUS les .avia-button, pour la pilule ambre. Or il
ecrasait aussi le `border:3px solid #fff` que buttons.min.css donne nativement a
.avia-color-light / .avia-color-dark : ces variantes n ont pas de fond, leur contour EST
ce qui les rend visibles. Sans lui elles se confondaient avec le fond de section.
On restreint donc la regle plutot que d empiler une surcharge : les variantes
transparentes retrouvent leur rendu NATIF, sans une ligne de CSS de plus. ---- */
body div .avia-button:not(.avia-color-light):not(.avia-color-dark){
border: none !important;
}
.avia-button-wrap{
margin-top: 1.75rem;
}
/* ---- Les deux regles qui vivaient ici sont SUPPRIMEES (P7 #2930, 2026-09-02).
Le diagnostic d origine etait faux : Enfold n emet pas « avia-size-x_large ».
buttons.php:365 stocke 'x-large' (tiret) pour l option « X Large », et sa CSS cible
.avia-size-x-large. C est le CONTENU qui portait size='x_large', une valeur invalide :
aucune regle native ne s appliquait, d ou ce CSS de compensation. La donnee a ete
corrigee sur les 6 boutons du site, le natif reprend la main, et ces deux regles
n ont plus de raison d etre. ---- */
/* ---- F1 : form candidature — alignement parrain_prenom / parrain_nom -----
Le champ parrain_prenom porte une icone infobulle (tooltip) que
parrain_nom n'a pas ; combinee a un label plus long, son bloc label passe
sur 2 lignes alors que l'autre colonne reste sur 1 -> l'input de la 1re
colonne demarre plus bas (decalage vertical visible). On reserve une
hauteur de label identique aux 2 colonnes du container parrain, pour que
les 2 champs texte demarrent a la meme hauteur quel que soit le nombre de
lignes du label. */
#container_parrain .ff-el-input--label{
display: flex;
align-items: flex-start;
gap: .4rem;
min-height: 3rem;
}
#container_parrain .ff-el-input--label label{ flex: 1 1 auto; }
#container_parrain .ff-el-input--label .ff-el-tooltip{ flex: 0 0 auto; margin-top: .1rem; }
/* ---- F2 : form candidature — boutons CTA de fin de formulaire collés -----
Dans le dernier panneau du stepper (laforge_form3_stepper_js), le bouton
"Retour" (.step-nav) est insere juste avant le bouton d'envoi natif
FluentForm (.ff_submit_btn_wrapper), sans marge entre les deux. */
.fluentform .step-nav + .ff_submit_btn_wrapper{
margin-top: 1.5rem;
}
/* ---- HP3 / EX1 : images "Le programme, en deux temps" / "Le déroulé" -----
RETIRÉ 2026-07-21 (QA fix regressions) : le hack de recadrage CSS ci-dessus
compensait des crops verticaux (attachments 122/123, 640x853) mal centrés
dans une colonne av_one_half. Remplacé par de vraies photos PAYSAGE
(attachments 189/190, 2048x1536, attachment_size='large') qui remplissent
nativement la colonne sans crop ni bridage de hauteur — plus besoin de CSS
custom ici (cf. enfold-protocole-design-tech.md, réglage natif d'abord).
Historique du hack : commit précédent (voir git blame / backup
style.css-pre-imgsep-20260721-0050.css sur le VPS). */
/* =========================================================================
La Forge — Design Tier 2 : logo (menu + hero) (P7 #2300, 2026-07-20)
Reference obligatoire : _outils/connaissance/wordpress/enfold-protocole-design-tech.md
(P13 — SVG auto-porte). Ratio "hybride" decide par Arsene : PICTO_GAP_RATIO 0.70,
FLAME_TO_CAP_RATIO 2.70 (cf. assets/canon/lockup-2026-07-20-hybrid/README.md).
========================================================================= */
/* ---- H5 : tagline hero en MAJUSCULES (test demande par Arsene, checkpoint 07-19) ---- */
.laforge-hero-title .av-subheading{
text-transform: uppercase;
letter-spacing: .04em;
}
/* ---- H4 : le texte "LA FORGE" est desormais rendu par le wordmark vectorise DANS le SVG
hero anime (Cinzel-Bold, cf. functions.php laforge_hero_flame_anim_css). Le H1 textuel natif
Enfold reste dans le DOM (SEO/accessibilite — un H1 vide ou absent serait une regression SEO)
mais devient visuellement redondant avec le SVG -> masque en sr-only (pattern standard, pas
de display:none pour rester lisible par lecteurs d'ecran / a11y tree). La tagline (subheading,
sibling du H1 dans le meme wrapper .laforge-hero-title) reste visible normalement. ---- */
.laforge-hero-title .av-special-heading-tag{
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* =========================================================================
La Forge — raffinements post-revue Arsene (2026-07-21) : hero Candidater
========================================================================= */
/* ---- Candidater (page 8, section #cooptation-intro) : composition centree,
meme esprit que le hero Accueil. Le H1 "Rejoins le cercle" se centre
nativement via le style Enfold `modern-centered`
(`body .av-special-heading.modern-centered{text-align:center}`, cf.
heading.css core). Le(s) [av_textblock] n'ont pas d'attribut d'alignement
natif -> centrage scope via custom_class + colonne resserree (evite des
paragraphes centres "en pave" sur toute la largeur, illisible).
2026-07-21 (correctif "pas vraiment centre" + orphelins) : la regle
`.lfg-cooptation-center{text-align:center}` seule (specificite 0,0,1,0)
ne suffisait pas a s'imposer de facon fiable sur les
generes par
wpautop a l'interieur du textblock -> renforcee en `#cooptation-intro
.lfg-cooptation-center, #cooptation-intro .lfg-cooptation-center *`
(id + classe + universel, specificite largement superieure a toute regle
Enfold core sur `.avia_textblock p`). Ajout `text-wrap:balance` sur les
ET sur le texte du H1 (anti mots-orphelins en fin de ligne, defaut
signale par Arsene) — support natif navigateurs modernes, dégrade
silencieusement (retour a un wrap normal) sur les navigateurs plus anciens. */
#cooptation-intro .lfg-cooptation-center,
#cooptation-intro .lfg-cooptation-center *{
text-align: center;
}
#cooptation-intro .lfg-cooptation-center{
max-width: 640px;
margin: 0 auto;
}
#cooptation-intro .lfg-cooptation-center p{
text-wrap: balance;
}
#cooptation-intro .av-special-heading-tag{
text-wrap: balance;
}
/* =========================================================================
La Forge — fix chevauchement titre/header au scroll (site-wide) · 2026-07-21
Racine reelle (verifiee empiriquement via Playwright/getComputedStyle,
PAS un probleme de z-index comme presume au depart) : Enfold core
(themes/enfold/css/layout.css L353-359) pose `.header_bg{opacity:0.95}`
sur l'etat "solide" du header sticky. #header lui-meme est deja au-dessus
de tout (position:fixed + z-index:501, stacking context propre — le
contenu ne "passe" jamais AU-DESSUS du header, contrairement a l'hypothese
initiale). Ce sont les 5% de translucidite du FOND qui laissent le
contenu qui defile juste en-dessous transparaitre furtivement a travers
le header — invisible sur la plupart des pages (hero sombre/uniforme au
meme instant de scroll) mais flagrant sur Candidater ou le H2 "Candidater"
(texte clair, fort contraste) croise precisement cette bande de defilement
(~y 550-750px selon largeur de viewport, confirme visible en 1440px,
absent en 1920px — le mecanisme est bien latent partout, cf. brief).
Fix natif minimal : repasser le fond du header a 100% opaque UNIQUEMENT
a l'etat solide. La regle Enfold plus specifique
`#top .av_header_transparency .header_bg{opacity:0}` (etat transparent en
haut de page, id+2 classes) reste INTACTE et prioritaire face a la notre
(id+1 classe) -> transparence au repos + reveal au scroll preserves,
seul l'etat "solide" scrolle passe a opacite pleine. Aucun !important —
la specificite suffit et laisse la regle transparente gagner comme prevu.
========================================================================= */
#top .header_bg{
opacity: 1;
}
/* =========================================================================
La Forge — bouton "Envoyer" formulaire Contact natif (av_contact) · 2026-07-21
Le shortcode natif Enfold av_contact rend son submit en
— un champ de formulaire, PAS un
element .avia-button (ALB) — donc hors de portee de la regle Tier1
"body div .avia-button" posee plus haut (pilule/CAPS). Rendu par defaut :
rectangle 2px de radius (Enfold core contact.css:
.avia_ajax_form .button{border-radius:2px}), casse normale du thème.
Fond ambre + texte blanc DEJA corrects nativement (Enfold colore
.avia_ajax_form .button sur le colorset primaire du site -> aucune couleur
forcee ici, doctrine "reglage natif d'abord"). Complement CSS = uniquement
la forme (pilule + CAPS + letter-spacing).
NB 2026-09-02 : ces trois declarations etaient auparavant "alignees sur body div
.avia-button" — cette regle maison N EXISTE PLUS, remplacee par l option native
Advanced Styling > Misc > Buttons (border-radius / text-transform / letter-spacing).
Elle ne couvre que les .avia-button ; .avia_ajax_form input.button n en est pas un,
d ou le maintien de ce bloc + un hover ambre-soft/ombre (absent nativement de
.avia-button lui-meme ; emprunte au pattern deja en usage sur les boutons
FluentForm plus haut dans ce fichier, memes tokens --lf-amber-soft).
Specificite "body .avia_ajax_form input.button" (2 elements + 2 classes)
> regle native ".avia_ajax_form .button" (2 classes) -> gagne quel que
soit l'ordre de chargement des feuilles (meme piege/parade que HP1
ci-dessus : ne jamais compter sur l'ordre de chargement seul). */
body .avia_ajax_form input.button{
border-radius: 999px;
text-transform: uppercase;
letter-spacing: .05em;
transition: background-color .18s ease, box-shadow .18s ease;
}
body .avia_ajax_form input.button:hover{
background-color: var(--lf-amber-soft) !important;
box-shadow: 0 4px 18px rgba(208,122,44,.35);
}
/* =========================================================================
La Forge — trois touches modernes (P7 #2930, 2026-09-02) [lf-touches-modernes]
Rien ici ne remplace une option native : Enfold ne propose ni survol de bouton
parametrable, ni degrade sur un titre, ni zoom lent sur un fond de section. Ce qui EST
natif a ete fait en options (separateurs SVG, animations de colonne, parallax et survol
des images) — cf. le contenu des pages, pas ce fichier.
========================================================================= */
/* ---- 1. Survol des boutons ------------------------------------------------
Le natif se contente d un opacity:.9. On remplace ce fondu par le geste courant
aujourd hui : une legere elevation et un halo chaud, sur une transition courte.
Cible .avia-button uniquement, sans !important — aucune surcharge du natif. */
#top .avia-button{
transition: transform .28s cubic-bezier(.22,.7,.32,1), box-shadow .28s ease,
background-color .28s ease, border-color .28s ease, color .28s ease;
}
#top .avia-button:hover{
transform: translateY(-2px);
opacity: 1;
}
#top .avia-button:active{
transform: translateY(0);
}
/* le bouton ambre gagne un halo de sa propre couleur */
#top .avia-button.avia-color-theme-color:hover{
box-shadow: 0 12px 28px -10px rgba(208,122,44,.65);
}
/* les boutons transparents : le contour et le texte prennent l ambre, sans fond ajoute */
#top .avia-button.avia-color-light:hover{
border-color: var(--lf-amber);
color: var(--lf-amber);
}
/* ---- 2. Degrade sur les titres de page ------------------------------------
Avec parcimonie : UN titre par page, le h1 de la section d ouverture, cible par l id
de section — donc aucune classe a poser dans le contenu, et rien a re-editer si la
page bouge. Le degrade part du creme et finit sur l ambre, de gauche a droite.
-webkit-text-fill-color est indispensable : sans lui, WebKit ignore color:transparent. */
/* ---- Les deux bornes du degrade suivent le COLORSET de la section (2026-09-02).
Enfold emet bien 104 variables --enfold--* mais TOUTES sur :root, et aucune
n est re-mappee sur les classes .main_color / .alternate_color / .socket_color /
.footer_color. Il n existe donc aucun hook natif « couleur de titre de la section
courante » : les quatre regles ci-dessous le fabriquent, une fois pour toutes.
Zero hex en dur — changer la palette dans les options du theme suffit a suivre. ---- */
.av-special-heading-tag{
--lf-grad-de: var(--enfold-main-color-heading, var(--lf-cream));
--lf-grad-vers: var(--enfold-main-color-primary, var(--lf-amber));
}
.alternate_color .av-special-heading-tag{
--lf-grad-de: var(--enfold-alternate-color-heading, var(--lf-cream));
--lf-grad-vers: var(--enfold-alternate-color-primary, var(--lf-amber));
}
.socket_color .av-special-heading-tag{
--lf-grad-de: var(--enfold-socket-color-heading, var(--lf-cream));
--lf-grad-vers: var(--enfold-socket-color-primary, var(--lf-amber));
}
.footer_color .av-special-heading-tag{
--lf-grad-de: var(--enfold-footer-color-heading, var(--lf-cream));
--lf-grad-vers: var(--enfold-footer-color-primary, var(--lf-amber));
}
/* ---- Le degrade lui-meme. Cible SEMANTIQUE (h1 et h2) et non plus cinq id de section :
une page ajoutee demain en herite sans qu on y revienne. Les h3 restent en creme plein —
ils portent les sous-titres de ligne, sous les h2, et tout degrader les noierait. ---- */
h1.av-special-heading-tag,
h2.av-special-heading-tag{
background-image: linear-gradient(100deg, var(--lf-grad-de) 0%, var(--lf-grad-de) 38%, var(--lf-grad-vers) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* ---- 3. Zoom tres lent sur le fond du hero de « L Approche » ---------------
La section est deja en attach='parallax' : Enfold y rend .av-parallax-inner, un calque
dedie qui porte l image et vit SOUS l overlay. On anime une transform sur ce calque —
composite par le GPU, aucune reprise de peinture, contrairement a un background-size
anime. Le debordement est contenu par overflow:hidden de .av-parallax-section
(shortcodes.css:386). 46 s aller-retour : le mouvement doit se sentir, pas se voir. */
@media (prefers-reduced-motion: no-preference){
@keyframes lfKenburns{
from{ transform: scale(1); }
to{ transform: scale(1.07); }
}
#approche-intro .av-parallax-inner{
animation: lfKenburns 34s ease-in-out infinite alternate;
will-change: transform;
}
}
@media (prefers-reduced-motion: reduce){
#top .avia-button{ transition: none; }
#top .avia-button:hover{ transform: none; }
}