en nowrap -> tableau plus large que l'écran, coupé à droite (overflow:hidden du tableau).
Fiches produit et abaques (NL, EN surtout) : mots longs + marges des cellules empêchaient le tableau de se resserrer. */
@media (max-width:767px){
body:not(.home) .tps-spec td code{white-space:normal;overflow-wrap:anywhere}
body:not(.home) .tps-spec th,body:not(.home) .tps-spec td{overflow-wrap:break-word;padding-left:10px;padding-right:10px}
/* Césure seulement en néerlandais (mots composés longs) : en FR/EN elle coupait des mots qui tenaient déjà. */
html[lang^="nl"] body:not(.home) .tps-spec th,html[lang^="nl"] body:not(.home) .tps-spec td{hyphens:auto}
}
/* ===== TITRE « PERFORATIECATALOGUS » (page NL 1442) SUR PETIT TÉLÉPHONE — audit responsive du 2026-09-28 =====
Un seul mot de 19 lettres dans le cadre perforé : à 32 px il touchait le bord droit sous 400 px. */
@media (max-width:400px){
body.page-id-1442 .elementor-widget-heading h1.elementor-heading-title{font-size:28px!important}
}
/* ==== TPS-INTERIEUR:END ==== */
/* ==== TPS-RELECTURE:START ==== */
/* MODE RELECTURE DESACTIVE le 2026-09-23 (demande utilisateur).
Le bloc complet est conserve ici : tps-build/sept23/tps-relecture-actif.css
et sur le serveur : novamira-sandbox/backup-css-relecture-2026-09-23.txt
Pour le remettre : recoller le bloc a la place de celui-ci et reactiver le Code Snippet 9.
Sans ses styles, les reperes (.tps-rv-add, .tps-rv-typo, .tps-rv-addw...) sont invisibles ;
seule la legende doit etre masquee. */
body .tps-rv-legend{display:none!important}
/* ==== TPS-RELECTURE:END ==== */
/* ==== TPS-ACCUEIL:START ==== */body:where(.home){--tps-perf-dot:0.85px;--tps-perf-feather:1.25px;--tps-perf-grid:3.7px}
/* ============ ACCUEIL TPS — DA (couleurs en !important : le widget Heading d'Elementor force la couleur globale Primary) ============ */
/* --- Kickers / eyebrows (mono orange) --- */body:where(.home) .tps-kicker .elementor-heading-title,body:where(.home) .tps-eyebrow .elementor-heading-title{font-weight:500!important;color:var(--e-global-color-cvgristexte)!important}
/* --- HERO --- */body:where(.home) .tps-h1 .elementor-heading-title{font-size:clamp(34px,4.6vw,56px)!important;line-height:1!important;margin-bottom:18px}body:where(.home) .tps-lede,body:where(.home) .tps-lede p{color:var(--e-global-color-cvtextenuit)!important;font-size:18px!important;line-height:1.55!important;max-width:56ch;margin-bottom:4px}
/* --- Titres de section --- */body:where(.home) .tps-h2 .elementor-heading-title{line-height:1.2}body:where(.home) .tps-center .elementor-heading-title{text-align:center;max-width:none;margin-left:auto;margin-right:auto}
/* --- Chiffres clés --- */body:where(.home) .tps-statcol{position:relative;z-index:1;padding:26px 22px!important;border-left:0!important;background:transparent!important}body:where(.home) .tps-stat .elementor-counter-number-wrapper{font-size:clamp(30px,3.4vw,44px)!important;line-height:1!important;color:var(--e-global-color-secondary)!important;justify-content:flex-start}body:where(.home) .tps-stat .elementor-counter-number-prefix{flex-grow:0!important;color:var(--e-global-color-primary)!important}body:where(.home) .tps-stat .elementor-counter-title{font-family:var(--e-global-typography-text-font-family),sans-serif!important;font-size:13.5px!important;font-weight:600!important;color:var(--e-global-color-cvgristexte)!important;text-align:left!important;margin-top:10px;line-height:1.4}
/* --- Points forts --- */body:where(.home) .tps-pluscol{padding-top:22px}body:where(.home) .tps-plus .elementor-icon-box-title a{color:var(--e-global-color-secondary)!important}
/* --- Cartes image --- */body:where(.home) .tps-sol .elementor-image-box-img,body:where(.home) .tps-rea .elementor-image-box-img{margin-bottom:16px!important;overflow:hidden;border-radius:4px}body:where(.home) .tps-sol .elementor-image-box-img img,body:where(.home) .tps-rea .elementor-image-box-img img{width:100%;height:auto;display:block;transition:transform .5s ease}body:where(.home) .tps-solcol:hover .elementor-image-box-img img,body:where(.home) .tps-reacol:hover .elementor-image-box-img img{transform:scale(1.06)}body:where(.home) .tps-sol .elementor-image-box-title,body:where(.home) .tps-rea .elementor-image-box-title{font-size:16.5px!important;margin-bottom:7px!important;line-height:1.25!important;padding-bottom:9px;border-bottom:1px solid var(--e-global-color-cvacier);position:relative}body:where(.home) .tps-sol .elementor-image-box-title::before,body:where(.home) .tps-rea .elementor-image-box-title::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;width:28px;height:2px;background:var(--e-global-color-primary)}body:where(.home) .tps-sol .elementor-image-box-title a,body:where(.home) .tps-rea .elementor-image-box-title a{color:var(--e-global-color-secondary)!important;transition:color .15s}body:where(.home) .tps-solcol:hover .elementor-image-box-title a,body:where(.home) .tps-reacol:hover .elementor-image-box-title a{color:var(--e-global-color-primary)!important}body:where(.home) .tps-sol .elementor-image-box-description,body:where(.home) .tps-rea .elementor-image-box-description{font-size:14px!important;line-height:1.5!important;color:var(--e-global-color-cvgristexte)!important;margin-top:8px}
/* --- Process --- */body:where(.home) .tps-step{border-top:2px solid #CFD8E1;padding-top:16px}body:where(.home) .tps-stepn .elementor-heading-title{font-size:11px!important;font-weight:500!important;color:var(--e-global-color-cvgristexte)!important;margin-bottom:8px}body:where(.home) .tps-stept .elementor-heading-title{font-size:15.5px!important;color:var(--e-global-color-secondary)!important;line-height:1.25!important;margin-bottom:5px}body:where(.home) .tps-steps,body:where(.home) .tps-steps p{font-size:12px!important;color:var(--e-global-color-cvgristexte)!important;line-height:1.4!important}body:where(.home) .tps-specline{margin:4px 0 22px}body:where(.home) .tps-specline strong{color:var(--e-global-color-primary)!important;}
/* --- Boutons lignés --- */
/* --- Confiance (fond nuit) --- */body:where(.home) .tps-trust{position:relative;overflow:hidden}body:where(.home) .tps-trust::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,currentColor 2.4px,transparent 2.9px),radial-gradient(circle,currentColor 2.4px,transparent 2.9px);background-size:17px 17px;background-position:0 0,8.5px 8.5px;color:var(--e-global-color-cvblanc);opacity:.07;pointer-events:none}body:where(.home) .tps-trust > *{position:relative;z-index:1}body:where(.home) .tps-trustlab .elementor-heading-title{font-family:var(--e-global-typography-text-font-family),sans-serif!important;font-size:11px!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--e-global-color-cvbleuclair)!important;text-align:center;margin-bottom:14px}body:where(.home) .tps-trustnote .elementor-heading-title{font-size:clamp(22px,2.6vw,30px)!important;color:var(--e-global-color-cvblanc)!important;text-align:center;margin-bottom:16px}
/* --- FAQ --- */body:where(.home) .tps-faqwrap{margin:0 auto}body:where(.home) .tps-faq .elementor-active .elementor-tab-title a{color:var(--e-global-color-primary)!important}
/* --- CTA final (fond bleu) --- */body:where(.home) .tps-ctafinal::after{content:none}body:where(.home) .tps-ctafinal > *{position:relative;z-index:1}body:where(.home) .tps-ctad,body:where(.home) .tps-ctad p{max-width:54ch;margin:0 auto 22px}
/* --- Responsive --- */@media(max-width:1024px){body:where(.home) .tps-statcol,body:where(.home) .tps-pluscol,body:where(.home) .tps-solcol,body:where(.home) .tps-reacol{width:47%!important}body:where(.home) .tps-step{width:30%!important}
}@media(max-width:767px){body:where(.home) .tps-statcol,body:where(.home) .tps-pluscol,body:where(.home) .tps-solcol,body:where(.home) .tps-reacol,body:where(.home) .tps-step{width:100%!important}body:where(.home) .tps-lede,body:where(.home) .tps-lede p{font-size:16px!important}
}
/* ===== Lisibilite : petits labels orange sur fond CLAIR -> orange fonce (AA) ; orange vif conserve sur fond sombre ===== */body:where(.home) .tps-eyebrow .elementor-heading-title,body:where(.home) .tps-stepn .elementor-heading-title{color:var(--e-global-color-cvgristexte)!important;font-weight:600!important}body:where(.home) .tps-kicker .elementor-heading-title{color:var(--e-global-color-cvtexteclair)!important}
/* ===== Domaines d'application ===== */body:where(.home) .tps-appcol{flex:0 0 calc((100% - 88px)/5)!important;max-width:calc((100% - 88px)/5)!important;min-width:0!important;padding-top:16px}body:where(.home) .tps-apph .elementor-heading-title{font-size:12px!important;text-transform:uppercase!important;color:var(--e-global-color-primary)!important;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--e-global-color-cvacier);position:relative;display:block;line-height:1.35}body:where(.home) .tps-apph .elementor-heading-title::before{content:"";position:absolute;left:0;bottom:-1px;width:28px;height:2px;background:var(--e-global-color-primary);transition:width .28s cubic-bezier(.22,1,.36,1)}body:where(.home) .tps-appcol:hover .tps-apph .elementor-heading-title::before{width:100%}body:where(.home) .tps-apph a.elementor-heading-title:hover{color:var(--e-global-color-cvbleufonce)!important}body:where(.home) .tps-applist .elementor-icon-list-icon{display:none!important}body:where(.home) .tps-applist .elementor-icon-list-item{margin:0!important;padding:0!important;border:0!important}body:where(.home) .tps-applist .elementor-icon-list-text{font-size:13.5px!important;line-height:1.35!important;color:var(--e-global-color-cvgristexte)!important;padding:5px 0!important;display:block}@media(max-width:1024px){body:where(.home) .tps-appcol{flex-basis:calc((100% - 44px)/3)!important;max-width:calc((100% - 44px)/3)!important} }@media(max-width:767px){body:where(.home) .tps-appcol{flex-basis:calc((100% - 22px)/2)!important;max-width:calc((100% - 22px)/2)!important} }
/* Hero : voile directionnel (sombre a gauche sous le texte, ouvre sur la facade a droite) */body:where(.home) .tps-hero::before{opacity:1!important;background:linear-gradient(100deg,rgba(13,21,32,.94) 0%,rgba(13,21,32,.86) 34%,rgba(13,21,32,.46) 66%,rgba(13,21,32,.16) 100%)!important}@media(max-width:1024px){body:where(.home) .tps-hero::before{opacity:1!important;background:linear-gradient(100deg,rgba(13,21,32,.92) 0%,rgba(13,21,32,.86) 58%,rgba(13,21,32,.58) 100%)!important}}
/* Cartes Solutions & Realisations : Elementor image-box plafonne la figure a 30% de la carte -> pleine largeur + cadrage regulier */body:where(.home) .tps-sol .elementor-image-box-img,body:where(.home) .tps-rea .elementor-image-box-img{width:100%!important;margin:0 0 18px 0!important;overflow:hidden;position:relative;background:var(--e-global-color-cvacier)}body:where(.home) .tps-sol .elementor-image-box-img img,body:where(.home) .tps-rea .elementor-image-box-img img{width:100%!important;height:196px!important;object-fit:cover;display:block;transition:transform .5s ease}body:where(.home) .tps-sol:hover .elementor-image-box-img img,body:where(.home) .tps-rea:hover .elementor-image-box-img img{transform:scale(1.06)}@media(max-width:1024px){body:where(.home) .tps-sol .elementor-image-box-img img,body:where(.home) .tps-rea .elementor-image-box-img img{height:220px!important}}
/* Solutions : photos produit detourees sur fond blanc, affichees en entier */body:where(.home) .tps-sol .elementor-image-box-img{background:var(--e-global-color-cvblanc)}body:where(.home) .tps-sol .elementor-image-box-img img{object-fit:contain}
/* ==========================================================
LANGAGE DA - LA TRAME PERFOREE COMME LANGAGE GRAPHIQUE
Repris a l'identique de TPS-Design-System-DA-v1 :
"Le motif vient du catalogue, pas de la decoration."
- trame U (alignee) : pas 15px -> fonds de section, 4-8 %
- trame Z (quinconce) : pas 17px / 8.5px -> fonds sombres + survols de cartes
- degrade de densite : SVG, surface ouverte 1,2 -> 74,8 % = le vide sur plein
========================================================== */
/* Trame U en fond de la section savoir-faire */body:where(.home) .tps-process{position:relative;overflow:hidden}body:where(.home) .tps-process::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,currentColor 2.4px,transparent 2.9px);background-size:15px 15px;color:var(--e-global-color-secondary);opacity:.05;pointer-events:none;z-index:0}body:where(.home) .tps-process > *{position:relative;z-index:1}
/* Degrade de densite : illustre litteralement le "2,5 -> 75 %" ecrit juste dessous */body:where(.home) .tps-specline{position:relative;margin-top:104px!important}body:where(.home) .tps-specline::before{content:"";position:absolute;left:-3px;right:0;top:-96px;height:85px;background:url(https://www.tolesperforees.fr/wp-content/uploads/tps-trame-bande.svg?v=3) left top/100% 100% no-repeat;opacity:.82;pointer-events:none}
/* Survol des cartes : trame Z + filet bleu (DA). z-index 0 + enfants en 1 :
sinon le pseudo positionne passe DEVANT le texte (ordre de peinture CSS). */body:where(.home) .tps-solcol,body:where(.home) .tps-reacol{position:relative;border-top:2px solid transparent;transition:border-color .25s}body:where(.home) .tps-solcol > *,body:where(.home) .tps-reacol > *{position:relative;z-index:1}body:where(.home) .tps-solcol:hover,body:where(.home) .tps-reacol:hover{border-top-color:var(--e-global-color-primary)}
/* Ref. catalogue estampillee sur la photo - numerotation reelle de l'arborescence */body:where(.home) .tps-solcol::after,body:where(.home) .tps-reacol::after{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;letter-spacing:.1em;color:var(--e-global-color-cvtexteclair);background:rgba(13,21,32,.78);padding:5px 9px;pointer-events:none}body:where(.home) .tps-solcol:nth-child(1)::after{content:"RÉF. 2.1.1"}body:where(.home) .tps-solcol:nth-child(2)::after{content:"RÉF. 2.1.2"}body:where(.home) .tps-solcol:nth-child(3)::after{content:"RÉF. 2.1.3"}body:where(.home) .tps-solcol:nth-child(4)::after{content:"RÉF. 2.2"}
/* Cotes chantier sur les realisations (photos reellement issues de ces chantiers) */body:where(.home) .tps-reacol:nth-child(1)::after{content:"CCI, VALENCIENNES"}body:where(.home) .tps-reacol:nth-child(2)::after{content:"CLÔTURE DÉCORATIVE — MAUBEUGE"}body:where(.home) .tps-reacol:nth-child(3)::after{content:"SOUDURE TIG — ATELIER MAUBEUGE"}body:where(.home) .tps-reacol:nth-child(4)::after{content:"FILTRATION INOX — SUR PLAN"}
/* Legendes des realisations et reperes des solutions en EN / NL (traduction 2026-09-25) : :lang() suit l'attribut lang de la page (en-GB, nl-BE) */body:where(.home):lang(en) .tps-reacol:nth-child(1)::after{content:"CHAMBER OF COMMERCE, VALENCIENNES"}body:where(.home):lang(en) .tps-reacol:nth-child(2)::after{content:"DECORATIVE FENCE — MAUBEUGE"}body:where(.home):lang(en) .tps-reacol:nth-child(3)::after{content:"TIG WELDING — MAUBEUGE WORKSHOP"}body:where(.home):lang(en) .tps-reacol:nth-child(4)::after{content:"STAINLESS FILTRATION — BUILT TO DRAWING"}body:where(.home):lang(en) .tps-solcol:nth-child(1)::after{content:"REF. 2.1.1"}body:where(.home):lang(en) .tps-solcol:nth-child(2)::after{content:"REF. 2.1.2"}body:where(.home):lang(en) .tps-solcol:nth-child(3)::after{content:"REF. 2.1.3"}body:where(.home):lang(en) .tps-solcol:nth-child(4)::after{content:"REF. 2.2"}body:where(.home):lang(nl) .tps-reacol:nth-child(1)::after{content:"KAMER VAN KOOPHANDEL, VALENCIENNES"}body:where(.home):lang(nl) .tps-reacol:nth-child(2)::after{content:"DECORATIEVE OMHEINING — MAUBEUGE"}body:where(.home):lang(nl) .tps-reacol:nth-child(3)::after{content:"TIG-LASSEN — WERKPLAATS MAUBEUGE"}body:where(.home):lang(nl) .tps-reacol:nth-child(4)::after{content:"INOX FILTRATIE — VOLGENS TEKENING"}body:where(.home):lang(nl) .tps-solcol:nth-child(1)::after{content:"REF. 2.1.1"}body:where(.home):lang(nl) .tps-solcol:nth-child(2)::after{content:"REF. 2.1.2"}body:where(.home):lang(nl) .tps-solcol:nth-child(3)::after{content:"REF. 2.1.3"}body:where(.home):lang(nl) .tps-solcol:nth-child(4)::after{content:"REF. 2.2"}
/* ==========================================================
GOUTTIERE LATERALE
Les conteneurs sont en padding vertical seul : la marge laterale
ne venait QUE du max-width 1240 centre. Sous 1240 de viewport il n'y
avait donc plus AUCUNE marge -> 8 sections sur 10 avaient leur texte
colle au bord (mobile, mais aussi un portable en 1100).
Seuil 1287 = 1240 + 2x24 -> garantit toujours >=24px de gouttiere. */@media(max-width:1366px){body:where(.home) .tps-hero > .e-con-inner,body:where(.home) .tps-stats > .e-con-inner,body:where(.home) .tps-sec > .e-con-inner,body:where(.home) .tps-trust > .e-con-inner,body:where(.home) .tps-ctafinal > .e-con-inner,body:where(.home) .tps-hero.e-con-full,body:where(.home) .tps-stats.e-con-full,body:where(.home) .tps-sec.e-con-full,body:where(.home) .tps-trust.e-con-full,body:where(.home) .tps-ctafinal.e-con-full{padding-left:22px!important;padding-right:22px!important}
}
/* ==========================================================
CORNIERE - signe distinctif tire du LOGO
Geometrie relevee au pixel sur logo-TPS.jpg :
bras horizontal 39px / bras vertical 40px = BRAS EGAUX
epaisseur 8px -> RATIO epaisseur:longueur = 1:5
couleur #9B9B9B, posee en DIAGONALE (haut-gauche + bas-droite),
jamais aux 4 coins : c'est un cadrage asymetrique, comme des
traits de coupe. En metallurgie, une corniere = un profile d'angle.
Offsets negatifs : la corniere encadre le texte SANS le decaler,
donc les titres restent alignes sur la grille.
========================================================== */body:where(.home){--tps-corn-ep:9px;--tps-corn-l:46px;--tps-corn-c:#9B9B9B}body:where(.home) n.tps-eyebrow .elementor-heading-title{display:inline-block;position:relative}
/* ==========================================================
CARRE BLEU - 2e signe distinctif du logo
Dans le logo : carre PARFAIT (77x81 px), 80 % de la hauteur,
pose a droite. Il ne borde rien : il TRAVERSE le lockup, et le S
qui tombe dedans s'inverse en blanc. Principe repris ici : un plan
bleu plein qui casse la photo, contenu inverse en blanc, et qui
porte la date que le logo loge deja dans sa corniere bas-droite.
::before = voile degrade, ::after = cote -> le carre se pose donc
sur le ::after de l'inner (grille 1240), a droite du bloc de titre.
========================================================== */
/* Le carre bleu devient l'INDEX DE SECTION : pose a droite du kicker,
soit exactement sa place dans le logo (a droite du lockup), contenu
inverse en blanc. Repete, il fait systeme au lieu de decorer -- et la DA
numerote elle-meme ses sections ("01 / PARTI PRIS").
Le bloc de titre rejoue alors la structure du logo :
corniere -> texte -> carre bleu -> corniere. */body:where(.home) .tps-eyebrow .elementor-heading-title::after{content:attr(data-idx);display:none}body:where(.home) .tps-sec .tps-eyebrow .elementor-heading-title::after{display:none;align-items:center;justify-content:center;width:28px;height:28px;margin-left:16px;vertical-align:middle;background:var(--e-global-color-primary);color:var(--e-global-color-cvblanc)!important;font-family:var(--e-global-typography-text-font-family),sans-serif;font-size:12px;font-weight:500;letter-spacing:.04em;pointer-events:none}body:where(.home) .tps-sec:nth-child(3) .tps-eyebrow .elementor-heading-title::after{content:"01"}body:where(.home) .tps-sec:nth-child(4) .tps-eyebrow .elementor-heading-title::after{content:"02"}body:where(.home) .tps-sec:nth-child(5) .tps-eyebrow .elementor-heading-title::after{content:"03"}body:where(.home) .tps-sec:nth-child(6) .tps-eyebrow .elementor-heading-title::after{content:"04"}body:where(.home) .tps-sec:nth-child(7) .tps-eyebrow .elementor-heading-title::after{content:"05"}body:where(.home) .tps-sec:nth-child(9) .tps-eyebrow .elementor-heading-title::after{content:"06"}
/* PISTE 3 - le plan bleu qui casse la barre de chiffres cles.
Principe du logo : un plan bleu plein traverse une serie reguliere,
et ce qui tombe dedans s'inverse en blanc. Ici il casse le rythme des
4 cellules. Cellule 1 = "125 ans - depuis 1899", la donnee patrimoniale
que le logo porte deja dans sa corniere. */
/* ==========================================================
DEGAGEMENT DU HEADER EN OVERLAP
Le header est en position:absolute (Sticky Header Effects) : il ne
pousse plus le contenu, le hero demarre donc a y=0 et passait SOUS lui.
Mesure : header 81px en desktop, mais 129px en mobile (logo + burger +
CTA empiles) alors que le kicker etait a y=91 -> il etait recouvert. */body:where(.home) .tps-hero > .e-con-inner{justify-content:center}
/* ==========================================================
TRAME PERFOREE ANIMEE (hero)
Le canvas peint le meme voile directionnel que le ::before CSS, puis
y PERCE des trous (destination-out) : la facade apparait dans les trous.
Le rayon suit le degrade de densite de la DA (2,5 % -> 75 %) : trous
minuscules a gauche => le voile reste dense sous le texte ; ouverts a
droite => la photo respire. Une onde lente traverse la tole.
Le ::before CSS reste le VOILE DE SECOURS : il n'est coupe que si le JS
a effectivement peint (classe .tps-perfo-on posee par le script).
Sans JS / canvas KO -> voile CSS conserve, texte lisible. */body:where(.home) .tps-perfo{position:absolute!important;inset:0;z-index:0;pointer-events:none;margin:0!important;padding:0!important;width:auto!important}body:where(.home) .tps-perfo .tps-perfo-wrap{position:absolute;inset:0}body:where(.home) .tps-perfo .tps-perfo-cv{display:block;width:100%;height:100%}body:where(.home) .tps-hero.tps-perfo-on::before{opacity:0!important}
/* Le contenu repasse au-dessus du canvas. On positionne les ENFANTS et surtout
PAS l'inner : un inner positionne deviendrait le bloc conteneur du canvas
absolu, qui serait alors confine a la grille 1240 au lieu de couvrir le hero. */
/* Plans du hero : video (z-index 0) < voile ::before (1) < contenu (2).
Le conteneur video etant POSITIONNE, il recouvrait le voile ::before qui le
precede dans l'arbre. Avec un fond image (peint a l'etape 2) ca ne se voyait pas. */body:where(.home) .tps-hero > .e-con-inner > *:not(.tps-perfo):not(.elementor-background-video-container){position:relative;z-index:2}
/* ==========================================================
PROCESS SUR FOND SOMBRE (bande image atelier)
La section passe en image nuit -> tous ses textes basculent en clair.
Scope .tps-process pour ne pas toucher les autres sections.
========================================================== */body:where(.home) .tps-process > *{position:relative;z-index:1}body:where(.home) .tps-process .tps-eyebrow .elementor-heading-title{color:var(--e-global-color-cvtexteclair)!important}body:where(.home) .tps-process .tps-h2 .elementor-heading-title{color:var(--e-global-color-cvblanc)!important}body:where(.home) .tps-process .tps-secdesc,body:where(.home) .tps-process .tps-secdesc p{color:var(--e-global-color-cvtextenuit)!important}body:where(.home) .tps-process .tps-stepn .elementor-heading-title{color:var(--e-global-color-cvbleuclair)!important}body:where(.home) .tps-process .tps-stept .elementor-heading-title{color:var(--e-global-color-cvblanc)!important}body:where(.home) .tps-process .tps-steps,body:where(.home) .tps-process .tps-steps p{color:#AEB9C6!important}body:where(.home) .tps-process .tps-step{border-top-color:var(--e-global-color-cvfiletnuit)!important}body:where(.home) .tps-process .tps-specline,body:where(.home) .tps-process .tps-specline p{color:var(--e-global-color-cvtextenuit)!important}body:where(.home) .tps-process .tps-specline strong{color:var(--e-global-color-cvbleuclair)!important}body:where(.home) .tps-process .tps-specline{border-left-color:var(--e-global-color-cvbleuclair)!important}body:where(.home) .tps-process .tps-btn-line .elementor-button{color:var(--e-global-color-cvblanc)!important;border-color:rgba(255,255,255,.55)!important}body:where(.home) .tps-process .tps-btn-line .elementor-button:hover{background:var(--e-global-color-cvblanc)!important;color:var(--e-global-color-secondary)!important;border-color:var(--e-global-color-cvblanc)!important}
/* trame U : etait #0D1520 (invisible sur nuit) -> blanc tres faible */body:where(.home) .tps-process::before{color:var(--e-global-color-cvblanc)!important;opacity:.04!important}
/* VOILE PROCESS (le voile natif Elementor n'a pas rendu -> CSS) */body:where(.home) .tps-process{position:relative;overflow:hidden}body:where(.home) .tps-process::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(13,21,32,.66) 0%,rgba(13,21,32,.82) 42%,rgba(13,21,32,.9) 100%)}
/* ==========================================================
RESPIRATION VERTICALE (contenu trop serre)
Sections simples etaient en 84/20 (bas serre) et incoherentes avec
les 84/84 des autres. Padding uniforme + genereux, et de l'air entre
le titre et le contenu (le gap kit de 20px les collait).
========================================================== */body:where(.home) .tps-sec > .e-con-inner{padding-top:96px!important;padding-bottom:96px!important}body:where(.home) .tps-stats > .e-con-inner{padding-top:60px!important;padding-bottom:60px!important}body:where(.home) .tps-trust > .e-con-inner{padding-top:70px!important;padding-bottom:70px!important}body:where(.home) .tps-ctafinal > .e-con-inner{padding-top:88px!important;padding-bottom:88px!important}
/* titre -> contenu : le conteneur de contenu prend de l'air sous le titre */body:where(.home) .tps-sec > .e-con-inner > .e-con{margin-top:26px}
/* mobile : padding vertical reduit (sinon sections enormes) */@media(max-width:767px){body:where(.home) .tps-sec > .e-con-inner{padding-top:58px!important;padding-bottom:58px!important}body:where(.home) .tps-stats > .e-con-inner{padding-top:44px!important;padding-bottom:44px!important}body:where(.home) .tps-trust > .e-con-inner{padding-top:48px!important;padding-bottom:48px!important}body:where(.home) .tps-ctafinal > .e-con-inner{padding-top:56px!important;padding-bottom:56px!important}body:where(.home) .tps-sec > .e-con-inner > .e-con{margin-top:20px}
}
/* FAQ ALIGNEE A GAUCHE (coherence : tous les boutons de section a gauche, seul le CTA final reste centre) */body:where(.home) .tps-faqsec > .e-con-inner{align-items:flex-start!important}body:where(.home) .tps-faqsec .tps-center .elementor-heading-title{text-align:left!important;margin-left:0!important;margin-right:0!important}body:where(.home) .tps-faqsec .tps-faqwrap{margin-left:0!important;margin-right:0!important}
/* ==========================================================
CARRE BLEU GLISSANT (chiffres cles) — GSAP, footer charge deja gsap
Le carre du logo devient un highlight qui visite les 4 chiffres en
boucle. Cellule active = texte blanc. Fallback reduced-motion = fige
sur la 1re. Le carre est un div absolu SOUS le contenu (z-index 0),
les cellules en z-index 1 -> texte toujours au-dessus.
========================================================== */body:where(.home) .tps-stat-square{position:absolute;left:0;top:0;width:0;height:0;background:var(--e-global-color-primary);border-radius:2px;z-index:0;pointer-events:none;visibility:hidden}body:where(.home) .tps-statcol .elementor-counter-title{transition:color .35s ease}body:where(.home) .tps-statcol.stat-lit .elementor-counter-number-wrapper{color:var(--e-global-color-cvblanc)!important}body:where(.home) .tps-statcol.stat-lit .elementor-counter-number,body:where(.home) .tps-statcol.stat-lit .elementor-counter-number-prefix{background:radial-gradient(circle,var(--e-global-color-cvblanc) var(--tps-perf-dot),rgba(255,255,255,0) var(--tps-perf-feather)) 0 0/var(--tps-perf-grid) var(--tps-perf-grid);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}body:where(.home) .tps-statcol.stat-lit .elementor-counter-title{color:#E8F2FA!important}
/* MOT PERFORATION EN POINTS (CTA final) — meme principe que les chiffres cles :
le mot est litteralement perfore, blanc sur bleu, rappel du logo. */body:where(.home) .tps-ctah .tps-perf-dot{position:relative;display:inline-block;background-image:radial-gradient(circle,var(--e-global-color-cvblanc) var(--tps-perf-dot),rgba(255,255,255,0) var(--tps-perf-feather));background-size:var(--tps-perf-grid) var(--tps-perf-grid);background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}body:where(.home) .tps-ctah .tps-perf-cover{position:absolute;left:0;top:0;white-space:nowrap;color:var(--e-global-color-cvblanc);-webkit-text-fill-color:var(--e-global-color-cvblanc);pointer-events:none}body:where(.home) .tps-ctah .tps-perf-bit{position:absolute;left:0;width:3px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent);box-shadow:0 0 9px 1px rgba(255,255,255,.75);opacity:0;pointer-events:none}
/* MOT PERÇONS EN POINTS (hero) — même traitement perforé que le CTA ; trame ×1,33 (56px vs 42px) pour une densité identique. Dots blancs = trous de lumière sur le hero sombre. */body:where(.home) .tps-h1 .tps-perf-dot{position:relative;z-index:1;display:inline-block;background-image:radial-gradient(circle,var(--e-global-color-cvblanc) var(--tps-perf-dot),rgba(255,255,255,0) var(--tps-perf-feather));background-size:var(--tps-perf-grid) var(--tps-perf-grid);background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}body:where(.home) .tps-h1 .tps-perf-cover{position:absolute;left:0;top:0;white-space:nowrap;color:var(--e-global-color-cvblanc);-webkit-text-fill-color:var(--e-global-color-cvblanc);pointer-events:none}body:where(.home) .tps-h1 .tps-perf-bit{position:absolute;top:3%;left:0;height:94%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent);opacity:0;pointer-events:none}
/* CARRE BLEU HERO — plaque bleue (bleu logo) qui se pose derriere "percons" en meme temps que le percage, pour la lisibilite sur fond sombre (recree le fond bleu du CTA). Le carre est un FRERE derriere le mot : le background-clip:text du .tps-perf-dot le peindrait devant s'il etait enfant. */body:where(.home) .tps-h1 .tps-perf-wrap{position:relative;display:inline-block}body:where(.home) .tps-h1 .tps-perf-sq{position:absolute;top:-1px;bottom:-1px;z-index:0;background:var(--e-global-color-primary);border-radius:2px;pointer-events:none}
/* MOTS PERFORES SUR TITRES DE SECTION (.tps-h2) - texte fonce sur fond clair : trous #0D1520, foret bleu. Memes variables de trous (--tps-perf-*). Pas de carre bleu (contraste fonce-sur-clair deja bon). */body:where(.home) .tps-h2 .tps-perf-dot{position:relative;z-index:1;display:inline-block;background-image:radial-gradient(circle,var(--e-global-color-cvblanc) var(--tps-perf-dot),rgba(255,255,255,0) var(--tps-perf-feather));background-size:var(--tps-perf-grid) var(--tps-perf-grid);background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}body:where(.home) .tps-h2 .tps-perf-cover{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none}body:where(.home) .tps-h2 .tps-perf-bit{position:absolute;top:3%;left:0;width:3px;height:94%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent);box-shadow:0 0 9px 1px rgba(255,255,255,.75);opacity:0;pointer-events:none}
/* CARRE BLEU sur titres de section (.tps-h2) : plaque bleue qui se pose en meme temps que le percage -> mot en points BLANCS sur bleu (lisible sur fond clair). Le cover reste #0D1520 pour l'etat initial lisible. Defaut visible = repli sans JS. */body:where(.home) .tps-h2 .tps-perf-wrap{position:relative;display:inline-block;margin:0 9px}body:where(.home) .tps-h2 .tps-perf-sq{position:absolute;top:-1px;bottom:-1px;left:-7px;right:-7px;z-index:0;background:var(--e-global-color-primary);border-radius:2px;pointer-events:none}
/* Retrait des badges REF sur les cartes Solutions (non pertinents pour le client). Les cotes chantier des Realisations (.tps-reacol::after) sont conservees. */body:where(.home) .tps-solcol::after{content:none!important;display:none!important}
/* Process (savoir-faire) : 6 etapes plus grandes + plus contrastees sur le fond atelier sombre. */body:where(.home) .tps-process::after{background:linear-gradient(180deg,rgba(13,21,32,.82) 0%,rgba(13,21,32,.90) 42%,rgba(13,21,32,.95) 100%)!important}body:where(.home) .tps-process .tps-stepn .elementor-heading-title{font-size:13px!important;color:#7CC4EF!important}body:where(.home) .tps-process .tps-stept .elementor-heading-title{font-size:19px!important;color:var(--e-global-color-cvblanc)!important}body:where(.home) .tps-process .tps-steps,body:where(.home) .tps-process .tps-steps p{font-size:14px!important;color:#DAE3EB!important}body:where(.home) .tps-process .tps-step{border-top-color:#3A4756!important}
/* FAQ EN 2 COLONNES : accordeon a gauche + image perforation pleine hauteur a droite (comble le vide a droite). Layout force en CSS (structure DOM). */body:where(.home) .tps-faqsec > .e-con-inner{flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:52px!important;width:100%!important;max-width:1240px!important;margin-left:auto!important;margin-right:auto!important}body:where(.home) .tps-faqleft{max-width:660px}body:where(.home) .tps-faqimg{align-self:stretch;min-height:100%}@media(max-width:880px){body:where(.home) .tps-faqsec > .e-con-inner{flex-direction:column!important}body:where(.home) .tps-faqleft{max-width:none!important}body:where(.home) .tps-faqimg{min-height:240px}
}
/* PROCESS : remplissage anime des bordures superieures, chacune leur tour, en boucle (facon pagination de carousel / stories). CSS pur, synchronise, sans JS. */body:where(.home) .tps-process .tps-step{position:relative}body:where(.home) .tps-process .tps-step::after{content:"";position:absolute;top:-2px;left:0;width:100%;height:2px;background:var(--e-global-color-cvblanc);box-shadow:0 0 6px rgba(255,255,255,.45);transform-origin:left;transform:scaleX(0);animation-duration:8s;animation-timing-function:linear;animation-iteration-count:infinite;z-index:2;pointer-events:none}body:where(.home) .tps-process .tps-step:nth-child(1)::after{animation-name:tps-fill-1}body:where(.home) .tps-process .tps-step:nth-child(2)::after{animation-name:tps-fill-2}body:where(.home) .tps-process .tps-step:nth-child(3)::after{animation-name:tps-fill-3}body:where(.home) .tps-process .tps-step:nth-child(4)::after{animation-name:tps-fill-4}body:where(.home) .tps-process .tps-step:nth-child(5)::after{animation-name:tps-fill-5}body:where(.home) .tps-process .tps-step:nth-child(6)::after{animation-name:tps-fill-6}
@keyframes tps-fill-1{0%{transform:scaleX(0)}10%{transform:scaleX(1)}85%{transform:scaleX(1)}95%{transform:scaleX(0)}100%{transform:scaleX(0)}}
@keyframes tps-fill-2{0%{transform:scaleX(0)}10%{transform:scaleX(0)}20%{transform:scaleX(1)}85%{transform:scaleX(1)}95%{transform:scaleX(0)}100%{transform:scaleX(0)}}
@keyframes tps-fill-3{0%{transform:scaleX(0)}20%{transform:scaleX(0)}30%{transform:scaleX(1)}85%{transform:scaleX(1)}95%{transform:scaleX(0)}100%{transform:scaleX(0)}}
@keyframes tps-fill-4{0%{transform:scaleX(0)}30%{transform:scaleX(0)}40%{transform:scaleX(1)}85%{transform:scaleX(1)}95%{transform:scaleX(0)}100%{transform:scaleX(0)}}
@keyframes tps-fill-5{0%{transform:scaleX(0)}40%{transform:scaleX(0)}50%{transform:scaleX(1)}85%{transform:scaleX(1)}95%{transform:scaleX(0)}100%{transform:scaleX(0)}}
@keyframes tps-fill-6{0%{transform:scaleX(0)}50%{transform:scaleX(0)}60%{transform:scaleX(1)}85%{transform:scaleX(1)}95%{transform:scaleX(0)}100%{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){body:where(.home) .tps-process .tps-step::after{animation:none!important;display:none}}
/* ====== DOMAINES EN CARTES PHOTO (grille 3x2) ====== */body:where(.home) .tps-appgrid{flex-wrap:wrap!important;gap:24px!important;align-items:stretch!important}body:where(.home) .tps-appcard{flex:0 0 calc((100% - 48px)/3)!important;max-width:calc((100% - 48px)/3)!important;min-width:0!important;display:flex;flex-direction:column;background:var(--e-global-color-cvblanc);border:1px solid var(--e-global-color-cvfiletclair);border-radius:4px;overflow:hidden;padding:0!important;transition:border-color .2s,box-shadow .2s,transform .2s}body:where(.home) .tps-appcard:hover{border-color:#CBD6DF;box-shadow:0 12px 30px -18px rgba(13,21,32,.35);transform:translateY(-3px)}body:where(.home) .tps-appcard-img{height:158px;background-size:cover;background-position:center;position:relative;overflow:hidden}body:where(.home) .tps-appcard-body{padding:20px 20px 22px!important;display:flex;flex-direction:column}body:where(.home) .tps-appcard .tps-apph .elementor-heading-title{margin-bottom:12px}body:where(.home) .tps-appcard:hover .tps-apph .elementor-heading-title::before{width:100%}
/* carte CTA navy */body:where(.home) .tps-appcard-cta{background:var(--e-global-color-secondary)!important;justify-content:center;padding:28px 24px!important;border-color:var(--e-global-color-secondary)!important}body:where(.home) .tps-appcta-k .elementor-heading-title{font-family:var(--e-global-typography-text-font-family),sans-serif!important;font-size:12px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--e-global-color-cvbleuclair)!important;margin-bottom:12px}body:where(.home) .tps-appcta-d,body:where(.home) .tps-appcta-d p{color:var(--e-global-color-cvtextenuit)!important;font-size:14.5px!important;line-height:1.55!important;margin-bottom:20px}body:where(.home) .tps-appcard-cta .tps-btn-ghost .elementor-button{background:transparent!important;color:var(--e-global-color-cvblanc)!important;border:1.5px solid rgba(255,255,255,.55)!important}body:where(.home) .tps-appcard-cta .tps-btn-ghost .elementor-button:hover{background:rgba(255,255,255,.12)!important;border-color:var(--e-global-color-cvblanc)!important}@media(max-width:1024px){body:where(.home) .tps-appcard{flex-basis:calc((100% - 24px)/2)!important;max-width:calc((100% - 24px)/2)!important}}@media(max-width:767px){body:where(.home) .tps-appcard{flex-basis:100%!important;max-width:100%!important}}
/* Taille titres cartes domaines (12 -> 15px) */body:where(.home) .tps-appcard .tps-apph .elementor-heading-title{font-size:15px!important;padding-bottom:11px!important;margin-bottom:12px!important}
/* Bouton carte domaine (CTA clair en bas de carte) */body:where(.home) .tps-appbtn{margin-top:auto!important;padding-top:16px!important}body:where(.home) .tps-appbtn .elementor-button{background:transparent!important;color:var(--e-global-color-primary)!important;border:1.5px solid var(--e-global-color-primary)!important;padding:9px 16px!important;font-size:12.5px!important;letter-spacing:.02em!important;border-radius:3px!important;transition:background .15s,color .15s}body:where(.home) .tps-appbtn .elementor-button:hover{background:var(--e-global-color-primary)!important;color:var(--e-global-color-cvblanc)!important}
/* Alignement bas boutons cartes : le body remplit la hauteur, l'image reste fixe */body:where(.home) .tps-appcard-body{flex:1 1 auto!important}body:where(.home) .tps-appcard-img{flex:0 0 158px!important}
/* Trame perforee carte CTA (meme recette que la section Confiance) */body:where(.home) .tps-appcard-cta{position:relative;overflow:hidden}body:where(.home) .tps-appcard-cta::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,currentColor 2.4px,transparent 2.9px),radial-gradient(circle,currentColor 2.4px,transparent 2.9px);background-size:17px 17px;background-position:0 0,8.5px 8.5px;color:var(--e-global-color-cvblanc);opacity:.07;pointer-events:none;z-index:0}body:where(.home) .tps-appcard-cta > *{position:relative;z-index:1}
/* L'image FAQ ne doit plus suivre la hauteur de l'accordeon (elle changeait a chaque
ouverture/fermeture, effet perturbant). image FAQ independante : on la sort du stretch
et sa hauteur derive de sa PROPRE largeur (ratio), donc stable. */body:where(.home) .tps-faqimg{align-self:flex-start!important;aspect-ratio:5/6}@media(max-width:880px){body:where(.home) .tps-faqimg{aspect-ratio:auto}}
/* hauteur FAQ reservee : on reserve la hauteur du plus grand etat de l'accordeon pour que
la section (et donc le CTA en dessous) ne monte/descende plus a l'ouverture. Valeurs
mesurees par plage : la colonne etant plus etroite en dessous de 1366, les reponses
se replient sur plus de lignes et l'amplitude augmente (43px @1440 -> 108px @885). */body:where(.home) .tps-faqleft{min-height:700px}@media(max-width:1366px){body:where(.home) .tps-faqleft{min-height:730px}}@media(max-width:880px){body:where(.home) .tps-faqleft{min-height:630px}}@media(max-width:767px){body:where(.home) .tps-faqleft{min-height:750px}}
/* ===== PERFORATION : echelle relative a la taille du texte =====
Les metriques sont en em : elles se resolvent sur la taille de police de CHAQUE mot
perfore (hero 56px, CTA/H2 42px, compteur 44px, et toutes les tailles responsive).
Les variables sont donc declarees SUR les elements perfores, pas sur :root (ou em
vaudrait la taille racine). Le plancher en px evite que les trous deviennent flous
aux petites tailles. Taux de remplissage augmente (~39% contre ~17%) = lisibilite. */body:where(.home) .tps-statcol.stat-lit .elementor-counter-number,body:where(.home) .tps-statcol.stat-lit .elementor-counter-number-prefix{--tps-perf-dot:max(1.1px,0.030em);--tps-perf-feather:max(1.4px,0.038em);--tps-perf-grid:max(3.2px,0.085em)}
/* Pilier « Fabrique en France » : logo La French Fab (widget Image avec lien) a la place de l icone, zones d icone alignees sur 52 px */body:where(.home) .tps-plus .elementor-icon-box-icon{height:52px;display:flex!important;align-items:flex-end;justify-content:center}body:where(.home) .tps-plus-logo{width:100%!important;max-width:100%!important;height:52px;margin:0 0 9px!important;display:flex!important;align-items:flex-end;justify-content:center}body:where(.home) .tps-plus-logo a{display:block;transition:opacity .2s}body:where(.home) .tps-plus-logo a:hover{opacity:.85}body:where(.home) .tps-plus-logo img{display:block;width:auto!important;max-width:none!important;height:52px!important}
/* Badge avis Google (plugin Widgets for Google Reviews / Trustindex) habille comme les tuiles de logos du bandeau « Ils nous ont fait confiance » (2026-09-24) */
body .tps-trust .ti-widget.ti-goog a.ti-header{background:#16202D!important;background-image:none!important;border:1px solid var(--e-global-color-cvfiletnuit)!important;border-radius:3px!important;box-shadow:none!important;padding:14px 22px 14px 18px!important;transition:border-color .2s}
body .tps-trust .ti-widget.ti-goog a.ti-header:hover{border-color:var(--e-global-color-cvbleuclair)!important}
body .tps-trust .ti-widget.ti-goog .ti-platform-icon{width:34px!important;height:34px!important}
body .tps-trust .ti-widget.ti-goog .ti-profile-details{padding-top:0!important}
body .tps-trust .ti-widget.ti-goog .ti-text{font-family:var(--e-global-typography-text-font-family),sans-serif!important;font-size:10.5px!important;font-weight:600!important;line-height:1.3!important;letter-spacing:.14em;text-transform:uppercase;color:var(--e-global-color-cvtextenuit)!important;margin-bottom:5px}
body .tps-trust .ti-widget.ti-goog .ti-stars{line-height:1!important;margin-top:0!important}
body .tps-trust .ti-widget.ti-goog .ti-rating{font-family:var(--e-global-typography-primary-font-family),sans-serif!important;font-size:18px!important;font-weight:700!important;line-height:1!important;color:var(--e-global-color-cvblanc)!important;margin-right:6px;vertical-align:middle}
body .tps-trust .ti-widget.ti-goog .ti-star{width:16px!important;height:16px!important;vertical-align:middle}
/* Legende discrete sous le badge (remplace le grand titre « — note moyenne de nos clients ») */
body .tps-trust .tps-trustnote .elementor-heading-title{font-family:var(--e-global-typography-text-font-family),sans-serif!important;font-size:13.5px!important;font-weight:400!important;line-height:1.4!important;letter-spacing:.02em;color:var(--e-global-color-cvtextenuit)!important;text-align:center;margin:0!important}
/* ==== TPS-ACCUEIL:END ==== */
/* ==== TPS-HEADER:START ==== */
/* ===== Layout du panneau (forcé par structure) ===== */
body .elementor-location-header .e-n-menu-content > .e-con > .e-con{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-start!important;gap:36px;max-width:1240px;margin-left:auto!important;margin-right:auto!important;padding:32px 24px 36px!important}
body .elementor-location-header .e-n-menu-content > .e-con > .e-con > .e-con:has(> .tps-kick){flex:0 0 24%!important;max-width:24%}
body .elementor-location-header .e-n-menu-content > .e-con > .e-con > .e-con:has(> .tps-fkick){flex:0 0 22%!important;max-width:22%}
body .elementor-location-header .e-n-menu-content > .e-con > .e-con > .e-con:not(:has(> .tps-kick)):not(:has(> .tps-fkick)){flex:1 1 auto!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:24px 32px!important;align-content:flex-start}
body .elementor-location-header .e-n-menu-content > .e-con > .e-con > .e-con:not(:has(> .tps-kick)):not(:has(> .tps-fkick)) > .e-con{flex:1 1 150px!important;min-width:140px}
body .elementor-location-header .e-n-menu-content > .e-con > .e-con > .e-con:not(:has(> .tps-kick)):not(:has(> .tps-fkick)) > .e-con:has(> .tps-itd){flex:1 1 43%!important;min-width:210px!important}
/* ===== Styles ===== */
body .elementor-location-header .e-n-menu-content{box-shadow:0 26px 44px -22px rgba(13,21,32,.22)}
body .elementor-location-header .tps-kick .elementor-heading-title{margin-bottom:6px}
body .elementor-location-header .tps-title .elementor-heading-title{margin-bottom:8px}
body .elementor-location-header .tps-desc{margin-bottom:14px;max-width:30ch}
/* Titres de colonne unifiés (Savoir-faire + onglets à cartes) : tick orange + filet */
body .elementor-location-header .tps-colh .elementor-heading-title,body .elementor-location-header .tps-ith .elementor-heading-title{position:relative;display:block;padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--e-global-color-cvacier);color:var(--e-global-color-primary);font-size:12px;text-transform:uppercase;line-height:1.35}
body .elementor-location-header .tps-colh .elementor-heading-title::before,body .elementor-location-header .tps-ith .elementor-heading-title::before{content:"";position:absolute;left:0;bottom:-1px;width:28px;height:2px;background:var(--e-global-color-primary);transition:width .28s cubic-bezier(.22,1,.36,1)}
/* Structure reelle : .tps-colh > .elementor-heading-title > a. Le est DANS
le titre et n'a pas la classe -> cibler "a.elementor-heading-title" ne matche
rien. On passe par :has(> a) pour ne reagir QUE si le titre est un lien.
Le passe en display:block : la zone cliquable ne faisait que la largeur
du texte (60px) alors que le titre en fait 143. */
body .elementor-location-header .tps-colh .elementor-heading-title > a,
body .elementor-location-header .tps-ith .elementor-heading-title > a{display:block;color:inherit;transition:color .18s ease}
body .elementor-location-header .tps-colh .elementor-heading-title:has(> a):hover,
body .elementor-location-header .tps-ith .elementor-heading-title:has(> a):hover{color:var(--e-global-color-cvbleufonce)}
/* Le tick bleu file sur toute la largeur du filet = signal de "cliquable". */
body .elementor-location-header .tps-colh .elementor-heading-title:has(> a):hover::before,
body .elementor-location-header .tps-ith .elementor-heading-title:has(> a):hover::before{width:100%}
/* description (onglets sans sous-sous-pages) */
body .elementor-location-header .tps-itd{color:var(--e-global-color-cvtole);font-size:13px;line-height:1.55}
/* Liens (Savoir-faire, Nos solutions) */
body .elementor-location-header .tps-links .elementor-icon-list-icon{display:none!important}
body .elementor-location-header .tps-links .elementor-icon-list-item{margin:0!important;padding:0!important;border:0!important}
body .elementor-location-header .tps-links .elementor-icon-list-item>a{display:block;position:relative;padding:6px 0;color:var(--e-global-color-text);font-size:14.5px;line-height:1.3;transition:color .18s ease,padding-left .28s cubic-bezier(.22,1,.36,1)}
body .elementor-location-header .tps-links .elementor-icon-list-item>a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:0;height:2px;background:var(--e-global-color-primary);transition:width .28s cubic-bezier(.22,1,.36,1)}
body .elementor-location-header .tps-links .elementor-icon-list-item>a:hover{color:var(--e-global-color-primary);padding-left:20px}
body .elementor-location-header .tps-links .elementor-icon-list-item>a:hover::before{width:13px}
/* Voir la rubrique */
body .elementor-location-header .tps-all .elementor-button{background:transparent!important;color:var(--e-global-color-primary)!important;border:0!important;box-shadow:none!important;padding:4px 0!important;border-radius:0!important;}
body .elementor-location-header .tps-all .elementor-button:hover{background:transparent!important;color:var(--e-global-color-cvbleufonce)!important}
/* Carte feature : motif perforation + CTA */
body .elementor-location-header .e-con:has(> .tps-fkick){position:relative;overflow:hidden}
body .elementor-location-header .e-con:has(> .tps-fkick)::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,currentColor 2.4px,transparent 2.9px),radial-gradient(circle,currentColor 2.4px,transparent 2.9px);background-size:17px 17px;background-position:0 0,8.5px 8.5px;color:var(--e-global-color-cvblanc);opacity:.07;pointer-events:none;z-index:0}
body .elementor-location-header .e-con:has(> .tps-fkick) > *{position:relative;z-index:1}
body .elementor-location-header .tps-fkick .elementor-heading-title{margin-bottom:6px}
body .elementor-location-header .tps-ftitle .elementor-heading-title{margin-bottom:6px}
body .elementor-location-header .tps-fdesc{margin-bottom:14px}
body .elementor-location-header .tps-fcta .elementor-button{background:var(--e-global-color-accent)!important;color:var(--e-global-color-cvblanc)!important;padding:10px 16px!important;border-radius:3px!important;font-size:12px!important;}
body .elementor-location-header .tps-fcta .elementor-button:hover{background:var(--e-global-color-cvorangef)!important}
/* ===== Lisibilité du texte sur la carte feature (fond nuit) ===== */
body .elementor-location-header .tps-fkick .elementor-heading-title{color:var(--e-global-color-cvbleuclair)!important}
body .elementor-location-header .tps-ftitle .elementor-heading-title{color:var(--e-global-color-cvblanc)!important}
body .elementor-location-header .tps-fdesc,body .elementor-location-header .tps-fdesc *{color:var(--e-global-color-cvtextenuit)!important}
/* ===== Boutons : texte + fleche sur une seule ligne ===== */
body .elementor-location-header .tps-all .elementor-button,body .elementor-location-header .tps-fcta .elementor-button,body .elementor-location-header .tps-cta .elementor-button{white-space:nowrap!important}
body .elementor-location-header .tps-all .elementor-button-text,body .elementor-location-header .tps-fcta .elementor-button-text,body .elementor-location-header .tps-cta .elementor-button-text{white-space:nowrap!important}
body .elementor-location-header .tps-all .elementor-button-content-wrapper,body .elementor-location-header .tps-fcta .elementor-button-content-wrapper,body .elementor-location-header .tps-cta .elementor-button-content-wrapper{flex-wrap:nowrap!important}
/* ===== CTA de la carte feature : pleine largeur, une ligne, jamais de debordement ===== */
body .elementor-location-header .tps-fcta{width:100%}
body .elementor-location-header .tps-fcta .elementor-button{display:flex!important;width:100%;justify-content:center;align-items:center;gap:6px;padding:11px 10px!important;text-align:center}
/* ===== ANCRAGE DU PANNEAU SOUS LA BARRE =====
Le panneau s'ancre sous .e-n-menu (bas = 59px), pas sous la barre (bas = 81px) :
la bande blanche pleine largeur recouvrait le bas du logo et collait au bouton devis.
Le wrapper .e-n-menu-content est transparent (le blanc est sur la bande enfant) :
un padding-top dessus descend la bande SANS creer de zone morte au survol,
La marge est posee sur la BANDE, pas sur le wrapper : fermee, la bande est en
display:none donc sa marge ne s'applique pas (sinon les panneaux fermes feraient
22px de haut et recouvriraient les onglets). Ouverte, le wrapper etant en flex,
la marge compte dans sa hauteur -> la zone de survol reste contigue au titre.
Scope [data-layout="horizontal"] : Elementor bascule cet attribut sur "dropdown"
en mode burger, ou le decalage n'a pas de sens (il creuserait l'accordeon).
On suit l'etat du widget plutot qu'un breakpoint recopie en dur. */
body .elementor-location-header .e-n-menu[data-layout="horizontal"] .e-n-menu-content > .e-con{margin-top:22px!important}
/* Menu en Outfit MAJUSCULES : nettement plus large que du casse mixte.
8 entrees (Renoult n'en a que 6, plus courtes) -> padding resserre
pour tenir sur une ligne jusqu'a 1280 de viewport. */
body .elementor-location-header .e-n-menu-title{padding:8px 8px!important}
/* ==========================================================
HEADER TRANSPARENT EN OVERLAP (Sticky Header Effects)
Le plugin pose .she-header-transparent-yes avant scroll
(background transparent + position:absolute = overlap), puis la
retire au scroll -> le fond blanc du conteneur reprend.
On ne se sert PAS de son option "Change Logo Color" : son filtre
brightness(0) invert(1) blanchit TOUT, y compris le carre bleu qui
devient un bloc plein ou le S se noie. On bascule donc sur un vrai
logo inverse (carre bleu preserve, S et SYSTEME en reserve).
========================================================== */
body .she-header-transparent-yes .tps-logo img{content:url(https://www.tolesperforees.fr/wp-content/uploads/2026/07/tps-logo-blanc-v2.png)}
/* Blanc UNIQUEMENT sur le menu horizontal (header transparent au-dessus du hero sombre).
En burger, Elementor bascule .e-n-menu sur data-layout=dropdown et le tiroir est BLANC :
sans ce cadrage, les libelles etaient blancs sur blanc = invisibles. */
body .she-header-transparent-yes .e-n-menu[data-layout="horizontal"] .e-n-menu-title-text{color:var(--e-global-color-cvblanc)!important}
/* Fleches des items a sous-menu : SVG rempli par la couleur d'icone du widget (#232B34) -> blanc aussi sur le header transparent */
body .she-header-transparent-yes .e-n-menu[data-layout="horizontal"] .e-n-menu-dropdown-icon{color:var(--e-global-color-cvblanc)!important}
body .she-header-transparent-yes .e-n-menu[data-layout="horizontal"] .e-n-menu-dropdown-icon svg{fill:var(--e-global-color-cvblanc)!important}
body .she-header-transparent-yes .e-n-menu-toggle,
body .she-header-transparent-yes .e-n-menu-toggle i{color:var(--e-global-color-cvblanc)!important}
body .she-header-transparent-yes{border-bottom-color:transparent!important}
/* Le plugin rend le header absolu sur TOUTES les pages. Seul l'accueil a
un hero sombre : ailleurs la nav serait blanche sur blanc et le header
recouvrirait le contenu. On neutralise donc hors accueil. */
html body:not(.home) .she-header-transparent-yes{position:fixed!important;background-color:var(--e-global-color-cvblanc)!important;border-bottom-color:var(--e-global-color-cvfilet)!important}
/* le fantome du sticky Elementor doit rester dans le flux hors accueil, sinon le header recouvre le contenu */
html body:not(.home) .elementor-location-header .elementor-sticky__spacer{position:relative!important}
html body:not(.home) .she-header-transparent-yes .tps-logo img{content:normal}
html body:not(.home) .she-header-transparent-yes .e-n-menu-title-text,
html body:not(.home) .she-header-transparent-yes .e-n-menu[data-layout="horizontal"] .e-n-menu-title-text{color:var(--e-global-color-text)!important}
html body:not(.home) .she-header-transparent-yes .e-n-menu[data-layout="horizontal"] .e-n-menu-dropdown-icon{color:var(--e-global-color-text)!important}
html body:not(.home) .she-header-transparent-yes .e-n-menu[data-layout="horizontal"] .e-n-menu-dropdown-icon svg{fill:var(--e-global-color-text)!important}
html body:not(.home) .she-header-transparent-yes .e-n-menu-toggle,
html body:not(.home) .she-header-transparent-yes .e-n-menu-toggle i{color:var(--e-global-color-text)!important}
/* Selecteur de langue Polylang (widget Connect Polylang Elementor) habille aux couleurs du site */
body .tps-lang{width:auto!important;flex:0 0 auto}
body .tps-lang .cpel-switcher__nav{line-height:1}
body .tps-lang .cpel-switcher__toggle>a,body .tps-lang .cpel-switcher__list a{font-family:var(--e-global-typography-primary-font-family),sans-serif;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;text-decoration:none}
body .tps-lang .cpel-switcher__toggle>a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border:1px solid var(--e-global-color-cvfilet);border-radius:3px;background:var(--e-global-color-cvblanc);color:var(--e-global-color-secondary)!important;transition:border-color .2s,color .2s}
body .tps-lang .cpel-switcher__nav:hover .cpel-switcher__toggle>a,body .tps-lang .cpel-switcher__toggle--on>a{border-color:var(--e-global-color-primary);color:var(--e-global-color-primary)!important}
/* Chevron dessine en CSS : Font Awesome n'est pas charge dans le header */
body .tps-lang .cpel-switcher__icon{position:relative;display:inline-block;width:9px;height:9px;font-size:0;color:var(--e-global-color-cvgristexte)!important;margin:0!important;padding:0!important}
body .tps-lang .cpel-switcher__icon::before{content:"";position:absolute;left:0;top:0;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transform-origin:center}
body .tps-lang .cpel-switcher__nav:hover .cpel-switcher__icon,body .tps-lang .cpel-switcher__toggle--on .cpel-switcher__icon{color:var(--e-global-color-primary)!important}
body .tps-lang .cpel-switcher__list{margin-top:6px;min-width:100%;background:var(--e-global-color-cvblanc);border:0 solid var(--e-global-color-cvfilet);border-radius:3px;box-shadow:none}
body .tps-lang .cpel-switcher__toggle--on+.cpel-switcher__list{max-height:220px!important;border-width:1px;box-shadow:0 12px 26px rgba(13,21,32,.14)}
body .tps-lang .cpel-switcher__list a{display:block;height:38px;line-height:38px;padding:0 13px;color:var(--e-global-color-secondary)!important;transition:background .15s,color .15s}
body .tps-lang .cpel-switcher__list a:hover,body .tps-lang .cpel-switcher__list a:focus{background:var(--e-global-color-cvacier);color:var(--e-global-color-primary)!important}
body .tps-lang .cpel-switcher__list .cpel-switcher__lang+.cpel-switcher__lang a{border-top:1px solid var(--e-global-color-cvacier)}
/* Filet de separation avec le bouton devis (masque quand le bouton ne s'affiche pas) */
body .tps-bar .tps-lang{margin-right:18px;padding-right:18px;border-right:1px solid var(--e-global-color-cvfilet)}
@media(max-width:1024px){body .tps-bar .tps-lang{margin-right:0;padding-right:0;border-right:0}
body .tps-lang .cpel-switcher__toggle>a{height:36px;padding:0 11px}
body .tps-lang .cpel-switcher__list a{height:36px;line-height:36px;padding:0 11px}}
/* ===== MENU BURGER (<= 1200 px, data-layout="dropdown") — audit responsive du 2026-09-28 =====
Les regles de layout ci-dessus (colonnes en ligne, largeurs 24 % / 22 %, !important) servent le mega-menu
desktop mais s'appliquaient aussi dans le burger : panneaux en 3-4 colonnes ecrasees, carte coupee.
En burger on ne garde que les liens : accroche et carte sombre masquees, descriptions masquees,
colonnes empilees (1 colonne en mobile, 2-3 en tablette). Le desktop (data-layout="horizontal") est intact. */
body .elementor-location-header .e-n-menu[data-layout="dropdown"] .e-n-menu-content > .e-con > .e-con{flex-direction:column!important;flex-wrap:nowrap!important;gap:0!important;max-width:100%!important;width:100%!important;padding:6px 20px 18px!important}
body .elementor-location-header .e-n-menu[data-layout="dropdown"] .e-n-menu-content > .e-con > .e-con > .e-con:has(> .tps-kick),
body .elementor-location-header .e-n-menu[data-layout="dropdown"] .e-n-menu-content > .e-con > .e-con > .e-con:has(> .tps-fkick){display:none!important}
body .elementor-location-header .e-n-menu[data-layout="dropdown"] .e-n-menu-content > .e-con > .e-con > .e-con:not(:has(> .tps-kick)):not(:has(> .tps-fkick)){width:100%!important;max-width:100%!important;flex:1 1 auto!important;gap:18px 28px!important;padding:0!important}
body .elementor-location-header .e-n-menu[data-layout="dropdown"] .e-n-menu-content > .e-con > .e-con > .e-con:not(:has(> .tps-kick)):not(:has(> .tps-fkick)) > .e-con,
body .elementor-location-header .e-n-menu[data-layout="dropdown"] .e-n-menu-content > .e-con > .e-con > .e-con:not(:has(> .tps-kick)):not(:has(> .tps-fkick)) > .e-con:has(> .tps-itd){flex:1 1 220px!important;min-width:0!important;width:auto!important;max-width:100%!important}
body .elementor-location-header .e-n-menu[data-layout="dropdown"] .tps-itd{display:none!important}
body .elementor-location-header .e-n-menu[data-layout="dropdown"] .e-con:has(> .tps-itd){row-gap:0!important;padding-top:0!important;padding-bottom:0!important}
body .elementor-location-header .e-n-menu[data-layout="dropdown"] .tps-ith .elementor-heading-title{margin-bottom:0}
/* ===== EN-TÊTE COMPACT ENTRE 1201 ET 1365 PX — audit responsive du 2026-09-28 =====
Depuis l'ajout du sélecteur de langue, le menu passait sur 2 lignes entre 1201 et ~1300 px (FR, NL).
Sur cette plage seulement : sélecteur réduit au drapeau (le code reste dans la liste déroulante),
filet de séparation resserré, intitulés du menu un peu moins espacés. >= 1366 px et burger (<= 1200 px) inchangés. */
@media (min-width:1201px) and (max-width:1365px){
body .tps-lang .cpel-switcher__toggle .cpel-switcher__code{display:none}
body .tps-lang .cpel-switcher__toggle>a{gap:6px;padding:0 10px}
body .tps-bar .tps-lang{margin-right:12px;padding-right:12px}
body .elementor-location-header .e-n-menu[data-layout="horizontal"] .e-n-menu-title{padding-left:5px!important;padding-right:5px!important}
}
@media (min-width:1201px) and (max-width:1259px){
body .elementor-location-header .tps-bar{padding-left:20px!important;padding-right:20px!important}
body .elementor-location-header .e-n-menu[data-layout="horizontal"] .e-n-menu-title{padding-left:4px!important;padding-right:4px!important}
}
/* ==== TPS-HEADER:END ==== */
/* ==== TPS-FOOTER:START ==== */
/* ===== FOOTER TPS (widgets natifs) ===== */body .tpsf-root{padding:0!important}body .tpsf-top{max-width:1240px;margin:0 auto!important;padding:64px 40px 0!important;flex-direction:row!important;gap:48px!important;align-items:flex-start!important;flex-wrap:nowrap!important}body .tpsf-brand{flex:0 0 30%!important;max-width:30%!important;min-width:0!important;padding:0!important}body .tpsf-cols{flex:1 1 auto!important;min-width:0!important;flex-direction:row!important;gap:28px!important;flex-wrap:nowrap!important;padding:0!important}body .tpsf-col{flex:1 1 0!important;min-width:0!important;padding:0!important}body .tpsf-logo img{height:46px!important;width:auto!important;display:block}body .tpsf-tag,body .tpsf-tag p{font-size:15px!important;line-height:1.6!important;color:#9AA7B4!important;max-width:34ch;margin:16px 0 18px!important}body .tpsf-contact,body .tpsf-contact p{font-size:14.5px!important;line-height:1.8!important;color:var(--e-global-color-cvtextenuit)!important;margin:0 0 16px!important}body .tpsf-contact a{color:var(--e-global-color-cvtextenuit)!important;text-decoration:none;transition:color .15s}body .tpsf-contact a:hover{color:var(--e-global-color-cvblanc)!important}body .tpsf-fr .elementor-heading-title{display:inline-block;font-family:var(--e-global-typography-text-font-family),sans-serif!important;font-size:11px!important;font-weight:400!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#8895A3!important;border:1px solid var(--e-global-color-cvfiletnuit);border-radius:3px;padding:6px 12px}body .tpsf-colh .elementor-heading-title{font-family:'Syne',sans-serif!important;font-size:12px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--e-global-color-cvblanc)!important;margin:0 0 14px!important}body .tpsf-collist .elementor-icon-list-icon{display:none!important}body .tpsf-collist .elementor-icon-list-items{padding:0!important;margin:0!important}body .tpsf-collist .elementor-icon-list-item{margin:0 0 9px!important;padding:0!important;border:0!important}body .tpsf-collist .elementor-icon-list-text{font-size:14.5px!important;line-height:1.35!important;color:var(--e-global-color-cvtextenuit)!important;transition:color .15s}body .tpsf-collist a:hover .elementor-icon-list-text{color:var(--e-global-color-cvblanc)!important}body .tpsf-bottom{max-width:1240px;margin:52px auto 0!important;padding:22px 40px!important;flex-direction:row!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:12px!important;border-top:1px solid var(--e-global-color-cvfiletnuit)}body .tpsf-legal,body .tpsf-legal p{font-size:13px!important;color:#7E8B98!important;margin:0!important}@media(max-width:880px){body .tpsf-top{flex-direction:column!important;gap:36px!important;padding:48px 22px 0!important}body .tpsf-brand{flex:1 1 auto!important;max-width:none!important}body .tpsf-bottom{padding:22px!important;margin-top:36px!important}}@media(max-width:767px){body .tpsf-cols{flex-wrap:wrap!important;gap:24px!important}body .tpsf-col{flex:1 1 44%!important}}
/* Logo La French Fab (lien lafrenchfab.fr) sous le badge Fabrique en France */body .tpsf-frenchfab{width:auto!important;max-width:none!important;margin:16px 0 0!important;text-align:left}body .tpsf-frenchfab a{display:inline-block;transition:opacity .2s}body .tpsf-frenchfab a:hover{opacity:.85}body .tpsf-frenchfab img{display:block;width:64px!important;max-width:64px!important;height:auto!important}@media(max-width:767px){body .tpsf-frenchfab img{width:56px!important;max-width:56px!important}}
/* Bouton « Gerer les cookies » (Complianz : button.cmplz-manage-consent) affiche comme les liens legaux du footer */body .tpsf-legal .tpsf-cookiebtn,body .tpsf-legal .tpsf-cookiebtn:hover,body .tpsf-legal .tpsf-cookiebtn:focus{display:inline;background:none!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important;box-shadow:none!important;color:var(--e-global-color-primary)!important;font:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;text-transform:none!important;cursor:pointer}body .tpsf-legal .tpsf-cookiebtn:hover{text-decoration:underline!important}body .tpsf-legal .tpsf-cookiebtn:focus-visible{outline:2px solid var(--e-global-color-primary);outline-offset:2px}
/* Logos TPS + La French Fab cote a cote dans le footer (demande client 2026-09-18) */body .tpsf-logos{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:20px!important;width:auto!important;padding:0!important}body .tpsf-logos .tpsf-logo{width:auto!important;margin:0!important}body .tpsf-logos .tpsf-frenchfab{width:auto!important;margin:0!important;padding-left:20px;border-left:1px solid var(--e-global-color-cvfiletnuit)}body .tpsf-logos .tpsf-frenchfab img{width:auto!important;max-width:none!important;height:54px!important}@media(max-width:767px){body .tpsf-logos .tpsf-frenchfab img{width:auto!important;max-width:none!important;height:48px!important}}
/* ===== FOOTER EN TABLETTE (881-1024 px) — audit responsive du 2026-09-28 =====
Bloc marque + 4 colonnes de liens sur une ligne = colonnes de 132 px, intitulés NL sur 3 lignes et
« MVO- & kwaliteitsengagement » qui débordait. Même empilement qu'en dessous de 880 px : marque au-dessus,
4 colonnes pleine largeur. Césure autorisée dans les liens (mots composés NL en mobile). */
@media (min-width:881px) and (max-width:1024px){
body .tpsf-top{flex-direction:column!important;gap:36px!important}
body .tpsf-brand{flex:1 1 auto!important;max-width:none!important}
}
body .tpsf-col .elementor-icon-list-text{overflow-wrap:break-word;hyphens:auto}
/* ==== TPS-FOOTER:END ==== */
/* ===== TPS-PERF : image de repli de la bannière vidéo de l'accueil en mobile (pas d'option responsive native pour le repli vidéo) ; même URL que le préchargement du snippet 20 ===== */
@media (max-width: 767px) {
body.home [data-elementor-type="wp-page"] > .e-con.tps-hero:first-child {
background-image: url("/wp-content/uploads/2026/09/accueil-hero-atelier-tps-premiere-image-1024x576.jpg");
}
}
/* ===== /TPS-PERF ===== */
/* ===== TPS-A11Y : libellés passés de h4/h6 à pour l'ordre des titres (28/09/2026). Reprend à l'identique (même spécificité 0,1,1 via :where) la typo que le kit appliquait par balise h6 / h4. ===== */
:where(.tps-eyebrow, .tps-kicker, .tps-stepn, .tps-trustlab, .tps-kick, .tps-fkick, .tps-colh, .tps-ith) p.elementor-heading-title {
line-height: var(--e-global-typography-tpsh6-line-height);
}
:where(.tps-kick, .tps-fkick, .tps-colh, .tps-ith) p.elementor-heading-title {
font-size: var(--e-global-typography-tpsh6-font-size);
}
:where(.tps-ftitle) p.elementor-heading-title {
font-size: var(--e-global-typography-tpsh4-font-size);
line-height: var(--e-global-typography-tpsh4-line-height);
}
/* Contrastes (28/09/2026) : liens légaux du footer en Bleu clair (7,9:1 sur Nuit, au lieu de 3,4:1) et soulignés ; liens du fil d'Ariane soulignés (leur couleur seule ne les distingue pas du texte gris). */
body .tpsf-legal a,
body .tpsf-legal .tpsf-cookiebtn,
body .tpsf-legal .tpsf-cookiebtn:hover,
body .tpsf-legal .tpsf-cookiebtn:focus {
color: var(--e-global-color-cvbleuclair) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}
body .tpsf-legal a:hover,
body .tpsf-legal .tpsf-cookiebtn:hover {
color: var(--e-global-color-cvblanc) !important;
}
body .tpsf-legal .tpsf-cookiebtn:focus-visible {
outline-color: var(--e-global-color-cvbleuclair);
}
body:not(.home) .tps-crumb a {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Calculateur, page résultat : titres h3 passés en h2 (28/09/2026). Le titre du devis reprend la typo que le kit lui donnait en h3. */
:where(#cvspr-root) h2.cvspr-devis-h {
font-family: var(--e-global-typography-tpsh3-font-family), sans-serif;
font-size: var(--e-global-typography-tpsh3-font-size);
font-weight: var(--e-global-typography-tpsh3-font-weight);
line-height: var(--e-global-typography-tpsh3-line-height);
letter-spacing: var(--e-global-typography-tpsh3-letter-spacing);
word-spacing: var(--e-global-typography-tpsh3-word-spacing);
}
/* ===== /TPS-A11Y ===== */
/* ==== TPS-RECHERCHE:START ==== */
/* Recherche du site (demande client du 29/09/2026) - classes tpsx-sr-*.
Couleurs, typographies, bordures : reglages natifs des widgets (bouton loupe des en-tetes 62/932/938,
popups 1473/1475/1477, carte de resultat 1472, pages de resultats 1474/1476/1478).
Ici seulement ce qu'Elementor ne sait pas regler. */
/* Bouton loupe : carre de 38 px (36 en <= 1024) comme le selecteur de langue. Le libelle
(« Rechercher sur le site ») reste lu par les lecteurs d'ecran, seule l'icone s'affiche. */
body .elementor-location-header .tpsx-sr-btn{width:auto!important;flex:0 0 auto}
body .elementor-location-header .tpsx-sr-btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0!important;line-height:1}
body .elementor-location-header .tpsx-sr-btn .elementor-button-content-wrapper{gap:0}
body .elementor-location-header .tpsx-sr-btn .elementor-button-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
body .elementor-location-header .tpsx-sr-btn .elementor-button-icon{margin:0!important;font-size:15px}
body .elementor-location-header .tpsx-sr-btn .elementor-button-icon svg{width:15px;height:15px}
body .elementor-location-header .tpsx-sr-btn .elementor-button:focus-visible{outline:2px solid var(--e-global-color-primary);outline-offset:2px}
@media(max-width:1024px){body .elementor-location-header .tpsx-sr-btn .elementor-button{width:36px;height:36px}}
/* Place de la loupe dans la barre : menu verifie sur une ligne de 1201 a 1920 px en FR / EN / NL,
page rechargee a chaque largeur, barre de defilement Windows comprise (29/09/2026).
1201-1535 : espacement de la barre 20 -> 12 px ; 1201-1300 : intitules du menu 4-5 -> 3 px ;
1367-1439 (typo « bureau », plus large) : intitules 8 -> 6 px et selecteur de langue reduit au drapeau,
comme deja entre 1201 et 1365. */
@media (min-width:1201px) and (max-width:1535px){
body .elementor-location-header .tps-bar{column-gap:12px!important}
body .tps-bar .tps-lang{margin-right:12px!important;padding-right:12px!important}
}
@media (min-width:1201px) and (max-width:1300px){
body .elementor-location-header .e-n-menu[data-layout="horizontal"] .e-n-menu-title{padding-left:3px!important;padding-right:3px!important}
}
@media (min-width:1367px) and (max-width:1439px){
body .elementor-location-header .e-n-menu[data-layout="horizontal"] .e-n-menu-title{padding-left:6px!important;padding-right:6px!important}
body .tps-lang .cpel-switcher__toggle .cpel-switcher__code{display:none}
body .tps-lang .cpel-switcher__toggle>a{gap:6px;padding:0 10px}
}
/* Carte de resultat (popup + page de resultats) : filet + tick bleu de 28 px qui file sur toute la
largeur au survol (langage des titres de colonnes du mega-menu). Toute la carte est cliquable via
le lien du titre (pseudo-element etire : un seul lien, nomme par le titre). Resume sur 2 lignes. */
body .tpsx-sr-card{position:relative}
body .tpsx-sr-card .elementor-widget{position:static}
body .tpsx-sr-card::after{content:"";position:absolute;left:0;top:-1px;width:28px;height:2px;background:var(--e-global-color-primary);transition:width .28s cubic-bezier(.22,1,.36,1);pointer-events:none}
body .tpsx-sr-card:hover::after,body .tpsx-sr-card:focus-within::after{width:100%}
body .tpsx-sr-title .elementor-heading-title a::before{content:"";position:absolute;inset:0;z-index:1}
body .tpsx-sr-title .elementor-heading-title a:focus-visible{outline:none}
body .tpsx-sr-card:has(.tpsx-sr-title a:focus-visible){outline:2px solid var(--e-global-color-primary);outline-offset:4px}
body .tpsx-sr-desc .elementor-heading-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Popup : resultats en direct defilants, le dernier sans marge */
body .tpsx-sr-popform .e-search-results .e-loop-item:last-child .tpsx-sr-card{padding-bottom:12px}
/* Page de resultats : champ de recherche du bandeau limite a 640 px, message « aucun resultat »,
pagination en carres (page courante = carre bleu, le marqueur du systeme) */
body .tps-hero .tpsx-sr-heroform{max-width:640px}
body .tpsx-sr-grid .e-loop-nothing-found-message__text{max-width:62ch;margin:0}
body .tpsx-sr-grid .e-loop-nothing-found-message__text a{color:var(--e-global-color-primary);text-decoration:underline;text-underline-offset:3px}
body .tpsx-sr-grid .e-load-more-anchor+.elementor-pagination,body .tpsx-sr-grid .elementor-pagination{display:flex;flex-wrap:wrap;gap:6px}
body .tpsx-sr-grid .elementor-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;margin:0!important;padding:0 12px;border:1px solid var(--e-global-color-cvfilet);border-radius:3px;text-decoration:none}
body .tpsx-sr-grid .elementor-pagination a.page-numbers:hover{border-color:var(--e-global-color-primary)}
body .tpsx-sr-grid .elementor-pagination .page-numbers.current{background:var(--e-global-color-primary);border-color:var(--e-global-color-primary);color:var(--e-global-color-cvblanc)!important}
body .tpsx-sr-grid .elementor-pagination .page-numbers.dots{border-color:transparent}
body .tpsx-sr-grid .elementor-pagination .page-numbers.inactive{display:none}
/* Popup : la zone de message d'Elementor (overflow:auto) coupait la liste des résultats en direct,
positionnée en absolu sous le champ : elle déborde désormais sous le bandeau, comme un menu déroulant. */
body .dialog-message:has(.tpsx-sr-popform){overflow:visible}
body .tpsx-sr-popform .e-search-results-container{box-shadow:0 22px 44px -20px rgba(13,21,32,.45)}
/* Mobile (<= 767 px, la barre passe a la ligne) : avec la loupe, logo + burger + loupe + langue ne tenaient plus
(en-tete de 81 -> 127 px a 360-390). Marges laterales 32 -> 20 px (alignees sur la gouttiere du contenu, 22 px),
espacement 20 -> 10 px ; sous 400 px, selecteur de langue reduit au drapeau. Verifie de 320 a 767 px, FR / EN / NL. */
@media (max-width:767px){body .elementor-location-header .tps-bar{padding-left:20px!important;padding-right:20px!important;column-gap:10px!important}}
@media (max-width:400px){body .tps-lang .cpel-switcher__toggle .cpel-switcher__code{display:none}body .tps-lang .cpel-switcher__toggle>a{gap:6px;padding:0 10px}}
/* ==== TPS-RECHERCHE:END ==== *//* End custom CSS */