produite par le contenu ACF `texte_h2_$i`). Reproduit le rendu de la V1 Elementor :
image flottée à gauche du texte avec une légende fine en italique en dessous. */
.sf-content .jp-figure-float-left{
float:left;
margin:6px 32px 18px 0;
max-width:540px;
width:58%;
}
.sf-content .jp-figure-float-left img{
display:block;width:100%;height:auto;border-radius:14px;
}
.sf-content .jp-figure-float-left figcaption{
font-size:12.5px;color:var(--mute);line-height:1.45;font-style:italic;
margin-top:8px;padding:0 4px;
}
.sf-content .jp-clear-float{clear:both}
@media (max-width:720px){
.sf-content .jp-figure-float-left{float:none;width:100%;max-width:none;margin:0 0 18px}
}
.sf-content{}
.sf-section{
background:var(--paper);
border:1px solid rgba(10,27,51,.05);
border-radius:28px;
padding:44px 48px;
margin-bottom:24px;
scroll-margin-top:120px;
counter-increment:sfsec;position:relative;
box-shadow:0 8px 16px -6px rgba(10,27,51,.05);
}
.sf-content{counter-reset:sfsec}
@media (max-width:640px){.sf-section{padding:32px 24px}}
.sf-section > h2{
font-size:clamp(1.7rem,1.8vw + 1rem,2.4rem);
font-weight:800;letter-spacing:-0.035em;line-height:1.12;
color:var(--ink);
margin:0 0 24px;
display:flex;align-items:center;gap:24px;
}
.sf-section > h2::before{
content:counter(sfsec,decimal-leading-zero);
font-family:'Plus Jakarta Sans','Inter',sans-serif;
font-size:clamp(3.4rem,3.6vw + 1rem,4.6rem);
font-weight:800;line-height:0.85;letter-spacing:-0.06em;
color:var(--terracotta);
flex-shrink:0;padding-top:2px;
}
@media (max-width:640px){
.sf-section > h2{gap:16px}
.sf-section > h2::after{left:32px;top:24px}
}
.sf-section h3{
font-size:19px;font-weight:700;color:var(--ink);
margin:32px 0 14px;letter-spacing:-0.02em;
}
.sf-section p{
font-size:15.5px;line-height:1.8;color:var(--ink);
margin:0 0 14px;text-align:justify;
}
.sf-section p strong{color:var(--ink);font-weight:700;background:var(--butter);padding:0 3px;border-radius:3px;box-decoration-break:clone}
.sf-section p em{font-style:italic;color:inherit}
.sf-section p a{color:var(--terracotta);text-decoration:underline}
.sf-section p a:hover{color:var(--ink)}
.sf-section ul{
list-style:disc;
margin:14px 0 22px;
padding:0 0 0 36px;
}
.sf-section ul li{
font-size:16px;line-height:1.8;color:var(--ink-2);
margin-bottom:6px;padding-left:4px;
}
.sf-section ul li::marker{color:var(--terracotta);font-size:1.05em}
.sf-section ul li strong{color:var(--ink);font-weight:700;background:var(--butter);padding:0 3px;border-radius:3px;box-decoration-break:clone}
.sf-section ol{
list-style:decimal;
margin:14px 0 22px;
padding:0 0 0 36px;
}
.sf-section ol li{
font-size:16px;line-height:1.8;color:var(--ink-2);
margin-bottom:10px;padding-left:4px;
}
.sf-section ol li::marker{color:var(--terracotta);font-weight:700}
.sf-section ol li strong{color:var(--ink);font-weight:700;background:var(--butter);padding:0 3px;border-radius:3px;box-decoration-break:clone}
.sf-section figure{
margin:24px 0;border-radius:22px;overflow:hidden;
background:var(--cream);
border:1px solid rgba(10,27,51,.05);
}
@media (min-width:900px){.sf-section figure.h2-fig-left{float:left;width:58%;margin:6px 32px 18px 0}}
.sf-section figure img{width:100%;height:auto;display:block}
.sf-section figure figcaption{
padding:14px 18px;font-size:13px;font-style:italic;
color:var(--ink-2);line-height:1.55;
background:var(--paper);
}
.sf-section table{
width:100%;border-collapse:collapse;
margin:24px 0;font-size:14px;
background:transparent;
}
.sf-section table th,
.sf-section table td{
padding:15px;
border:1px solid #CBD5E0;
vertical-align:middle;
line-height:1.55;
font-size:14px;
}
.sf-section table th{
text-align:center;
font-weight:800;color:#1A2030;
background:#F8FAFC;
}
.sf-section table th:nth-child(2){background:#E2E8F0}
.sf-section table th:nth-child(3){background:#CBD5E0}
.sf-section table th:last-child{
background:#BEE3F8;color:#004A99;
}
.sf-section table td{
color:#2D3748;background:#fff;
}
.sf-section table td:first-child{
font-weight:700;color:#2D3748;background:#fff;width:170px;
}
.sf-section table td:nth-child(2){background:#F7FAFC}
.sf-section table td:nth-child(3){background:#EDF2F7}
.sf-section table td:last-child{
background:#EBF8FF;color:#1A2030;font-weight:600;
}
.sf-section table tr{transition:background-color .2s ease}
.sf-section table tbody tr:hover td{background-color:#FFFBEA}
.sf-section table tbody tr:hover td:last-child{background-color:#D5EEFB}
.sf-section table td a{color:#00A4DD;font-weight:500;text-decoration:none}
.sf-section table td a:hover{text-decoration:underline}
.sf-section details{
background:var(--cream);
border-radius:18px;
margin-bottom:10px;overflow:hidden;
transition:all .25s;
border:1px solid transparent;
}
.sf-section details[open]{
background:var(--paper);
border-color:var(--peach);
box-shadow:0 12px 24px -8px rgba(0,163,221,.15);
}
.sf-section details summary{
cursor:pointer;list-style:none;padding:22px 60px 22px 60px;position:relative;
}
.sf-section details summary::-webkit-details-marker{display:none}
.sf-section details summary p{
font-weight:700;font-size:16px;color:var(--ink);
margin:0;line-height:1.4;letter-spacing:-0.01em;text-align:left;
}
.sf-section details summary::before{
content:"?";
position:absolute;left:18px;top:50%;transform:translateY(-50%);
width:30px;height:30px;border-radius:50%;
background:var(--terracotta-soft);color:var(--terracotta);
font-weight:800;font-size:16px;
display:grid;place-items:center;
transition:all .25s;
}
.sf-section details[open] summary::before{background:var(--terracotta);color:#fff;transform:translateY(-50%) rotate(180deg)}
.sf-section details summary::after{
content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
font-size:24px;line-height:1;color:var(--terracotta);font-weight:300;
transition:transform .3s;
}
.sf-section details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.sf-section details > p{padding:0 24px 22px 60px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
/* ============= CTA FINAL ============= */
.sf-final{
padding:80px 24px;margin:40px auto 60px;max-width:1280px;
border-radius:36px;
background:linear-gradient(135deg,#FFF8E8 0%,#FBFAF3 50%,#E0F4FA 100%);
position:relative;overflow:hidden;
border:1px solid rgba(0,163,221,.1);
}
.sf-final::before{
content:"";position:absolute;top:-60px;right:-60px;
width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle,rgba(0,163,221,.25),transparent 70%);
filter:blur(10px);
}
.sf-final::after{
content:"";position:absolute;bottom:-80px;left:-80px;
width:320px;height:320px;border-radius:50%;
background:radial-gradient(circle,rgba(255,207,4,.22),transparent 70%);
filter:blur(15px);
}
.sf-final-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center}
.sf-final-eyebrow{
display:inline-flex;align-items:center;gap:10px;
padding:9px 22px;
background:var(--paper);
border:1px solid var(--peach);
border-radius:99px;
font-size:13px;font-weight:700;color:var(--terracotta);
letter-spacing:0.04em;margin-bottom:28px;
box-shadow:0 8px 16px -4px rgba(0,163,221,.15);
}
.sf-final-eyebrow::before{content:"🚀"}
.sf-final h2{
font-size:clamp(2.2rem,2.5vw + 1rem,3.4rem);
font-weight:800;letter-spacing:-0.04em;line-height:1.1;color:var(--ink);
margin-bottom:20px;
}
.sf-final h2 .sf-final-hand{
font-family:'Caveat',cursive;font-weight:700;color:var(--terracotta);
font-size:1.2em;display:inline-block;transform:rotate(-3deg);
}
.sf-final p{font-size:18px;color:var(--ink-2);margin-bottom:36px;line-height:1.55}
.sf-final-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.sf-final-primary{
padding:16px 32px;font-size:15px;font-weight:700;
border-radius:10px;
background:var(--terracotta);color:#fff;
cursor:pointer;transition:all .28s ease;
box-shadow:0 12px 26px -8px rgba(0,163,221,.45);
display:inline-flex;align-items:center;gap:8px;
}
.sf-final-primary::after{content:"→";transition:transform .2s}
.sf-final-primary:hover{background:#FFCF04;color:var(--ink);box-shadow:0 16px 32px -8px rgba(255,207,4,.50)}
.sf-final-primary:hover::after{transform:translateX(4px)}
.sf-final-phone{
padding:14px 28px;font-size:15px;font-weight:600;
border-radius:10px;
background:#fff;
border:2px solid var(--terracotta);
color:var(--terracotta);transition:all .28s ease;
}
.sf-final-phone:hover{background:var(--terracotta);color:#fff;border-color:var(--terracotta)}
/* ============= FOOTER ============= */
.sf-footer{
background:var(--cream-2);
border-top:1px solid rgba(10,27,51,.06);
padding:60px 0 28px;color:var(--ink-2);
}
.sf-footer-wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.sf-footer-top{
display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:48px;
padding-bottom:36px;border-bottom:1px solid rgba(10,27,51,.08);
}
@media (max-width:900px){.sf-footer-top{grid-template-columns:1fr 1fr}}
.sf-footer-brand{display:inline-block;margin-bottom:14px}
.sf-footer-brand-logo{height:38px;width:auto;display:block}
.sf-footer-desc{font-size:14px;line-height:1.65;color:var(--ink-2);max-width:320px;margin-bottom:18px}
.sf-footer-phone{
display:inline-flex;align-items:center;gap:8px;
font-size:15px;font-weight:700;color:var(--terracotta);
padding:9px 16px;background:var(--paper);border-radius:99px;
border:1px solid var(--peach);
}
.sf-footer h5{font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:16px}
.sf-footer ul li{margin-bottom:10px}
.sf-footer ul li a{font-size:14px;color:var(--ink-2);transition:color .15s}
.sf-footer ul li a:hover{color:var(--terracotta)}
.sf-footer-bottom{
padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
font-size:12.5px;color:var(--mute);
}
.sf-footer-legal{display:flex;gap:22px}
.sf-footer-legal a:hover{color:var(--terracotta)}
/* Responsive */
@media (max-width:980px){
.sf-hero-inner{grid-template-columns:1fr;gap:48px}
.sf-hero-right{position:static}
.sf-trust-inner{grid-template-columns:1fr;gap:18px;padding:24px}
.sf-trust-cards{grid-template-columns:1fr}
.sf-hand-note{display:none}
}
@media (max-width:640px){
.sf-header{border-radius:18px;padding:8px 12px 8px 16px}
.sf-section figure.h2-fig-left{float:none;width:100%;margin:14px 0}
}
/* ============= STATS / CHIFFRES CLÉS ============= */
.sf-stats{padding:0 0 24px;position:relative}
.sf-stats-inner{
max-width:1232px;margin:0 auto;padding:34px 28px 30px;
background:var(--paper);
border:1px solid var(--module-border);
border-radius:24px;
}
.sf-stats-title{
text-align:center;font-size:22px;font-weight:700;color:var(--terracotta);
letter-spacing:-0.015em;margin-bottom:26px;
}
.sf-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sf-stat{text-align:center;position:relative}
.sf-stat + .sf-stat::before{
content:"";position:absolute;left:0;top:14%;height:72%;width:1px;
background:linear-gradient(180deg,transparent,rgba(10,27,51,.10),transparent);
}
.sf-stat-num{
font-size:54px;font-weight:800;line-height:1;letter-spacing:-0.035em;
margin-bottom:8px;
font-variant-numeric:tabular-nums;
transition:transform .25s ease;
}
.sf-stat:hover .sf-stat-num{transform:translateY(-2px)}
.sf-stat-num--blue{color:var(--terracotta)}
.sf-stat-num--ink{color:var(--ink)}
.sf-stat-num--yellow{color:#FFCF04}
.sf-stat-label{
font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:-0.005em;
}
.sf-stat--blue .sf-stat-label{color:var(--terracotta)}
.sf-stat--yellow .sf-stat-label{color:#D9A800}
/* ============= PIPELINE / COMMENT LANCER UNE CAMPAGNE ============= */
.sf-pipeline{padding:0 0 24px;position:relative}
.sf-pipeline-inner{
max-width:1232px;margin:0 auto;padding:34px 28px 30px;
background:var(--paper);
border:1px solid var(--module-border);
border-radius:24px;
}
.sf-pipeline-title{
text-align:center;font-size:22px;font-weight:700;color:var(--terracotta);
letter-spacing:-0.015em;margin-bottom:26px;
}
.sf-pipeline-grid{
display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
}
.sf-pipeline-card{
background:var(--paper);
border:1px solid var(--module-border);
border-radius:14px;
overflow:hidden;
display:flex;flex-direction:column;
transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.sf-pipeline-card:hover{
transform:translateY(-4px);
border-color:var(--terracotta);
box-shadow:0 14px 28px -10px rgba(0,163,221,.25);
}
.sf-pipeline-num{
background:linear-gradient(180deg,#5DC8E4 0%,var(--terracotta) 100%);
color:#fff;
font-size:36px;font-weight:800;text-align:center;
padding:12px 0 14px;
letter-spacing:-0.02em;line-height:1;
}
.sf-pipeline-body{
padding:18px 12px;
display:flex;flex-direction:column;gap:18px;
text-align:center;
flex:1;
}
.sf-pipeline-step{
display:flex;flex-direction:column;align-items:center;gap:7px;
}
.sf-pipeline-icon{
width:56px;height:56px;
display:inline-flex;align-items:center;justify-content:center;
transition:transform .3s ease;
}
.sf-pipeline-card:hover .sf-pipeline-icon{
transform:scale(1.10);
}
.sf-pipeline-icon img{width:100%;height:100%;object-fit:contain;display:block}
.sf-pipeline-icon--yellow{background:#FFF7DA}
.sf-pipeline-step strong{
font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;
display:block;
}
.sf-pipeline-step small{
display:block;font-size:11px;color:var(--mute);font-weight:500;
margin-top:3px;line-height:1.3;font-style:italic;
}
@media (max-width:960px){
.sf-pipeline-grid{grid-template-columns:repeat(3,1fr)}
.sf-stats-grid{gap:14px}
.sf-stat-num{font-size:42px}
.sf-stat + .sf-stat::before{display:none}
}
@media (max-width:640px){
.sf-pipeline-grid{grid-template-columns:repeat(2,1fr)}
.sf-stats-grid{grid-template-columns:1fr;gap:18px}
.sf-stats-inner{padding:24px 20px}
}
/* ============= PERF — façade YouTube (identique visuellement à l'embed) ============= */
.sf-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
.sf-video-wrap[data-yt]{cursor:pointer}
.sf-video-play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:68px;height:48px;padding:0;background:none;border:0;cursor:pointer;
transition:transform .2s ease;
}
.sf-video-play svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.sf-video-play .yt-bg{fill:#212121;fill-opacity:.82;transition:fill .2s,fill-opacity .2s}
.sf-video-wrap[data-yt]:hover .yt-bg,
.sf-video-wrap[data-yt]:focus-within .yt-bg{fill:#FF0000;fill-opacity:1}
/* ============= PERF — pause animation pulse hors viewport ============= */
.sf-video-card.is-paused .sf-video-meta-dot::before{animation-play-state:paused}
/* ============= PERF — content-visibility (sections hors-fold) ============= */
.sf-stats,.sf-pipeline,.sf-body,.sf-final,.sf-footer{content-visibility:auto}
.sf-stats{contain-intrinsic-size:1px 320px}
.sf-pipeline{contain-intrinsic-size:1px 680px}
.sf-body{contain-intrinsic-size:1px 4200px}
.sf-final{contain-intrinsic-size:1px 280px}
.sf-footer{contain-intrinsic-size:1px 420px}
/* ============= PERF — reduced motion ============= */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* ============================================================
OVERRIDES V2 — règles préfixées #jp-pilier-do-root pour
- augmenter la spécificité (échapper aux CSS du thème + Autoptimize)
- reproduire le rendu de la V2 inline validée (méga-menu, header pill,
boutons, footer, etc.).
Ces overrides sont la copie littérale du bloc inline de
wp-plugins/deploy_pilier_v2.php (lignes 244-436). À garder synchro.
============================================================ */
/* Trust strip : 3 colonnes strict, jamais wrap */
#jp-pilier-do-root .sf-trust-cards { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; grid-template-rows: 1fr !important; grid-auto-rows: 0 !important; gap: 12px !important; }
#jp-pilier-do-root .sf-trust-card { position: relative !important; overflow: hidden !important; min-height: 74px !important; display: block !important; }
#jp-pilier-do-root .sf-trust-card-front,
#jp-pilier-do-root .sf-trust-card-back { position: absolute !important; inset: 0 !important; display: flex !important; }
#jp-pilier-do-root .sf-trust-card:hover .sf-trust-card-front { opacity: 1 !important; transform: none !important; }
#jp-pilier-do-root .sf-trust-card:hover .sf-trust-card-back { opacity: 1 !important; transform: translateY(0) !important; }
/* Mega menu : caché par défaut, ouvert au hover */
#jp-pilier-do-root .jp-mega { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
#jp-pilier-do-root .jp-nav-item:hover .jp-mega,
#jp-pilier-do-root .jp-nav-item.open .jp-mega { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
/* Vidéo YouTube : poster + bouton play centré */
#jp-pilier-do-root .sf-video-wrap { position: relative !important; aspect-ratio: 16/9 !important; cursor: pointer !important; }
#jp-pilier-do-root .sf-video-poster { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
#jp-pilier-do-root .sf-video-play { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; z-index: 2 !important; background: transparent !important; border: none !important; cursor: pointer !important; }
/* Sommaire : plus compact. Sticky en JS (le wrapper canvas a overflow:hidden auto qui casse position:sticky natif). */
#jp-pilier-do-root .sf-toc { position: sticky; top: 110px; align-self: start; padding: 14px 10px !important; }
#jp-pilier-do-root .sf-toc-label { font-size: 11px !important; letter-spacing: 0.12em !important; margin-bottom: 8px !important; padding-bottom: 8px !important; }
#jp-pilier-do-root .sf-toc a { padding: 7px 12px !important; font-size: 13px !important; line-height: 1.3 !important; gap: 10px !important; margin-bottom: 0 !important; }
#jp-pilier-do-root .sf-toc a::before { width: 22px !important; height: 22px !important; font-size: 11px !important; }
/* Stats : forcer affichage immédiat même si JS ne tourne pas (fallback) */
#jp-pilier-do-root .sf-stat-num { font-feature-settings: "tnum" !important; }
/* Anti-wpautop ciblé : cache uniquement les vides ou contenant juste un
. */
#jp-pilier-do-root p:empty,
#jp-pilier-do-root p > br:only-child { display: none !important; }
#jp-pilier-do-root p:has(> br:only-child) { display: none !important; }
/* === MEGA-MENU : alignement EXACT sur l'original Elementor === */
#jp-pilier-do-root .jp-mega { font-family: "DM Sans", "Plus Jakarta Sans", sans-serif !important; }
#jp-pilier-do-root .jp-mega-services {
display: grid !important;
width: 1220px !important; max-width: 96vw !important;
box-sizing: border-box !important;
padding: 10px !important;
grid-template-columns: minmax(0, 1fr) 365px !important; gap: 10px !important;
}
#jp-pilier-do-root .jp-mega-relation-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 22px !important;
}
#jp-pilier-do-root .jp-mega-ressources { width: 560px !important; max-width: 96vw !important; }
#jp-pilier-do-root .jp-mega-item-text small { white-space: normal !important; }
/* Titres col : 25px bold cyan, sans uppercase forcé, sans border-bottom */
#jp-pilier-do-root .jp-mega-title {
text-transform: none !important; letter-spacing: 0 !important;
font-size: 25px !important; font-weight: 700 !important;
color: #00A4DD !important; text-align: center !important;
border-bottom: none !important; padding-bottom: 0 !important;
margin: 0 0 18px !important;
}
#jp-pilier-do-root .jp-mega-services > .jp-mega-col-relation > .jp-mega-title { font-weight: 800 !important; }
#jp-pilier-do-root .jp-mega-ressources .jp-mega-title {
font-size: 18px !important; font-weight: 700 !important;
border-bottom: 2px solid #00A4DD !important; padding-bottom: 8px !important;
display: inline-block !important; margin: 0 auto 14px !important;
}
#jp-pilier-do-root .jp-mega-ressources .jp-mega-col { text-align: center !important; }
#jp-pilier-do-root .jp-mega-ressources .jp-mega-item { text-align: left !important; }
/* ENTREPRISES / FREELANCES : MAJ, 20px bold, centrés */
#jp-pilier-do-root .jp-mega-block-label {
text-transform: uppercase !important; letter-spacing: 0.04em !important;
font-size: 20px !important; font-weight: 800 !important;
text-align: center !important; display: block !important;
margin: 0 0 14px !important; padding: 0 !important;
text-decoration: none !important;
}
#jp-pilier-do-root .jp-mega-block-label[data-color="cyan"] { color: #00A4DD !important; }
#jp-pilier-do-root .jp-mega-block-label[data-color="yellow"] { color: #FFD200 !important; }
/* Labels items : main 16px semi-bold noir, sub 13px semi-bold italic gris */
#jp-pilier-do-root .jp-mega-item-text strong {
font-size: 16px !important; font-weight: 600 !important;
color: #000 !important; line-height: 28px !important;
white-space: nowrap !important; letter-spacing: 0 !important;
margin: 0 !important;
font-style: normal !important;
display: block !important;
}
#jp-pilier-do-root .jp-mega-item-text small {
font-size: 13px !important; font-weight: 600 !important;
color: #7F7F7F !important; line-height: 28px !important;
letter-spacing: 0 !important; font-style: italic !important;
white-space: nowrap !important;
display: block !important;
}
/* Boutons "Rechercher des Téléopérateurs" / "Trouver des Missions" :
height 80px, padding 25px 0 25px 30px, gap 20px, image 75x75, align-items center. */
#jp-pilier-do-root .jp-mega-btn {
padding: 25px 0 25px 30px !important;
height: 80px !important; box-sizing: border-box !important;
border-radius: 12px !important;
font-size: 16px !important; font-weight: 500 !important;
display: flex !important; align-items: center !important; gap: 20px !important;
flex-direction: row !important;
text-align: left !important;
background: transparent !important;
text-decoration: none !important;
border-width: 1px !important; border-style: solid !important;
margin-top: 8px !important;
width: 100% !important;
}
#jp-pilier-do-root .jp-mega-btn img {
width: 75px !important; height: 75px !important; flex-shrink: 0 !important;
display: block !important;
}
#jp-pilier-do-root .jp-mega-btn-label {
font-size: 16px !important; font-weight: 500 !important;
white-space: nowrap !important;
display: inline-block !important; line-height: 1.2 !important;
}
#jp-pilier-do-root .jp-mega-btn-cyan { border-color: #00A4DD !important; color: var(--ink) !important; }
#jp-pilier-do-root .jp-mega-btn-yellow { border-color: #FFD200 !important; color: var(--ink) !important; }
#jp-pilier-do-root .jp-mega-btn:hover { transform: translateY(-1px) !important; }
/* Mega-menu col-relation : centrer verticalement le bloc service+bouton dans
la hauteur stretchée par le grid (équilibre visuel inspiré du méga-menu
original jobphoning.com).
La col-relation est stretchée à 337px par le grid parent .jp-mega-services
(align-items: stretch défaut). Le titre "Notre service de mise en relation"
prend ~38px, puis le grid relation prend sa hauteur NATURELLE de 206px
en haut, laissant ~93px de vide sous le bouton. Pour distribuer ce vide
au-dessus et en-dessous du couple service+bouton, on rend la col-relation
flex-column avec le grid flex:1, puis justify-content:center sur la sub-col. */
#jp-pilier-do-root .jp-mega-col-relation {
display: flex !important;
flex-direction: column !important;
}
#jp-pilier-do-root .jp-mega-col-relation .jp-mega-relation-grid {
flex: 1 !important;
}
#jp-pilier-do-root .jp-mega-col-relation .jp-mega-subcol {
justify-content: center !important;
}
#jp-pilier-do-root .jp-mega-col-relation .jp-mega-item {
flex: 0 0 auto !important;
}
/* Panneau NOS OUTILS & SERVICES : fond bleu très pâle */
#jp-pilier-do-root .jp-mega-col-tools {
background: #EBFBFC !important;
border-radius: 18px !important;
padding: 24px 10px 27px !important;
}
/* Module "Campagne pilote" : marges symétriques visuelles entre FAQ et footer. */
#jp-pilier-do-root .sf-final { padding: 36px 24px !important; margin: 40px auto 120px !important; }
#jp-pilier-do-root .sf-final h2 { margin-bottom: 14px !important; }
#jp-pilier-do-root .sf-final p { margin-bottom: 22px !important; }
/* Boutons primaires : suppression de la transition de background-color (anti vert).
On garde transitions sur box-shadow et transform pour le "pop" visuel au hover. */
#jp-pilier-do-root .sf-btn-primary,
#jp-pilier-do-root .sf-final-primary,
#jp-pilier-do-root .jp-phone-pill,
#jp-pilier-do-root .jp-header-top-cta {
transition: box-shadow .28s ease, transform .2s ease !important;
}
/* Forcer les couleurs des boutons/liens du hero et du header (un autre CSS plus
spécifique — Elementor / thème — overrideait color en cyan, rendant le texte invisible
sur fond cyan). On force ici, niveau wrapper, pour échapper à ces overrides. */
#jp-pilier-do-root .sf-btn-primary,
#jp-pilier-do-root .sf-final-primary {
background: var(--terracotta) !important;
color: #fff !important;
}
#jp-pilier-do-root .sf-btn-primary:hover,
#jp-pilier-do-root .sf-final-primary:hover {
background: #FFCF04 !important;
color: var(--ink) !important;
}
#jp-pilier-do-root .sf-btn-ghost {
background: #fff !important;
border: 2px solid var(--terracotta) !important;
color: var(--terracotta) !important;
}
#jp-pilier-do-root .sf-btn-ghost:hover {
background: var(--terracotta) !important;
color: #fff !important;
}
#jp-pilier-do-root .jp-phone-pill {
background: var(--terracotta) !important;
color: #fff !important;
}
#jp-pilier-do-root .jp-phone-pill:hover {
background: #FFCF04 !important;
color: var(--ink) !important;
}
#jp-pilier-do-root .jp-header-top-cta {
background: #fff !important;
color: var(--ink) !important;
}
#jp-pilier-do-root .jp-header-top-cta:hover {
background: #FFCF04 !important;
color: var(--ink) !important;
}
#jp-pilier-do-root .jp-nav-trigger,
#jp-pilier-do-root .jp-nav-link {
color: var(--ink) !important;
background: none !important;
}
#jp-pilier-do-root .jp-nav-trigger:hover,
#jp-pilier-do-root .jp-nav-link:hover,
#jp-pilier-do-root .jp-nav-item:hover .jp-nav-trigger,
#jp-pilier-do-root .jp-nav-item.open .jp-nav-trigger {
background: var(--terracotta-soft) !important;
color: var(--terracotta) !important;
}
/* H1 — couleur noire avec segment cyan souligné (V2 référence).
On force le soulignement via text-decoration natif car le `::after` SVG du
CSS de base est neutralisé par un autre CSS plus spécifique en prod. */
#jp-pilier-do-root .sf-h1 {
color: var(--ink) !important;
}
#jp-pilier-do-root .sf-h1-curl {
color: var(--terracotta) !important;
}
/* Bloc retiré 2026-05-14 : le précédent override forçait text-decoration:underline
(trait droit) ET masquait le ::after. V2 utilise UNIQUEMENT la vague SVG du
pseudo ::after (.sf-h1-curl::after) — on laisse ce comportement natif. */
/* Final CTA phone — couleur bleu marque (UX2 2026-05-20 : était --ink #0A1B33 sombre,
passé à --terracotta #00A3DD pour mettre en avant le numéro de téléphone). */
#jp-pilier-do-root .sf-final-phone {
color: var(--terracotta) !important;
border: 2px solid var(--terracotta) !important;
background: #fff !important;
}
#jp-pilier-do-root .sf-final-phone:hover {
background: var(--terracotta) !important;
color: #fff !important;
}
/* Footer refait à l'identique de la prod : fond gris foncé #424242, accents cyan. */
#jp-pilier-do-root .sf-footer { background: #424242 !important; color: #fff !important; border-top: 0 !important; padding: 60px 0 28px !important; }
#jp-pilier-do-root .sf-footer-top { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr !important; gap: 48px !important; align-items: start !important; }
#jp-pilier-do-root .sf-footer-brand-block { display: flex !important; flex-direction: column !important; gap: 16px !important; }
#jp-pilier-do-root .sf-footer-brand-logo { height: 38px !important; width: auto !important; filter: brightness(0) invert(1) !important; }
#jp-pilier-do-root .sf-footer-tagline { font-size: 13.5px !important; color: rgba(255,255,255,0.85) !important; line-height: 1.5 !important; max-width: 320px !important; margin: 0 !important; font-weight: 600 !important; }
#jp-pilier-do-root .sf-footer-social { display: flex !important; gap: 10px !important; margin-top: 6px !important; }
#jp-pilier-do-root .sf-footer-social a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(255,255,255,0.10) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.18) !important; transition: background .2s ease, color .2s ease, transform .2s ease !important; }
#jp-pilier-do-root .sf-footer-social a:hover { background: var(--terracotta) !important; color: #fff !important; border-color: var(--terracotta) !important; transform: translateY(-2px) !important; }
#jp-pilier-do-root .sf-footer-col h5,
#jp-pilier-do-root .sf-footer-col .sf-footer-col-title { font-size: 14px !important; letter-spacing: 0.04em !important; color: var(--terracotta) !important; font-weight: 700 !important; margin-bottom: 16px !important; text-transform: none !important; }
#jp-pilier-do-root .sf-footer-col ul li { margin-bottom: 10px !important; }
#jp-pilier-do-root .sf-footer-col ul li a { font-size: 14px !important; color: rgba(255,255,255,0.85) !important; transition: color .15s !important; }
#jp-pilier-do-root .sf-footer-col ul li a:hover { color: var(--terracotta) !important; }
#jp-pilier-do-root .sf-footer-bottom { padding-top: 22px !important; border-top: 1px solid rgba(255,255,255,0.10) !important; margin-top: 36px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; }
#jp-pilier-do-root .sf-footer-copyright { font-size: 12.5px !important; color: rgba(255,255,255,0.7) !important; font-weight: 600 !important; }
#jp-pilier-do-root .sf-footer-legal { display: flex !important; gap: 22px !important; flex-wrap: wrap !important; }
#jp-pilier-do-root .sf-footer-legal a { font-size: 12.5px !important; color: var(--terracotta) !important; transition: color .15s !important; font-weight: 500 !important; }
#jp-pilier-do-root .sf-footer-legal a:hover { color: #fff !important; }
/* Responsive footer */
@media (max-width: 900px) {
#jp-pilier-do-root .sf-footer-top { grid-template-columns: 1fr !important; gap: 32px !important; }
}
/* Fix poster vidéo : le thème JobPhoning applique [type="button"]{width:auto} (même spécificité que .sf-video-play{width:68px}). En contexte button avec width:auto, le SVG enfant calcule width:100% à 0px et le bouton play YouTube devient invisible. On force width/height sur le bouton ET le SVG via #jp-pilier-do-root pour garantir une spécificité supérieure et un rendu cohérent V2/V3. */
#jp-pilier-do-root .sf-video-play { width: 68px !important; height: 48px !important; padding: 0 !important; }
#jp-pilier-do-root .sf-video-play svg { display: block !important; width: 68px !important; height: 48px !important; }
/* ============================================================
OVERRIDE GLOBAL THÈME ELEMENTOR (audit V2 vs V3 du 2026-05-14)
Le thème JobPhoning (.elementor-kit-11156) inject une feuille
autoptimize_single_*.css qui impose :
- body : font-family DM Sans, color #000, line-height 28px
- h1..h6 : font-weight 500
- .elementor-kit-11156 h1 : font-size 2.5rem (spécif 0,1,1 — bat .sf-h1)
Ces règles écrasent les valeurs du plugin et cassent l'identité visuelle
V2 (qui utilise Plus Jakarta Sans pour le corps de texte, et DM Sans
uniquement pour les titres + CTAs, avec des weights 600/700/800).
On NE peut PAS dequeuer la feuille Elementor (le reste du site l'utilise).
On force donc les bonnes valeurs sur l'arbre #jp-pilier-do-root, où la
spécificité (1,1,0) bat le sélecteur thème (0,1,1).
============================================================ */
/* 1. Famille de fonts + couleur par défaut du sous-arbre pilier */
#jp-pilier-do-root,
#jp-pilier-do-root p,
#jp-pilier-do-root li,
#jp-pilier-do-root a,
#jp-pilier-do-root span,
#jp-pilier-do-root summary,
#jp-pilier-do-root details {
font-family: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif !important;
color: #0a1b33;
}
/* 2. Les TITRES gardent DM Sans (police d'affichage spécifique) */
#jp-pilier-do-root h1,
#jp-pilier-do-root h2,
#jp-pilier-do-root h3,
#jp-pilier-do-root h4,
#jp-pilier-do-root .sf-h1,
#jp-pilier-do-root .sf-h1 .sf-h1-curl,
#jp-pilier-do-root .sf-cta-bar a {
font-family: "DM Sans", sans-serif !important;
}
/* 3. H1 hero — restaure taille/weight/line-height V2 (51.2px/800/1.08) */
#jp-pilier-do-root .sf-h1,
#jp-pilier-do-root .sf-h1 .sf-h1-curl {
font-size: 3.2rem !important;
font-weight: 800 !important;
line-height: 1.08 !important;
}
#jp-pilier-do-root .sf-h1 {
margin: 0 0 28px !important;
}
/* 3-bis. TROU RESPONSIVE 768–1199 px (audit 13 §B) — le H1 est figé à 3.2rem (51,2 px) par
la règle ci-dessus, ce qui ANNULE le clamp fluide natif de .sf-h1 (l.298-304). Or entre
981 px et ~1150 px le héros est encore en 2 colonnes mais la colonne gauche rétrécit
(~485–560 px) → le titre casse sur 4–5 lignes et colle la vidéo. On réintroduit une taille
fluide sur CETTE plage uniquement (rien ne change ≥ 1200 px ni < 768 px, déjà gérés).
Le .sf-h1-curl est inclus sinon le segment souligné garde 51,2 px et la vague se désaligne.
Spécificité : reprend #jp-pilier-do-root .sf-h1 (1,1,0) + !important pour battre l.1343-1349 (R6). */
@media (min-width: 768px) and (max-width: 1199px) {
#jp-pilier-do-root .sf-h1,
#jp-pilier-do-root .sf-h1 .sf-h1-curl {
font-size: clamp(2.1rem, 3.6vw, 3.2rem) !important;
line-height: 1.12 !important;
}
}
/* 4. Stats title — taille V2 (22px) et weight 700 (et pas 28/500) */
#jp-pilier-do-root .sf-stats h2 {
font-size: 1.375rem !important;
font-weight: 700 !important;
margin: 0 0 26px !important;
}
/* 5. CTAs hero — line-height + font-weight V2 (primary 700, outline 600) */
#jp-pilier-do-root .sf-cta-bar a {
line-height: 1.65 !important;
}
#jp-pilier-do-root .sf-cta-bar a:nth-of-type(1) {
font-weight: 700 !important;
}
#jp-pilier-do-root .sf-cta-bar a:nth-of-type(n+2) {
font-weight: 600 !important;
}
/* 6. Subtitle / lede — restaure les marges V2 (sinon collés au paragraphe suivant) */
#jp-pilier-do-root .sf-subtitle { margin: 0 0 8px !important; }
#jp-pilier-do-root .sf-lede { margin: 0 0 14px !important; }
/* 7. Footer brand — texte blanc (le thème met du bleu lien par défaut) */
#jp-pilier-do-root .sf-footer-brand,
#jp-pilier-do-root .sf-footer-brand * { color: #fff !important; }
/* 8. Trust card — couleur bleu marine (le thème met du bleu lien) */
#jp-pilier-do-root .sf-trust-card { color: #0a1b33 !important; }
/* 9. Final H2 — restaure margin V2 (sans margin-top parasite) */
#jp-pilier-do-root .sf-final h2 { margin: 0 0 14px !important; }
/* 10. Line-height sur paragraphes/links — annule le 28px parasite du thème */
#jp-pilier-do-root .sf-header,
#jp-pilier-do-root .sf-trust-label,
#jp-pilier-do-root .sf-footer-wrap,
#jp-pilier-do-root .sf-footer-bottom,
#jp-pilier-do-root .sf-footer a,
#jp-pilier-do-root details summary { line-height: 1.65 !important; }
/* 11. Restaure Caveat sur les accents manuscrits écrasés par notre override "span" */
#jp-pilier-do-root .sf-final-hand,
#jp-pilier-do-root .sf-trust-label strong,
#jp-pilier-do-root .sf-howto-title,
#jp-pilier-do-root .sf-eyebrow {
font-family: Caveat, cursive !important;
}
#jp-pilier-do-root .sf-final-hand { color: rgb(0, 163, 221) !important; }
/* UX2 2026-05-20 — Mot manuscrit "sur-mesure" du CTA final grossi (~1.6em vs 1.2em
d'origine ligne 791) pour en faire un vrai accent éditorial qui saute aux yeux.
Mobile + desktop. Léger ajustement line-height pour compenser le saut vertical. */
#jp-pilier-do-root .sf-final-hand {
font-size: 1.6em !important;
line-height: 0.95 !important;
}
/* 12. Restaure la couleur muted V2 sur les bullets hero (notre override avait forcé bleu marine) */
#jp-pilier-do-root .sf-bullets li { color: rgb(61, 72, 86) !important; }
/* ============================================================
AUDIT V2 vs V3 — corrections complémentaires (2026-05-14 bis)
- Images H2 trop petites : .jp-figure-float-left avait width:40%/max-width:360px
(V2 fait ~480px car attributs HTML width="1536"/height="1024" + max-width:100%).
- Sommaire sticky qui saute : conséquence du layout shift causé par les images
lazy-load sans dimensions HTML réservées.
- Howto title sur 2 lignes au lieu d'1 (Caveat rendue un peu plus large sur V3).
- line-height parasite 28px du thème sur .sf-howto/.sf-toc/.sf-final/.sf-body-wrap.
- Figcaption plus tassée et police plus petite que V2.
============================================================ */
/* 13. Images H2 — aligner sur V2 (~480px) ET réserver l'espace via aspect-ratio
pour empêcher le layout shift quand l'image lazy-load se charge (cause du saut
du sommaire sticky). Les images du contenu pilier sont en ratio 3:2 (1536×1024). */
#jp-pilier-do-root .sf-body .jp-figure-float-left,
#jp-pilier-do-root .sf-content .jp-figure-float-left {
float: left !important;
margin: 6px 32px 18px 0 !important;
max-width: 540px !important;
width: 58% !important;
}
#jp-pilier-do-root .sf-body .jp-figure-float-left img,
#jp-pilier-do-root .sf-content .jp-figure-float-left img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 2 !important;
border-radius: 14px !important;
}
/* 14. Howto title — bloc retiré (la cause du wrap 2 lignes était le fallback cursive
système car Caveat ne chargeait pas — URL relative dans CSS inline. URLs corrigées
en absolues, Caveat charge maintenant et le titre tient en 1 ligne naturellement). */
/* 15. Line-height parasite 28px du thème sur les wrappers de section.
Complément du bloc 10 qui ne ciblait que .sf-header/.sf-trust-label/.sf-footer-*. */
#jp-pilier-do-root .sf-howto,
#jp-pilier-do-root .sf-toc,
#jp-pilier-do-root .sf-final,
#jp-pilier-do-root .sf-final-inner,
#jp-pilier-do-root .sf-body-wrap,
#jp-pilier-do-root .sf-pipeline-grid,
#jp-pilier-do-root .sf-stats { line-height: 1.65 !important; }
/* ============================================================
RESPONSIVE V3 — B1 fondations CSS + fix TOC actif
Source : CAHIER-DES-CHARGES-RESPONSIVE-V3.md V1.2 §6.17, §6.9, §6.21
Date : 2026-05-15
============================================================ */
/* B1.1 — TOC masquée <1100 (cf. §6.17). La règle ligne 529 force déjà
`.sf-body-wrap{grid-template-columns:minmax(0,1fr)}` MQ ≤1099 (anti
piège min-content). On ajoute ici la masque TOC et on force `display:none`
pour battre `position: sticky` ligne 1026 sans avoir à le retirer. */
@media (max-width: 1099px) {
#jp-pilier-do-root .sf-toc { display: none !important; }
#jp-pilier-do-root .sf-body-wrap {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
}
/* B1.2 — text-align:justify CONSERVÉ en mobile (décision Thomas 2026-05-20 UX2).
⚠ Inversion de la décision du CdC V1.2 §6.21 : Thomas assume le risque cosmétique
des espaces inter-mots étroits, il veut le justify partout (mobile + desktop).
On garde uniquement les line-height mobile + hyphens:auto pour adoucir le rendu. */
@media (max-width: 979px) {
#jp-pilier-do-root .sf-lede {
line-height: 1.55 !important;
hyphens: auto;
overflow-wrap: break-word;
}
#jp-pilier-do-root .sf-section p {
line-height: 1.65 !important;
margin-bottom: 12px !important;
hyphens: auto;
overflow-wrap: break-word;
}
}
/* ============================================================
RESPONSIVE V3 — B2 modules débordants (tables, trust, H1, CTA)
Source : CdC V1.2 §6.7, §6.11, §6.14, §6.24, §16.6
Date : 2026-05-15
============================================================ */
/* B2.1 — Tables Stratégie A (cf. §6.24, Q1 validée).
Wrapper scroll horizontal mobile/tablette + indicateur visuel "← faites défiler →".
PIÈGE évité : ne PAS appliquer overflow-x:hidden sur .sf-section sinon le scroll
horizontal interne du tableau serait inopérant (cf. R-T8). */
@media (max-width: 979px) {
#jp-pilier-do-root .sf-section table {
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
max-width: 100% !important;
width: 100% !important;
}
#jp-pilier-do-root .sf-section table::after {
content: "← faites défiler →";
display: block;
font-size: 11px;
color: var(--mute);
text-align: center;
padding: 6px 0 0;
font-style: italic;
opacity: .8;
}
}
/* B2.2 — Trust strip 3 paliers (cf. §6.14, surcharge override !important ligne 1008).
1 col ≤639, 2 cols 640-979, 3 cols ≥980 conservé par défaut (override ligne 1008). */
@media (max-width: 639px) {
#jp-pilier-do-root .sf-trust-cards {
grid-template-columns: 1fr !important;
grid-auto-rows: auto !important;
gap: 10px !important;
}
#jp-pilier-do-root .sf-trust-card {
min-height: 88px !important;
}
#jp-pilier-do-root .sf-trust-inner {
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 16px !important;
text-align: center;
}
#jp-pilier-do-root .sf-trust-inner::before {
display: none !important;
}
}
@media (min-width: 640px) and (max-width: 979px) {
#jp-pilier-do-root .sf-trust-cards {
grid-template-columns: 1fr 1fr !important;
grid-auto-rows: auto !important;
gap: 12px !important;
}
#jp-pilier-do-root .sf-trust-card {
min-height: 88px !important;
}
}
/* B2.3 — H1 hero : transformer l'override !important lignes 1293-1299 en clamp fluide.
⚠ CdC §6.7 : modifier l'override (pas la règle de base ligne 277) sinon le H1 ne change PAS.
Comme le bloc B2 est APRÈS le bloc 3 (lignes 1293-1299) dans la cascade, notre règle gagne.
Cibles §7.2 : 28px à ≤479, 30px à 480-639, 36px à 640-979, 51.2px (3.2rem) à ≥1100.
Calage en 3 MQ ciblées plutôt qu'un seul clamp pour respecter exactement le tableau §7.2. */
@media (max-width: 479px) {
#jp-pilier-do-root .sf-h1,
#jp-pilier-do-root .sf-h1 .sf-h1-curl {
font-size: 1.75rem !important; /* 28px */
font-weight: 800 !important;
line-height: 1.18 !important;
letter-spacing: -0.025em !important;
}
}
@media (min-width: 480px) and (max-width: 639px) {
#jp-pilier-do-root .sf-h1,
#jp-pilier-do-root .sf-h1 .sf-h1-curl {
font-size: 1.875rem !important; /* 30px */
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -0.025em !important;
}
}
@media (min-width: 640px) and (max-width: 767px) {
#jp-pilier-do-root .sf-h1,
#jp-pilier-do-root .sf-h1 .sf-h1-curl {
font-size: 2rem !important; /* 32px */
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -0.025em !important;
}
}
@media (min-width: 768px) and (max-width: 979px) {
#jp-pilier-do-root .sf-h1,
#jp-pilier-do-root .sf-h1 .sf-h1-curl {
font-size: 2.25rem !important; /* 36px */
font-weight: 800 !important;
line-height: 1.15 !important;
letter-spacing: -0.025em !important;
}
}
@media (max-width: 979px) {
#jp-pilier-do-root .sf-h1 {
margin: 0 0 22px !important;
max-width: 100% !important;
}
}
/* B2.4 — CTA bar hero : boutons à max-width centré mobile (UX Thomas 2026-05-20 UX2).
Changement vs version initiale du chantier B (width:100% touchait les bords) :
désormais largeur intrinsèque plafonnée par max-width, centrée dans le container.
Boutons aérés, padding horizontal généreux, min-height ≥48 px (WCAG zone tactile).
UX2 part 2 (Modif 6) : forcer display:flex + text-align:center + masquer la flèche
décorative ::after en mobile (sinon le bloc {texte + flèche} centré décale
visuellement le texte à gauche du centre du bouton). Texte parfaitement centré. */
@media (max-width: 639px) {
#jp-pilier-do-root .sf-cta-bar {
flex-direction: column !important;
gap: 12px !important;
align-items: center !important;
margin: 22px 0 !important;
}
#jp-pilier-do-root .sf-btn-primary,
#jp-pilier-do-root .sf-btn-ghost {
width: auto !important;
max-width: 320px !important;
min-width: 240px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 14px 28px !important;
min-height: 48px !important;
box-sizing: border-box !important;
}
#jp-pilier-do-root .sf-btn-primary::after,
#jp-pilier-do-root .sf-final-primary::after {
display: none !important;
}
}
@media (max-width: 479px) {
#jp-pilier-do-root .sf-btn-primary,
#jp-pilier-do-root .sf-btn-ghost {
padding: 14px 24px !important;
min-width: 220px !important;
}
}
/* ============================================================
RESPONSIVE V3 — B3 drawer mobile (hamburger + slide-in droite)
Source : CdC V1.2 §6.5, §9.1, §9.2, §9.3, §9.4, §9.5, §10.3
Date : 2026-05-15
============================================================ */
/* B3.1 — Hamburger : bouton 44×44 visible <980, caché ≥980. */
#jp-pilier-do-root .jp-burger {
display: none;
width: 44px;
height: 44px;
border-radius: 10px;
align-items: center;
justify-content: center;
color: var(--ink);
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
margin-left: 8px;
transition: background .2s ease, color .2s ease;
}
#jp-pilier-do-root .jp-burger:hover,
#jp-pilier-do-root .jp-burger:focus-visible {
background: var(--terracotta-soft);
color: var(--terracotta);
}
#jp-pilier-do-root .jp-burger:active { transform: scale(.95); }
#jp-pilier-do-root .jp-burger svg { display: block; }
@media (max-width: 979px) {
#jp-pilier-do-root .jp-burger { display: inline-flex !important; }
/* Header mobile : flex au lieu de grid auto-auto pour accueillir hamburger à droite */
#jp-pilier-do-root .jp-header-main-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 10px 14px !important;
}
/* Annule les margin-left/right horizontaux desktop sur logo et phone-pill */
#jp-pilier-do-root .jp-brand { margin-left: 0 !important; }
#jp-pilier-do-root .jp-phone-pill { margin-right: 0 !important; }
/* Brand logo plus compact */
#jp-pilier-do-root .jp-brand-logo { height: 36px !important; }
}
@media (max-width: 479px) {
#jp-pilier-do-root .jp-header-main-inner { padding: 8px 12px !important; }
#jp-pilier-do-root .jp-brand-logo { height: 32px !important; }
}
/* B3.2 — Phone pill mobile : icône seule sur BP4-BP5-BP6 (cf. §6.5 — tablette portrait
et mobile = icône uniquement, zone tactile 44×44).
La règle ligne 242 ne masquait .jp-phone-num qu'à <640 → on étend à <980.
`flex-shrink:0` indispensable car le header passe en flex à <980 (B3.1) et le pill
se réduit sinon à 28-39px sur petits écrans (test iframe 320/390 confirmé). */
@media (max-width: 979px) {
#jp-pilier-do-root .jp-phone-pill .jp-phone-num { display: none !important; }
#jp-pilier-do-root .jp-phone-pill {
padding: 0 !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
flex-shrink: 0 !important;
border-radius: 50% !important;
justify-content: center !important;
box-shadow: 0 4px 10px -2px rgba(0,163,221,.40) !important;
}
/* Brand & burger ne shrink pas non plus pour conserver les zones tactiles */
#jp-pilier-do-root .jp-brand { flex-shrink: 0 !important; }
#jp-pilier-do-root .jp-burger { flex-shrink: 0 !important; }
}
/* B3.3 — Overlay sombre derrière le drawer. */
#jp-pilier-do-root + .jp-drawer-overlay,
.jp-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(10, 27, 51, .55);
z-index: 100;
opacity: 0;
transition: opacity .25s ease;
-webkit-tap-highlight-color: transparent;
}
.jp-drawer-overlay.is-open { opacity: 1; }
.jp-drawer-overlay[hidden] { display: none !important; }
/* B3.4 — Drawer : slide-in droite, max 340px / 86vw. */
.jp-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(360px, 92vw);
background: #fff;
z-index: 101;
transform: translateX(100%);
transition: transform .28s cubic-bezier(.2, .8, .2, 1);
display: flex;
flex-direction: column;
box-shadow: -16px 0 32px -8px rgba(10, 27, 51, .20);
overflow-y: auto;
overflow-x: hidden;
font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
}
.jp-drawer.is-open { transform: translateX(0); }
.jp-drawer[hidden] { display: none !important; }
.jp-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--module-border);
position: sticky;
top: 0;
background: #fff;
z-index: 1;
flex-shrink: 0;
}
.jp-drawer-brand img {
height: 32px;
width: auto;
display: block;
}
.jp-drawer-close {
width: 44px;
height: 44px;
border-radius: 10px;
display: grid;
place-items: center;
color: var(--ink);
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
transition: background .15s ease;
}
.jp-drawer-close:hover,
.jp-drawer-close:focus-visible { background: var(--cream-2); }
.jp-drawer-nav {
padding: 14px 12px 8px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ============================================================
DRAWER MENU V3 — refonte accordéon 2026-05-20 (DRAWER-V2 — bis)
Hiérarchie à 2 niveaux (alignée sur le mega-menu desktop) :
- Niveau 1 : .jp-drawer-row "Nos services" + "Ressources" + "Connexion"
(style identique entre les 3 — libellé 16px 700 ink + chevron)
- Niveau 2 (à l'intérieur de Nos services) : 3 .jp-drawer-acc
(Entreprises blue / Freelances yellow / Outils cyan, style UPPERCASE coloré)
* .jp-drawer-acc-summary : titre style mega-menu desktop
* .jp-drawer-acc-body : contenu déplié (item + action OU sous-texte + liste outils)
Polices et couleurs des sous-accordéons reproduites fidèlement du mega-menu desktop
(.jp-mega-block-label, .jp-mega-item, .jp-mega-btn) pour cohérence cross-device.
Tous les libellés sont nowrap + ellipsis pour respecter la règle « 1 ligne max ».
============================================================ */
/* Conteneur des 3 sous-accordéons quand "Nos services" est déplié */
.jp-drawer-services {
padding: 6px 0 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Accordéon = container */
.jp-drawer-acc {
--tone-accent: var(--terracotta);
background: #fff;
border: 1px solid var(--module-border);
border-radius: 12px;
overflow: hidden;
}
.jp-drawer-acc[data-tone="blue"] { --tone-accent: #00A4DD; }
.jp-drawer-acc[data-tone="yellow"] { --tone-accent: #FFD200; }
.jp-drawer-acc[data-tone="cyan"] { --tone-accent: #00A4DD; }
.jp-drawer-acc-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 14px;
min-height: 54px;
}
.jp-drawer-acc-summary::-webkit-details-marker { display: none; }
.jp-drawer-acc-summary:hover,
.jp-drawer-acc-summary:focus-visible {
background: rgba(0, 163, 221, .05);
}
.jp-drawer-acc[data-tone="yellow"] .jp-drawer-acc-summary:hover,
.jp-drawer-acc[data-tone="yellow"] .jp-drawer-acc-summary:focus-visible {
background: rgba(255, 210, 0, .08);
}
/* Titre accordéon — reproduit .jp-mega-block-label desktop :
uppercase, font-weight 800, letter-spacing 0.04em, couleur de marque */
.jp-drawer-acc-title {
flex: 1;
min-width: 0;
font-size: 17px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tone-accent);
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jp-drawer-acc-chevron {
flex-shrink: 0;
color: var(--tone-accent);
transition: transform .25s ease;
}
.jp-drawer-acc[open] > .jp-drawer-acc-summary > .jp-drawer-acc-chevron {
transform: rotate(180deg);
}
/* Corps de l'accordéon — paddings serrés pour maximiser l'espace texte (1-ligne) */
.jp-drawer-acc-body {
padding: 2px 8px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* ITEM — reproduit .jp-mega-item desktop avec compaction mobile :
icône 40x40 + texte (strong 13.5px 700 #000 + small 11.5px italic #7F7F7F) */
.jp-drawer-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 4px;
border-radius: 10px;
color: var(--ink);
text-decoration: none;
min-width: 0;
transition: background .18s ease;
}
.jp-drawer-item:hover,
.jp-drawer-item:focus-visible {
background: rgba(0, 163, 221, .07);
}
.jp-drawer-acc[data-tone="yellow"] .jp-drawer-item:hover,
.jp-drawer-acc[data-tone="yellow"] .jp-drawer-item:focus-visible {
background: rgba(255, 210, 0, .10);
}
.jp-drawer-item-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: grid;
place-items: center;
}
.jp-drawer-item-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.jp-drawer-item-text {
flex: 1;
min-width: 0;
display: block;
}
.jp-drawer-item-label {
display: block;
font-size: 13.5px;
font-weight: 700;
color: #000;
letter-spacing: -0.01em;
line-height: 1.25;
margin: 0 0 2px;
font-style: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jp-drawer-item-sub {
display: block;
font-size: 11.5px;
font-weight: 500;
font-style: italic;
color: #7F7F7F;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ACTION (bouton "Rechercher / Trouver") — reproduit .jp-mega-btn desktop :
bordure 1.5px colorée, fond blanc, texte ink 15px 500, image gauche, hover translateY */
.jp-drawer-action {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 10px;
background: #fff;
border: 1.5px solid var(--tone-accent);
border-radius: 12px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
min-height: 60px;
min-width: 0;
transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.jp-drawer-action:hover,
.jp-drawer-action:focus-visible {
background: rgba(0, 163, 221, .08);
transform: translateY(-1px);
box-shadow: 0 6px 14px -4px rgba(0, 163, 221, .25);
}
.jp-drawer-acc[data-tone="yellow"] .jp-drawer-action:hover,
.jp-drawer-acc[data-tone="yellow"] .jp-drawer-action:focus-visible {
background: rgba(255, 210, 0, .12);
box-shadow: 0 6px 14px -4px rgba(255, 210, 0, .30);
}
.jp-drawer-action-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: grid;
place-items: center;
}
.jp-drawer-action-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.jp-drawer-action-label {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 500;
color: var(--ink);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* OUTILS — sous-texte + 3 items dans l'accordéon cyan */
.jp-drawer-tools-sub {
margin: 0 6px 4px;
font-size: 12.5px;
font-weight: 500;
font-style: italic;
color: var(--mute);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jp-drawer-tools-list {
list-style: none;
margin: 0;
padding: 0;
}
.jp-drawer-tools-list li + li {
border-top: 1px solid rgba(0, 163, 221, .12);
}
.jp-drawer-tools-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 4px;
border-radius: 8px;
color: var(--ink);
text-decoration: none;
min-width: 0;
transition: background .18s ease;
}
.jp-drawer-tools-item:hover,
.jp-drawer-tools-item:focus-visible {
background: rgba(0, 163, 221, .07);
}
.jp-drawer-tools-item-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: grid;
place-items: center;
}
.jp-drawer-tools-item-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.jp-drawer-tools-item-text {
flex: 1;
min-width: 0;
display: block;
}
.jp-drawer-tools-item-label {
display: block;
font-size: 13.5px;
font-weight: 700;
color: #000;
letter-spacing: -0.01em;
line-height: 1.25;
margin: 0 0 2px;
font-style: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.jp-drawer-tools-item-sub {
display: block;
font-size: 11.5px;
font-weight: 500;
font-style: italic;
color: #7F7F7F;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Override anti-thème — forcer les couleurs cibles malgré la règle anti-thème
ligne ~1296 (#jp-pilier-do-root span/a { color: #0a1b33 }).
Specificity (1,2,0) + !important > anti-thème (1,1,0). */
#jp-pilier-do-root .jp-drawer-acc-title {
color: var(--tone-accent) !important;
}
#jp-pilier-do-root .jp-drawer-acc-chevron {
color: var(--tone-accent) !important;
}
#jp-pilier-do-root .jp-drawer-item-label,
#jp-pilier-do-root .jp-drawer-tools-item-label {
color: #000 !important;
font-style: normal !important;
}
#jp-pilier-do-root .jp-drawer-item-sub,
#jp-pilier-do-root .jp-drawer-tools-item-sub {
color: #7F7F7F !important;
}
#jp-pilier-do-root .jp-drawer-action,
#jp-pilier-do-root .jp-drawer-action span {
color: var(--ink) !important;
}
#jp-pilier-do-root .jp-drawer-tools-sub {
color: var(--mute) !important;
}
/* Rangées utilitaires sous les cartes : Ressources (accordéon), Connexion (lien).
Pas de margin négatif (causait un débordement horizontal sur iOS Safari).
Le label démarre à 4px du bord interne de la nav → aligné avec le bord externe
des cartes thématiques au-dessus. */
.jp-drawer-row {
display: block;
border-top: 1px solid var(--module-border);
}
.jp-drawer-row-collapse > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 4px;
min-height: 56px;
font-size: 16px;
font-weight: 700;
color: var(--ink);
}
.jp-drawer-row-collapse > summary::-webkit-details-marker { display: none; }
.jp-drawer-row-collapse > summary:hover,
.jp-drawer-row-collapse > summary:focus-visible {
color: var(--terracotta);
}
.jp-drawer-row-link {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 4px;
min-height: 56px;
font-size: 16px;
font-weight: 700;
color: var(--ink);
text-decoration: none;
transition: color .15s ease;
}
.jp-drawer-row-link:hover,
.jp-drawer-row-link:focus-visible {
color: var(--terracotta);
}
.jp-drawer-row-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: grid;
place-items: center;
color: var(--terracotta);
}
.jp-drawer-row-icon img {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
}
.jp-drawer-row-label {
flex: 1;
min-width: 0;
}
.jp-drawer-row-chevron {
flex-shrink: 0;
color: var(--mute);
transition: transform .2s ease;
}
.jp-drawer-row-collapse[open] > summary .jp-drawer-row-chevron {
transform: rotate(180deg);
}
/* Blog / Par métier — listes de sublinks dans les sous-accordéons cyan
de Ressources (cf. .jp-drawer-services + .jp-drawer-acc[data-tone="cyan"]). */
.jp-drawer-row-sublist {
list-style: none;
margin: 0;
padding: 0;
}
.jp-drawer-sublink {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 8px;
min-height: 44px;
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
border-radius: 8px;
line-height: 1.25;
transition: background .15s ease, color .15s ease;
}
.jp-drawer-sublink:hover,
.jp-drawer-sublink:focus-visible {
background: var(--terracotta-soft);
color: var(--terracotta);
}
.jp-drawer-sublink-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: grid;
place-items: center;
}
.jp-drawer-sublink-icon img {
width: 24px;
height: 24px;
object-fit: contain;
display: block;
}
.jp-drawer-sublink-label {
flex: 1;
min-width: 0;
}
/* Pied de drawer : CTA téléphone pleine largeur + sous-texte (visuel V3). */
.jp-drawer-foot {
padding: 16px 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--module-border);
background: #fff;
flex-shrink: 0;
}
.jp-drawer-phone {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 20px;
background: var(--terracotta);
color: #fff;
border-radius: 12px;
font-weight: 700;
font-size: 17px;
min-height: 52px;
text-decoration: none;
box-shadow: 0 8px 16px -4px rgba(0, 163, 221, .40);
transition: background .15s ease, box-shadow .15s ease;
}
.jp-drawer-phone:hover,
.jp-drawer-phone:focus-visible {
background: var(--terracotta-2);
box-shadow: 0 10px 20px -4px rgba(0, 163, 221, .50);
color: #fff;
}
/* UX2 part 2 (Modif 7) — Forcer le numéro téléphone du drawer en BLANC.
Sans cet override, l'anti-thème ligne 1296-1305 (#jp-pilier-do-root a/span = ink)
force le texte en bleu marine sombre alors que le fond est cyan. */
#jp-pilier-do-root .jp-drawer-phone,
#jp-pilier-do-root .jp-drawer-phone span,
#jp-pilier-do-root .jp-drawer-phone svg {
color: #fff !important;
}
/* UX2 part 2 (Modif 8) — Bouton secondaire "Prendre rendez-vous" sous le téléphone.
Style ghost cyan : fond blanc, bordure cyan 2px, texte cyan, icône calendrier.
Hover : fond cyan, texte blanc (inversion). Distinct visuellement du bouton
téléphone plein cyan, pour clarifier 2 canaux : appeler vs réserver en ligne. */
.jp-drawer-rdv {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 20px;
background: #fff;
color: var(--terracotta);
border: 2px solid var(--terracotta);
border-radius: 12px;
font-weight: 700;
font-size: 16px;
text-decoration: none;
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
margin-top: 4px;
}
.jp-drawer-rdv:hover,
.jp-drawer-rdv:focus-visible {
background: var(--terracotta);
color: #fff;
box-shadow: 0 10px 20px -4px rgba(0, 163, 221, .50);
}
#jp-pilier-do-root .jp-drawer-rdv,
#jp-pilier-do-root .jp-drawer-rdv span,
#jp-pilier-do-root .jp-drawer-rdv svg {
color: var(--terracotta) !important;
}
#jp-pilier-do-root .jp-drawer-rdv:hover,
#jp-pilier-do-root .jp-drawer-rdv:focus-visible,
#jp-pilier-do-root .jp-drawer-rdv:hover span,
#jp-pilier-do-root .jp-drawer-rdv:focus-visible span,
#jp-pilier-do-root .jp-drawer-rdv:hover svg,
#jp-pilier-do-root .jp-drawer-rdv:focus-visible svg {
color: #fff !important;
}
.jp-drawer-foot-note {
text-align: center;
font-size: 13px;
font-weight: 500;
color: var(--mute);
margin: 4px 0 0;
}
/* B3.5 — Lock du scroll body pendant l'ouverture (cf. §9 + §10.4). */
body.jp-drawer-open { overflow: hidden !important; }
/* B3.6 — Cache le drawer ≥980 (sécurité cas où l'utilisateur agrandit la fenêtre
pendant que le drawer est ouvert). */
@media (min-width: 980px) {
#jp-pilier-do-root .jp-burger { display: none !important; }
.jp-drawer,
.jp-drawer-overlay { display: none !important; }
}
/* ============================================================
RESPONSIVE V3 — B4 finitions structurelles
Source : CdC V1.2 §6.1 (top banner), §6.15 (stats), §6.16 (pipeline),
§6.27 (footer 4 paliers), §7.2 (typo globale)
Date : 2026-05-15
============================================================ */
/* B4.1 — Top banner : compact 640-979, masquée ≤639 (cf. §6.1, Q2 validée).
Gain ~40 px vertical sur iPhone (hero visible plus tôt). Le CTA "Réserver une démo"
reste accessible via le drawer mobile (footer drawer). */
@media (max-width: 979px) and (min-width: 640px) {
#jp-pilier-do-root .jp-header-top-inner {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
padding: 6px 12px !important;
}
#jp-pilier-do-root .jp-header-top-text { font-size: 12px !important; }
#jp-pilier-do-root .jp-header-top-cta {
width: 100% !important;
text-align: center !important;
box-sizing: border-box !important;
}
}
@media (max-width: 639px) {
#jp-pilier-do-root .jp-header-top { display: none !important; }
}
/* B4.2 — Pipeline : palier BP6 ≤479 → 1 col (cf. §6.16).
BP4 (≤979) = 3 cols et BP5 (≤639) = 2 cols sont déjà gérés lignes 957-967 du CSS. */
@media (max-width: 479px) {
#jp-pilier-do-root .sf-pipeline-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
#jp-pilier-do-root .sf-pipeline-num {
font-size: 28px !important;
padding: 8px 0 10px !important;
}
#jp-pilier-do-root .sf-pipeline-icon {
width: 48px !important;
height: 48px !important;
}
#jp-pilier-do-root .sf-pipeline-step strong { font-size: 13px !important; }
#jp-pilier-do-root .sf-pipeline-inner { padding: 24px 16px 20px !important; }
}
/* B4.3 — Stats : palier BP6 ≤479 (cf. §6.15, §7.2). */
@media (max-width: 479px) {
#jp-pilier-do-root .sf-stat-num { font-size: 36px !important; }
#jp-pilier-do-root .sf-stat-label { font-size: 13px !important; }
#jp-pilier-do-root .sf-stats-inner { padding: 20px 16px !important; }
#jp-pilier-do-root .sf-stats-title { font-size: 18px !important; margin-bottom: 18px !important; }
}
/* B4.4 — Footer responsive (cf. §6.27, Q5 validée).
⚠ ÉCART markup vs CdC : le CdC §6.27 décrit "1 / 2 / 4 / 5 cols (brand + 4 groupes)"
mais le markup actuel `templates/partials/footer.php` n'a QUE 3 colonnes
(brand-block + 2 sf-footer-col Services/Blog). Je m'aligne sur le markup réel
1 / 2 / 3 / 3 cols. L'extension à 4 groupes de liens (selon CdC) serait une
modification de structure markup → demande Thomas séparée si voulue. */
@media (min-width: 1100px) {
#jp-pilier-do-root .sf-footer-top {
grid-template-columns: 1.4fr 1fr 1fr !important;
gap: 48px !important;
}
}
@media (max-width: 1099px) and (min-width: 980px) {
/* BP3 (980-1099) : laptop 13" — 3 cols, gap réduit */
#jp-pilier-do-root .sf-footer-top {
grid-template-columns: 1.2fr 1fr 1fr !important;
gap: 32px !important;
}
}
@media (max-width: 979px) and (min-width: 640px) {
/* BP4 (640-979) : tablette portrait — brand pleine largeur, puis 2 cols sous */
#jp-pilier-do-root .sf-footer-top {
grid-template-columns: 1fr 1fr !important;
gap: 28px 24px !important;
}
#jp-pilier-do-root .sf-footer-brand-block { grid-column: 1 / -1 !important; }
}
@media (max-width: 639px) {
/* BP5+BP6 (≤639) : mobile — 1 col, brand centré */
#jp-pilier-do-root .sf-footer-top {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
#jp-pilier-do-root .sf-footer-brand,
#jp-pilier-do-root .sf-footer-brand-block { text-align: center !important; align-items: center !important; }
#jp-pilier-do-root .sf-footer-tagline { margin-left: auto !important; margin-right: auto !important; }
#jp-pilier-do-root .sf-footer-social { justify-content: center !important; }
#jp-pilier-do-root .sf-footer-bottom {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 10px !important;
}
#jp-pilier-do-root .sf-footer-legal { justify-content: center !important; flex-wrap: wrap !important; }
}
/* B4.5 — Typographie globale appliquée par BP (cf. tableau §7.2).
Regroupé par BP pour lisibilité, après les règles structurelles ci-dessus. */
/* DRAWER-V2 — Retrait du bouton téléphone "pill" en mobile (≤979 px).
Le numéro est déjà accessible via le bouton CTA téléphone du drawer foot —
pas besoin d'un bouton rond cyan en plus à côté du logo / burger. */
@media (max-width: 979px) {
#jp-pilier-do-root .jp-phone-pill { display: none !important; }
}
/* BP4 (640-979) : tablette portrait */
@media (max-width: 979px) and (min-width: 640px) {
#jp-pilier-do-root .sf-section > h2 { font-size: 30px !important; gap: 16px !important; }
#jp-pilier-do-root .sf-section > h2::before { font-size: 56px !important; }
#jp-pilier-do-root .sf-section h3 { font-size: 19px !important; }
#jp-pilier-do-root .sf-subtitle { font-size: 18px !important; }
#jp-pilier-do-root .sf-lede { font-size: 15px !important; }
#jp-pilier-do-root .sf-section p { font-size: 15.5px !important; }
#jp-pilier-do-root .sf-bullets li { font-size: 14.5px !important; }
#jp-pilier-do-root .sf-section ul li,
#jp-pilier-do-root .sf-section ol li { font-size: 16px !important; line-height: 1.65 !important; }
#jp-pilier-do-root .sf-section details summary p { font-size: 16px !important; }
#jp-pilier-do-root .sf-section details > p { font-size: 14.5px !important; }
}
/* BP5 (480-639) : mobile standard */
@media (max-width: 639px) and (min-width: 480px) {
#jp-pilier-do-root .sf-section > h2 { font-size: 26px !important; gap: 12px !important; }
#jp-pilier-do-root .sf-section > h2::before { font-size: 42px !important; }
#jp-pilier-do-root .sf-section h3 { font-size: 18px !important; margin: 24px 0 12px !important; }
#jp-pilier-do-root .sf-subtitle { font-size: 16px !important; }
#jp-pilier-do-root .sf-lede { font-size: 15px !important; }
#jp-pilier-do-root .sf-section p { font-size: 15.5px !important; }
#jp-pilier-do-root .sf-bullets li { font-size: 14.5px !important; }
#jp-pilier-do-root .sf-section ul li,
#jp-pilier-do-root .sf-section ol li { font-size: 16px !important; line-height: 1.6 !important; }
#jp-pilier-do-root .sf-section { padding: 24px 16px !important; border-radius: 22px !important; margin-bottom: 18px !important; }
#jp-pilier-do-root .sf-section details summary { padding: 18px 48px 18px 48px !important; }
#jp-pilier-do-root .sf-section details summary p { font-size: 15.5px !important; }
#jp-pilier-do-root .sf-section details > p { padding: 0 18px 18px 48px !important; font-size: 14.5px !important; }
#jp-pilier-do-root .sf-section details summary::before { width: 28px !important; height: 28px !important; left: 14px !important; font-size: 15px !important; }
}
/* BP6 (≤479) : petit mobile */
@media (max-width: 479px) {
#jp-pilier-do-root .sf-section > h2 { font-size: 23px !important; gap: 10px !important; }
#jp-pilier-do-root .sf-section > h2::before { font-size: 35px !important; }
#jp-pilier-do-root .sf-section h3 { font-size: 17px !important; margin: 22px 0 10px !important; }
#jp-pilier-do-root .sf-subtitle { font-size: 16px !important; }
#jp-pilier-do-root .sf-lede { font-size: 14.5px !important; }
#jp-pilier-do-root .sf-section p { font-size: 15px !important; }
#jp-pilier-do-root .sf-bullets li { font-size: 14px !important; }
#jp-pilier-do-root .sf-section ul li,
#jp-pilier-do-root .sf-section ol li { font-size: 15px !important; line-height: 1.6 !important; }
#jp-pilier-do-root .sf-section ul,
#jp-pilier-do-root .sf-section ol { padding-left: 22px !important; }
#jp-pilier-do-root .sf-section { padding: 20px 14px !important; border-radius: 18px !important; margin-bottom: 16px !important; }
#jp-pilier-do-root .sf-section details summary { padding: 16px 42px 16px 40px !important; }
#jp-pilier-do-root .sf-section details summary p { font-size: 15px !important; }
#jp-pilier-do-root .sf-section details > p { padding: 0 16px 16px 40px !important; font-size: 14px !important; }
#jp-pilier-do-root .sf-section details summary::before { width: 26px !important; height: 26px !important; left: 12px !important; font-size: 14px !important; }
/* Sf-hero-inner padding réduit BP6 */
#jp-pilier-do-root .sf-hero-inner { padding: 0 16px !important; gap: 32px !important; }
/* CTA final padding réduit BP6 */
#jp-pilier-do-root .sf-final {
padding: 24px 16px !important;
margin: 20px 12px 32px !important;
border-radius: 24px !important;
}
#jp-pilier-do-root .sf-final h2 { font-size: clamp(1.5rem, 5.5vw + 0.4rem, 2.4rem) !important; }
#jp-pilier-do-root .sf-final p { font-size: 16px !important; margin-bottom: 22px !important; }
#jp-pilier-do-root .sf-final-row {
flex-direction: column !important;
gap: 12px !important;
align-items: center !important;
}
#jp-pilier-do-root .sf-final-primary,
#jp-pilier-do-root .sf-final-phone {
width: auto !important;
max-width: 320px !important;
min-width: 240px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
min-height: 48px !important;
padding: 14px 28px !important;
}
/* Décorations radial-gradient masquées BP6 (perf + visuel) */
#jp-pilier-do-root .sf-final::before,
#jp-pilier-do-root .sf-final::after { display: none !important; }
}
/* B4.6 — Footer typo BP4-BP5-BP6 (cf. §7.2). */
@media (max-width: 639px) {
#jp-pilier-do-root .sf-footer-col h5,
#jp-pilier-do-root .sf-footer-col .sf-footer-col-title { font-size: 13px !important; padding-top: 4px !important; }
#jp-pilier-do-root .sf-footer-col ul li { margin-bottom: 12px !important; }
#jp-pilier-do-root .sf-footer-bottom,
#jp-pilier-do-root .sf-footer-copyright,
#jp-pilier-do-root .sf-footer-legal a { font-size: 12px !important; }
}
/* B4.7 — Howto BP6 : padding réduit, grille fond décorative masquée (cf. §6.13) */
@media (max-width: 479px) {
#jp-pilier-do-root .sf-howto {
background-image: none !important;
max-height: 240px !important;
}
#jp-pilier-do-root .sf-howto-head { padding: 12px 16px 8px !important; }
#jp-pilier-do-root .sf-howto-list { padding: 10px 16px 12px !important; }
}
/* ============================================================
RESPONSIVE V3 — B5 a11y + finitions accessibilité
Source : CdC V1.2 §10 (a11y), §10.5 (focus-visible)
Date : 2026-05-15
============================================================ */
/* B5.1 — Focus visible global (cf. §10.5) — outline 2px terracotta sur tout élément
focusé via clavier. `:focus-visible` au lieu de `:focus` pour ne pas afficher
l'outline sur les clics souris (UX standard 2024+). */
#jp-pilier-do-root *:focus-visible,
.jp-drawer *:focus-visible,
.jp-drawer-overlay:focus-visible {
outline: 2px solid var(--terracotta) !important;
outline-offset: 2px !important;
border-radius: 4px;
}
/* Annule outline par défaut sur les éléments qui ont déjà un visuel focus distinct
(ex : drawer-cta avec son box-shadow). Conserver outline-offset pour clarté. */
#jp-pilier-do-root .sf-btn-primary:focus-visible,
#jp-pilier-do-root .sf-final-primary:focus-visible {
outline-offset: 3px !important;
}
/* B5.2 — Min zone tactile pour les liens TOC (desktop, cf. §10.1). Pas pour mobile car
.sf-toc est `display:none` <1100 (B1.1). */
@media (min-width: 1100px) {
#jp-pilier-do-root .sf-toc a { min-height: 44px !important; }
}
/* B5.3 — Min zone tactile FAQ summary mobile (≥48 px de hauteur, cf. §10.1). */
@media (max-width: 979px) {
#jp-pilier-do-root .sf-section details summary { min-height: 48px !important; }
}
/* B5.4 — Liens externes du drawer : underline au focus pour compatibilité high-contrast. */
.jp-drawer a:focus-visible {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
/* B5.5 — `prefers-reduced-motion` : déjà géré ligne 994 du CSS. On ajoute ici la garde
pour le drawer (transition .28s → .001s) et l'overlay (.25s → .001s). */
@media (prefers-reduced-motion: reduce) {
.jp-drawer,
.jp-drawer-overlay { transition-duration: .001ms !important; }
}
/* ============================================================
CORRECTIFS VISUELS (2026-05-15) — hors numérotation B1-B5
============================================================ */
/* CORR-1 — Étoiles trust strip jaunes (et non noires).
Cause : le bloc 1 ligne 1271-1280 du CSS force `color: #0a1b33` sur tous les ``
dans #jp-pilier-do-root (spécificité 1,1,0). La règle d'origine ligne 488-489
`.sf-trust-card-stars { color: var(--sage) }` (spécificité 0,1,0) perd à la cascade
→ les ★★★★★ s'affichaient en bleu marine au lieu du jaune sage.
Fix : règle préfixée avec !important pour battre l'override global span. */
#jp-pilier-do-root .sf-trust-card-stars {
color: var(--sage) !important;
filter: drop-shadow(0 1px 2px rgba(255, 207, 4, .25)) !important;
}
#jp-pilier-do-root .sf-trust-card-qfoot span:last-child {
color: var(--sage) !important;
}
/* 16. Figcaption des images H2 — aligner sur V2 (fs 13, lh 1.55, padding 14 18,
color muted). V3 affichait fs 12.5, padding 0 4 — moins lisible. */
#jp-pilier-do-root .sf-body .jp-figure-float-left figcaption,
#jp-pilier-do-root .sf-content .jp-figure-float-left figcaption {
font-size: 13px !important;
line-height: 1.55 !important;
padding: 14px 18px !important;
color: rgb(61, 72, 86) !important;
font-style: italic !important;
margin-top: 0 !important;
}
/* 17. TOC links — V2 utilise DM Sans 13/500 color #3D4856 (muted). Mes overrides
globaux (bloc 1) écrasaient avec Plus Jakarta Sans + color #0a1b33. On restaure
la spécificité voulue par le plugin pour les liens de sommaire uniquement. */
#jp-pilier-do-root .sf-toc a {
font-family: "DM Sans", sans-serif !important;
color: rgb(61, 72, 86) !important;
}
/* ============================================================
AJUSTEMENTS UX V3 — 2026-05-20 (Bloc A : header)
Source : SESSION-LOG-UX-V3.md
Composants pensés pour réutilisation sur les 21 piliers DO suivants.
============================================================ */
/* A1 — Top banner cyan : texte (et span interne) en blanc.
Cause : l'override anti-thème ligne 1296-1305 force `color: #0a1b33` sur
tous les du root → le interne du bandeau gagne la cascade
face à `.jp-header-top{color:#fff}` (spécificité 1,1,0 vs 0,1,0).
Fix : règle préfixée pour battre l'override sur les éléments du bandeau
sans toucher au CTA "Réserver une démo" (qui reste color ink). */
#jp-pilier-do-root .jp-header-top-text,
#jp-pilier-do-root .jp-header-top-text span,
#jp-pilier-do-root .jp-header-top-text strong {
color: #fff !important;
}
/* A2 — Phone pill : numéro + icône SVG en blanc sur fond cyan.
Cause : même piège que A1 → .jp-phone-num en color ink.
Le SVG hérite via currentColor du pill parent (déjà en color #fff). */
#jp-pilier-do-root .jp-phone-pill,
#jp-pilier-do-root .jp-phone-pill .jp-phone-num {
color: #fff !important;
}
/* Hover : conserve le swap cyan→jaune avec texte ink (cf. ligne 1202-1205).
Si on ne le précise pas sur le span, le numéro resterait blanc sur jaune. */
#jp-pilier-do-root .jp-phone-pill:hover .jp-phone-num {
color: var(--ink) !important;
}
/* A3 — Nav links desktop : gris anthracite mesuré sur l'original Elementor
(`rgb(127, 127, 127)` = #7F7F7F sur les libellés "Nos services", "Ressources",
"Connexion" du méga-menu Elementor d'origine).
Variable `--nav-link` introduite pour faciliter maintenance + cohérence
multi-piliers. À réutiliser sur tout autre lien de navigation du template. */
:root { --nav-link: #7F7F7F; }
#jp-pilier-do-root .jp-nav-trigger,
#jp-pilier-do-root .jp-nav-link {
color: var(--nav-link) !important;
}
/* A4 — Drawer mobile : empêcher les titres des cartes de passer par-dessus
le sticky header (logo + croix close) lors du scroll du drawer.
Bug iOS Safari réel reporté par Thomas.
Mesures iframe Chrome 386px : .jp-drawer-card est `position: relative;
overflow: hidden`, ses descendants peuvent en théorie remonter visuellement
au-dessus du sticky head dont z-index ne valait que 1.
Fix défensif :
1. Augmenter z-index du head à 10 (battre tout descendant non explicite).
2. `isolation: isolate` sur le .jp-drawer-nav → contexte d'empilement isolé
donc plus aucun descendant nav ne peut remonter dans le contexte parent
jp-drawer où vit le sticky head. */
.jp-drawer-head {
z-index: 10 !important;
}
.jp-drawer-nav {
isolation: isolate;
}
/* ============================================================
AJUSTEMENTS UX V3 — 2026-05-20 (Bloc B : typo & layout mobile)
============================================================ */
/* B1 — H1 hero plus grand sur mobile (cf. SESSION-LOG-UX-V3 B1).
Augmente la borne basse pour gagner en prestance vs desktop 51.2px.
Référence Thomas : 320 px → ~34 px, 390 px → ~38 px.
Place après les MQ B2.3 (lignes 1524-1564) pour gagner la cascade. */
@media (max-width: 479px) {
#jp-pilier-do-root .sf-h1,
#jp-pilier-do-root .sf-h1 .sf-h1-curl {
font-size: 2.125rem !important; /* 34 px (était 28) */
line-height: 1.12 !important;
}
}
@media (min-width: 480px) and (max-width: 639px) {
#jp-pilier-do-root .sf-h1,
#jp-pilier-do-root .sf-h1 .sf-h1-curl {
font-size: 2.375rem !important; /* 38 px (était 30) */
line-height: 1.12 !important;
}
}
/* B2 — Numéros décoratifs des sections H2 plus gros sur mobile pour atteindre
visuellement la hauteur de ~3 lignes du H2 (cible Thomas).
Calcul : 3 × H2 fontSize × line-height = hauteur cible.
BP6 (≤479) : H2 23 × 1.12 × 3 = 77 → numéro 70 px.
BP5 (480-639) : H2 26 × 1.12 × 3 = 87 → numéro 80 px.
BP4 (640-979) : H2 30 × 1.12 × 3 = 100 → numéro 92 px.
Place après les overrides B4.5 (lignes 2167/2182/2200). */
@media (max-width: 979px) and (min-width: 640px) {
#jp-pilier-do-root .sf-section > h2::before {
font-size: 92px !important; /* était 56 px */
line-height: 0.92 !important;
}
}
@media (max-width: 639px) and (min-width: 480px) {
#jp-pilier-do-root .sf-section > h2::before {
font-size: 80px !important; /* était 42 px */
line-height: 0.92 !important;
}
}
@media (max-width: 479px) {
#jp-pilier-do-root .sf-section > h2::before {
font-size: 70px !important; /* était 35 px */
line-height: 0.92 !important;
}
}
/* B3 — Images figure des sections H2 : pleine largeur mobile (≤979),
texte en dessous au lieu de flotter à côté.
Cause : l'override !important lignes 1395-1409 force float: left + width: 58%
SANS MQ → écrase la règle mobile ligne 588 (qui était bien posée mais
moins spécifique). Fix : MQ mobile dédiée avec !important pour battre l'override. */
@media (max-width: 979px) {
#jp-pilier-do-root .sf-body .jp-figure-float-left,
#jp-pilier-do-root .sf-content .jp-figure-float-left {
float: none !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 18px !important;
}
}
/* B4 — Figcaption mobile : plus petit + couleur muted pour différenciation
nette vs paragraphe principal (lisibilité conservée, contraste --mute
#6B7785 sur fond paper = ratio ~5.4:1 AA OK). Italique conservé.
Le desktop reste tel quel (bloc 16 lignes 2326-2334). */
@media (max-width: 979px) {
#jp-pilier-do-root .sf-body .jp-figure-float-left figcaption,
#jp-pilier-do-root .sf-content .jp-figure-float-left figcaption,
#jp-pilier-do-root .sf-section figure figcaption {
font-size: 12.5px !important;
color: var(--mute) !important;
padding: 10px 4px 0 !important;
line-height: 1.5 !important;
/* UX2 part 2 (Modif 9) — Légendes des images centrées horizontalement en mobile,
pour un rendu plus esthétique sous l'image (Thomas 2026-05-20). Desktop intouché. */
text-align: center !important;
}
}
/* ============================================================================
Module sidebar-services (5 cartes silos) — consommé par jp-pilier-blog
============================================================================
Markup généré par jp-shell/modules/sidebar-services/sidebar-services.php.
Positioning (sticky desktop / masqué mobile) géré dans pilier-blog.css via
`.sf-sidebar-services-wrap` wrapper (le wrapper est dans le partial blog).
V2 (T18 2026-05-27) — Fonds colorés par carte, esprit Elementor d'origine.
Couleurs mesurées au DevTools sur le post 83542 (Elementor source) :
- DO cyan-full rgba(0,164,221,0.85) + bord #00A4DD + texte blanc
- LO white-cyan-border #F9F9F9 + bord cyan (override noir Elementor → cyan brand)
- TO yellow-full rgba(255,210,0,0.72) + bord #FFD200 + texte navy
- Fichier cyan-soft #EBFBFC + bord cyan
- Formation yellow-soft #FFF8E6 + bord jaune
Présence visuelle V2 : padding 14×16 (vs 12×14 V1), radius 14px (vs 12), soft
shadow par défaut (vs aucune), hover renforcé avec accent silo.
Accents par silo (utilisés pour bordures et ombres) :
- cyan (--terracotta #00A3DD) : DO / LO / Fichier
- yellow (--sage #FFCF04) : TO / Formation
*/
.sf-sidebar-services {
background: #fff;
border: 1px solid rgba(10, 27, 51, 0.08);
border-radius: 14px;
padding: 20px 18px;
box-shadow: 0 2px 6px rgba(10, 27, 51, 0.04);
}
.sf-sidebar-services__title {
margin: 0 0 14px;
padding: 0 0 12px;
border-bottom: 1px solid rgba(10, 27, 51, 0.08);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(10, 27, 51, 0.55);
}
.sf-sidebar-services__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.sf-sidebar-services__item {
margin: 0;
padding: 0;
}
.sf-sidebar-services__card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 18px 14px;
border: 2px solid transparent;
border-radius: 16px;
background: rgba(10, 27, 51, 0.025);
text-decoration: none;
color: #0A1B33;
text-align: center;
transition: border-color .18s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
min-height: 116px;
box-shadow: 0 2px 8px rgba(10, 27, 51, 0.05);
}
.sf-sidebar-services__card:hover,
.sf-sidebar-services__card:focus-visible {
transform: translateY(-2px);
}
.sf-sidebar-services__item--cyan .sf-sidebar-services__card:hover,
.sf-sidebar-services__item--cyan .sf-sidebar-services__card:focus-visible {
border-color: #00A3DD;
box-shadow: 0 10px 22px rgba(0, 163, 221, 0.18);
}
.sf-sidebar-services__item--yellow .sf-sidebar-services__card:hover,
.sf-sidebar-services__item--yellow .sf-sidebar-services__card:focus-visible {
border-color: #FFCB05;
box-shadow: 0 10px 22px rgba(255, 203, 5, 0.22);
}
/* ----- Wrapper icône (transparent par défaut — l'icône repose directement sur le fond
de la carte, comme dans l'Elementor d'origine). Aucune pastille blanche. ----- */
.sf-sidebar-services__icon-wrap {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
}
.sf-sidebar-services__icon {
width: 56px;
height: 56px;
object-fit: contain;
display: block;
}
.sf-sidebar-services__label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.22;
color: #424242;
text-align: center;
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-wrap: balance;
}
/* ============================================================================
V2.1 — Variantes bg-style (5 cartes — esprit Elementor original fidèle)
============================================================================
Couleurs background ET texte mesurées au DevTools sur le post 83542
(`.elementor-heading-title`) — 2026-05-27 :
- cyan-full bg rgba(0,164,221,.85) text #FFFFFF (DO)
- white-cyan-border bg #F9F9F9 text #424242 (LO)
- yellow-full bg rgba(255,210,0,.72) text #FFFFFF (TO)
- cyan-soft bg #EBFBFC text #00A4DD (Fichier)
- yellow-soft bg #FFF8E6 text #FFD200 (Formation)
Pas de pastille blanche autour des icônes — l'icône repose à même le fond.
*/
/* `!important` sur color : nécessaire pour battre `#jp-pilier-do-root span { color: #0A1B33 }`
(spécificité 1,0,1) qui surcharge sinon le label dans le contexte pilier-do/blog. */
/* --- cyan-full (DO) : fond cyan plein, texte BLANC --- */
.sf-sidebar-services__item--bg-cyan-full .sf-sidebar-services__card {
background: rgba(0, 164, 221, 0.92);
border-color: #00A3DD;
}
.sf-sidebar-services__item--bg-cyan-full .sf-sidebar-services__label {
color: #FFFFFF !important;
}
.sf-sidebar-services__item--bg-cyan-full .sf-sidebar-services__card:hover,
.sf-sidebar-services__item--bg-cyan-full .sf-sidebar-services__card:focus-visible {
background: #00A3DD;
border-color: #008CC9;
box-shadow: 0 12px 26px rgba(0, 163, 221, 0.32);
}
/* --- white-cyan-border (LO) : fond blanc cassé, texte gris foncé --- */
.sf-sidebar-services__item--bg-white-cyan-border .sf-sidebar-services__card {
background: #F9F9F9;
border-color: #00A3DD;
}
.sf-sidebar-services__item--bg-white-cyan-border .sf-sidebar-services__label {
color: #424242 !important;
}
.sf-sidebar-services__item--bg-white-cyan-border .sf-sidebar-services__card:hover,
.sf-sidebar-services__item--bg-white-cyan-border .sf-sidebar-services__card:focus-visible {
background: #fff;
border-color: #008CC9;
box-shadow: 0 10px 22px rgba(0, 163, 221, 0.20);
}
/* --- yellow-full (TO) : fond jaune plein, texte gris anthracite (aligné LO, contraste 7:1) --- */
.sf-sidebar-services__item--bg-yellow-full .sf-sidebar-services__card {
background: rgba(255, 210, 0, 0.85);
border-color: #FFD200;
}
.sf-sidebar-services__item--bg-yellow-full .sf-sidebar-services__label {
color: #424242 !important;
}
.sf-sidebar-services__item--bg-yellow-full .sf-sidebar-services__card:hover,
.sf-sidebar-services__item--bg-yellow-full .sf-sidebar-services__card:focus-visible {
background: #FFD200;
border-color: #E5B900;
box-shadow: 0 12px 26px rgba(255, 210, 0, 0.36);
}
/* --- cyan-soft (Fichier) : fond cyan pastel, texte cyan brand --- */
.sf-sidebar-services__item--bg-cyan-soft .sf-sidebar-services__card {
background: #EBFBFC;
border-color: rgba(0, 163, 221, 0.55);
}
.sf-sidebar-services__item--bg-cyan-soft .sf-sidebar-services__label {
color: #00A4DD !important;
}
.sf-sidebar-services__item--bg-cyan-soft .sf-sidebar-services__card:hover,
.sf-sidebar-services__item--bg-cyan-soft .sf-sidebar-services__card:focus-visible {
background: #DFF6F9;
border-color: #00A3DD;
box-shadow: 0 10px 22px rgba(0, 163, 221, 0.20);
}
/* --- yellow-soft (Formation) : fond jaune pastel, texte navy ink (contraste 17:1) --- */
.sf-sidebar-services__item--bg-yellow-soft .sf-sidebar-services__card {
background: #FFF8E6;
border-color: rgba(255, 210, 0, 0.65);
}
.sf-sidebar-services__item--bg-yellow-soft .sf-sidebar-services__label {
color: #0A1B33 !important;
}
.sf-sidebar-services__item--bg-yellow-soft .sf-sidebar-services__card:hover,
.sf-sidebar-services__item--bg-yellow-soft .sf-sidebar-services__card:focus-visible {
background: #FFF1CC;
border-color: #FFD200;
box-shadow: 0 10px 22px rgba(255, 210, 0, 0.30);
}
/* ============================================================
EMBELLISSEMENTS CORPS (2026-05-30) — strictement scopés à la
colonne de texte `.sf-content` (corps des piliers + corps des
articles blog, tous deux enveloppés dans #jp-pilier-do-root).
`.sf-content` EXCLUT nativement le sommaire (.sf-toc), la
sidebar services et tout le mobilier/héro/footer (qui sont
frères ou hors .sf-body). Ne touche donc PAS au du
héro (.sf-lede / .sf-bullets), au mobilier, ni au blog hero.
============================================================ */
/* 1. du corps = surligneur jaune façon marqueur.
Effet « feutre fluo » élégant : le fond ne couvre que la moitié
basse du texte (linear-gradient transparent en haut → jaune doux
en bas), texte navy conservé, léger arrondi + respiration latérale.
box-decoration-break:clone => le surlignage suit les retours à la
ligne proprement. Override explicite des anciennes règles plates
(.sf-section p/ul/ol strong ligne 649/664/676) pour un rendu unifié. */
#jp-pilier-do-root .sf-content strong,
#jp-pilier-do-root .sf-content p strong,
#jp-pilier-do-root .sf-content li strong,
#jp-pilier-do-root .sf-content td strong,
#jp-pilier-do-root .sf-content details strong {
color: var(--ink) !important;
font-weight: 700 !important;
/* Surligneur : transparent jusqu'à ~42 % de hauteur, puis dégradé
sage-soft → butter sur le bas du texte (comme un trait de marqueur). */
background-image: linear-gradient(
180deg,
transparent 0,
transparent 42%,
var(--sage-soft) 42%,
var(--butter) 100%
) !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
padding: 0 .12em !important;
margin: 0 -.02em !important;
border-radius: .18em !important;
box-decoration-break: clone !important;
-webkit-box-decoration-break: clone !important;
}
/* 2. Liens internes du corps : cyan marque, soulignement fin et
moderne (offset généreux, trait adouci au repos qui se densifie
au survol). Visible mais non criard — registre B2B 2026.
Scope .sf-content => n'affecte ni le sommaire ni la sidebar. */
#jp-pilier-do-root .sf-content a {
color: var(--terracotta) !important;
font-weight: 600 !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
text-decoration-color: rgba(0, 163, 221, .38) !important;
border-radius: 3px !important;
transition: color .18s ease, text-decoration-color .18s ease,
background-color .18s ease, text-underline-offset .18s ease !important;
}
#jp-pilier-do-root .sf-content a:hover,
#jp-pilier-do-root .sf-content a:focus-visible {
color: #007FB0 !important; /* cyan marque assombri pour le contraste */
text-decoration-color: currentColor !important;
text-underline-offset: 4px !important;
background-color: var(--terracotta-soft) !important;
}
#jp-pilier-do-root .sf-content a:focus-visible {
outline: 2px solid var(--terracotta) !important;
outline-offset: 2px !important;
text-decoration: none !important; /* l'outline suffit au focus clavier */
}
/* ============================================================
SOMMAIRE HERO MOBILE — « sommaire sous les CTA » (jp-shell v0.7.3)
============================================================
Extension aux 5 silos pilier (DO/TO/LO/Fichier/Formation) du sommaire
mobile éprouvé sur le blog (pilier-blog-modular.css §4), via le module
factorisé modules/toc-hero/toc-hero.php (helper jp_shell_render_toc_hero).
DEUX sommaires coexistent sur un pilier (un seul visible par viewport) :
- `.sf-toc` (main-body.php) : STICKY en colonne gauche. SEUL visible en
DESKTOP (≥1100px), SEUL suivi par le scroll-spy (`.sf-toc a`). Déjà
masqué <1100px par B1.1 (ligne ~1468). → DESKTOP STRICTEMENT INCHANGÉ.
- `.sf-toc-hero` (hero.php, sous les CTA) : SEUL visible en MOBILE
(<1100px), accordéon natif . SANS la classe `.sf-toc` → échappe
au scroll-spy ET au display:none jp-shell <1100px (piloté ici).
SCOPE : `body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero`.
Le `:not(.jp-blog-modular-body)` EXCLUT le pilote blog (qui porte AUSSI
#jp-pilier-do-root mais possède son propre habillage scopé
`body.jp-blog-modular-body .sf-toc-hero`) → zéro double-stylage, zéro
régression du pilote blog. No-op total si `.sf-toc-hero` absent (la grande
majorité des piliers tant que le partial n'est pas appelé, et 100 % des 820
articles legacy). */
/* DESKTOP (≥1100px) : le sommaire HERO n'apparaît jamais (sticky `.sf-toc` seul). */
@media (min-width: 1100px) {
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero {
display: none !important;
}
}
/* MOBILE (<1100px) : carte accordéon soignée sous les CTA. Repli initial géré
par jp-shell.js (retire `open`) ; sans JS le bloc reste déplié = dégradation
gracieuse (jamais masqué). Accent CYAN par défaut (DO/LO/Fichier). */
@media (max-width: 1099px) {
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero {
display: block !important;
margin: 18px 0 4px !important; /* aération sous la barre de CTA */
padding: 4px 16px !important;
background: #f3fbfe !important; /* cyan pastel discret (charte) */
border: 1px solid rgba(0, 163, 221, 0.20) !important;
border-radius: 14px !important;
box-shadow: none !important; /* neutralise le box-shadow .sf-toc générique si hérité */
}
/* Summary = barre cliquable « Sommaire » + chevron à droite (rotation à l'ouverture). */
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero > summary.sf-toc-hero-label {
cursor: pointer;
list-style: none; /* retire le marqueur natif (Firefox) */
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 2px !important;
margin: 0 !important;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
color: #0A1B33 !important;
user-select: none;
}
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero > summary.sf-toc-hero-label::-webkit-details-marker {
display: none; /* retire le triangle natif WebKit/Blink */
}
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero > summary.sf-toc-hero-label .sf-toc-chevron {
flex: 0 0 auto;
width: 18px;
height: 18px;
transition: transform .2s ease;
color: #00A4DD;
}
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero[open] > summary.sf-toc-hero-label .sf-toc-chevron {
transform: rotate(180deg);
}
/* Liens : cachés tant que fermé, révélés quand [open], en colonne + fins séparateurs. */
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero > .sf-toc-hero-links {
display: none;
}
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero[open] > .sf-toc-hero-links {
display: block;
padding: 2px 0 10px;
border-top: 1px solid rgba(0, 163, 221, 0.14);
}
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero-links a {
display: block !important; /* bat la grille `.sf-toc a` (display:grid) si héritée */
padding: 9px 2px 9px 18px !important;
margin: 0 !important;
position: relative;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 600 !important;
color: #2c4257 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(0, 163, 221, 0.08) !important;
border-radius: 0 !important;
background: transparent !important;
}
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero-links a:last-child {
border-bottom: 0 !important;
}
/* Pastille ronde cyan (notre puce). Le ::before numéroté de `.sf-toc a` (compteurs
1..9) ne s'applique PAS ici car nos liens sont `.sf-toc-hero-links a`, pas `.sf-toc a`. */
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero-links a::before {
content: "" !important;
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: #00A4DD !important;
opacity: .55;
}
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero-links a:hover,
body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero-links a:focus-visible {
color: #00A3DD !important;
background: transparent !important;
}
}
/* --- Variante ACCENT JAUNE (silos TO + Formation, qui portent `body.jp-pilier-to-body`) --- */
@media (max-width: 1099px) {
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero {
background: #fffdf2 !important;
border-color: rgba(255, 207, 4, 0.40) !important;
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero > summary.sf-toc-hero-label .sf-toc-chevron {
color: var(--sage); /* jaune marque #FFCF04 */
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero[open] > .sf-toc-hero-links {
border-top-color: rgba(255, 207, 4, 0.30);
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero-links a {
border-bottom-color: rgba(255, 207, 4, 0.20) !important;
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero-links a::before {
background: var(--sage) !important;
opacity: 1;
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero-links a:hover,
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-toc-hero-links a:focus-visible {
color: #8a6d00 !important;
}
}
/* =====================================================================================
ACCENT JAUNE silo TO / Formation — éléments rendus par jp-shell (sélecteurs .sf-*)
=====================================================================================
REBASE À LA RACINE (audit 13 §C.4 + brief 2026-06-02). Les piliers TO/Formation ET les
hubs jp-hub-to / jp-hub-formation portent TOUS `body.jp-pilier-to-body`. En jaunissant ici
les sélecteurs .sf-* communs (rendus par jp-shell), on corrige d'un coup les 4 surfaces
ainsi que le post-it pour ces 4 templates — sans toucher le hub DO (body.jp-hub-do-body) ni
les silos cyan (DO/LO/Fichier n'ont jamais cette body class).
Garde-fous :
- scope `body.jp-pilier-to-body` (R6 : #jp-pilier-do-root + !important pour battre jp-shell) ;
- `:not(.jp-blog-modular-body)` → le blog modulaire jaune gère SON propre accent
(jp-blog-accent-yellow, cf. pilier-blog-modular.css §6) — on ne le double pas ;
- DÉCISION BOUTONS (DIRIGEANT 2026-06-02, RÉVISION) : le bouton d'action des silos jaunes
(TO + Formation) doit être JAUNE LOGO, pas cyan. Le hub TO/Formation était resté cyan
par erreur (les piliers TO/Formation jaunissaient déjà localement, pas les hubs). On
jaunit donc ICI .sf-btn-primary / .sf-final-primary / .sf-btn-ghost / .sf-final-phone à
la racine → corrige hubs + piliers + tout futur template `jp-pilier-to-body` d'un coup.
(Annule la précédente décision « bouton reste cyan ».)
Couleurs (règle dirigeant) : GROS TITRES + BOUTONS = jaune VIF logo #FFCF04 (var --sage) ;
PETIT TEXTE jaune (eyebrows, labels, puces) = jaune foncé #D9A800 pour la lisibilité sur blanc.
Texte des boutons jaunes = navy --ink (contraste fort). Vars jp-shell : --sage #FFCF04 · --sage-2 #FFDB47.
===================================================================================== */
/* 0. BOUTONS d'action jaunes (révision dirigeant 2026-06-02) — bg jaune VIF + texte navy.
.sf-btn-primary (hero) + .sf-final-primary (CTA final) ; .sf-btn-ghost + .sf-final-phone
= contour jaune. Bat les défauts cyan jp-shell (l.338/346 + l.826/835) via !important.
Scope `jp-pilier-to-body` → hub DO (cyan) jamais touché ; le blog modulaire ne porte PAS
cette classe (jp-blog-modular-body séparé) donc jamais affecté.
NB : spécificité VOLONTAIREMENT (1,2,1) — SANS :not() — IDENTIQUE aux règles des piliers
TO/Formation (pilier-to.css l.123+ / pilier-formation.css l.123+, chargées APRÈS jp-shell).
Résultat : sur les HUBS (aucune règle bouton locale) ce bloc s'applique ; sur les PILIERS
(qui jaunissent déjà localement avec leur PROPRE hover) la règle pilier, postérieure et de
même spécificité, l'emporte → le hover des piliers reste INCHANGÉ. */
body.jp-pilier-to-body #jp-pilier-do-root .sf-btn-primary,
body.jp-pilier-to-body #jp-pilier-do-root .sf-final-primary {
background: var(--sage) !important;
color: var(--ink) !important;
box-shadow: 0 12px 26px -8px rgba(255, 207, 4, .50) !important;
}
body.jp-pilier-to-body #jp-pilier-do-root .sf-btn-primary:hover,
body.jp-pilier-to-body #jp-pilier-do-root .sf-final-primary:hover {
background: #E9BC00 !important; /* jaune logo légèrement assombri au survol (reste vif) */
color: var(--ink) !important;
box-shadow: 0 16px 32px -8px rgba(255, 207, 4, .55) !important;
}
body.jp-pilier-to-body #jp-pilier-do-root .sf-btn-ghost {
border-color: var(--sage) !important;
color: #8a6d00 !important; /* petit texte du bouton fantôme : foncé pour lisibilité */
}
body.jp-pilier-to-body #jp-pilier-do-root .sf-btn-ghost:hover {
background: var(--sage) !important;
color: var(--ink) !important;
border-color: var(--sage) !important;
}
/* .sf-final-phone (contour jaune) traité plus bas en section 4. */
/* 1. Vague du curl H1 → SVG jaune + segment de GROS TITRE en jaune VIF logo (règle dirigeant). */
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-h1-curl {
color: var(--sage) !important;
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-h1-curl::after {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* 2. Post-it (carte à carreaux) : quadrillage cyan → jaune + puces jaunes + scrollbar.
R-POSTIT : le post-it reste TOUJOURS à carreaux ; sur thème jaune, le quadrillage est jaune. */
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-howto {
background-image:
linear-gradient(rgba(255, 207, 4, 0.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 207, 4, 0.16) 1px, transparent 1px) !important;
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-howto-list li::before {
background: var(--sage) !important;
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-howto-list {
scrollbar-color: var(--sage) var(--sage-soft) !important;
}
/* 3. Puce des bullets du hero → jaune (marker cyan par défaut, l.334). */
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-bullets li::marker {
color: #D9A800 !important;
}
/* 4. CTA final — mot manuscrit « hand » (segment de GROS TITRE H2) → jaune VIF logo
(aligné sur les piliers TO/Formation). Le téléphone .sf-final-phone garde un CONTOUR jaune.
Le bouton d'action .sf-final-primary est désormais JAUNE (cf. section 0 ci-dessus). */
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-final-hand {
color: var(--sage) !important;
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-final-phone {
color: #8a6d00 !important;
border-color: var(--sage) !important;
}
body.jp-pilier-to-body:not(.jp-blog-modular-body) #jp-pilier-do-root .sf-final-phone:hover {
background: var(--sage) !important;
color: var(--ink) !important;
border-color: var(--sage) !important;
}
/* ==========================================================================
MODULES « PAGE DE VENTE » LO (v0.8.7) — feature-grid · pricing-cards ·
screenshot-feature · badge-row · pont marketplace.
Tout est scopé sous #jp-pilier-do-root (spécificité 1,x,x bat les .sf-* de base,
cf. règle R6) et n'apparaît QUE sur les pages en mode vente (classes propres),
donc 0 collision avec les piliers existants. Palette = tokens jp-shell uniquement.
Anti-AI-design : icônes ligne, pas de gélule eyebrow, pas de rail gauche pastel,
pas d'emoji décoratif, variation intentionnelle, ombres dans la palette (cyan).
v0.8.7 (refonte charte hub modules de vente, 2026-06-05) : application du blueprint
design LO. Bande de preuve = chiffres NUS centrés (suppression du filet/carte = tell
IA), eyebrow à 2 traits cyan centré. Feature-grid : onglets → segmented pills, compteur
→ kicker à trait, grille 3 colonnes de cartes BLANCHES à hauteur égale (layout vertical,
tuile d'icône 44px). Cartes de prix : bouton coins carrés (radius 4px) + ombre JAUNE,
cyan permanent (override prose aligné), « € » insécable. NE TOUCHE PAS .sf-btn-*/.sf-final-*
(transverses aux 5 silos). Markup/PHP feature-grid : retrait du compteur d'onglet, ajout
du kicker + eyebrow optionnel, 3 mappings d'icônes, fallback 'check-circle'.
v0.8.6 (raffinement charte hub, 2026-06-05) : ces modules vivent sur une page
PILIER où la feuille hub (hub-lo.css) n'est PAS chargée. On REPREND donc ici les
VRAIES valeurs charte du hub (ombres douces au repos + hover cyan, gros chiffres de
stats en couleurs alternées cyan/navy/jaune, eyebrow lettré 0.16em, filets fins,
boutons cyan plein / ghost cyan, FAQ/flèches cyan) pour que les 4 modules adoptent
le RELIEF du hub au lieu de rester « plats ». Aucune dépendance JS pour afficher du
contenu ; aucun hex hors charte (#D9A800 = jaune foncé lisible, déjà utilisé pour les
labels de stats du hub). Markup/PHP inchangés.
========================================================================== */
/* Tokens d'ombre repris du hub (hub-lo.css) : la feuille hub n'étant pas chargée sur une
page pilier, on REDÉCLARE ici (scopés) les deux ombres de marque — repos doux + hover
teinté cyan — pour donner le même relief aux tuiles/cartes des modules de vente.
Valeurs IDENTIQUES à hub-lo.css (#jp-pilier-do-root --jp-shadow-rest/-hover). */
#jp-pilier-do-root{
--jp-shadow-rest:0 1px 2px rgba(10,27,51,.04), 0 10px 28px -18px rgba(10,27,51,.16);
--jp-shadow-hover:0 16px 34px -16px rgba(0,163,221,.30);
}
/* ---------- PONT MARKETPLACE (chiffres NUS centrés façon hub, SANS carte ni filet) ---------- */
/* Section aérée façon hub : fond transparent, pas de boîte crème encadrée. */
#jp-pilier-do-root .sf-lo-bridge{padding:0 0 24px}
#jp-pilier-do-root .sf-lo-bridge-inner{
max-width:1232px;margin:0 auto;padding:36px 24px 30px;
background:transparent;border:0;border-radius:0;
}
/* En-tête CENTRÉ (corrige text-align:left + bordure de fermeture). */
#jp-pilier-do-root .sf-lo-bridge-chapo{
text-align:center;max-width:760px;margin:0 auto 34px;
border-bottom:0;padding-bottom:0;
}
/* Eyebrow lettré façon hub CENTRÉ avec un trait cyan DES DEUX CÔTÉS (::before ET ::after). */
#jp-pilier-do-root .sf-lo-bridge-kicker{
display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 16px;
font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
color:var(--terracotta);
}
#jp-pilier-do-root .sf-lo-bridge-kicker::before,
#jp-pilier-do-root .sf-lo-bridge-kicker::after{
content:"";width:30px;height:2px;border-radius:2px;background:var(--terracotta);flex:0 0 auto;
}
#jp-pilier-do-root .sf-lo-bridge-text{
font-size:16px;line-height:1.65;color:var(--ink-2);margin:0 auto;max-width:60ch;text-align:center;
}
#jp-pilier-do-root .sf-lo-bridge-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:6px;
}
/* Chiffres NUS centrés (registre .sf-stat du hub) : aucun fond/bordure/ombre/carte. */
#jp-pilier-do-root .sf-lo-bridge-stat{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
padding:0;background:none;border:0;box-shadow:none;position:relative;
}
/* Chiffres GROS centrés colorés (registre .sf-stat-num du hub). */
#jp-pilier-do-root .sf-lo-bridge-num{
font-size:clamp(2.6rem,1.5vw+2rem,3.4rem);font-weight:800;line-height:1;letter-spacing:-0.035em;
font-variant-numeric:tabular-nums;color:var(--terracotta);
}
/* COULEURS ALTERNÉES cyan / navy / jaune-foncé / cyan (même registre que .sf-stat-num--blue/--ink/--yellow du hub). */
#jp-pilier-do-root .sf-lo-bridge-stat:nth-child(4n+2) .sf-lo-bridge-num{color:var(--ink)}
#jp-pilier-do-root .sf-lo-bridge-stat:nth-child(4n+3) .sf-lo-bridge-num{color:#D9A800}
#jp-pilier-do-root .sf-lo-bridge-stat:nth-child(4n+4) .sf-lo-bridge-num{color:var(--terracotta)}
#jp-pilier-do-root .sf-lo-bridge-label{font-size:13.5px;line-height:1.4;color:var(--ink);font-weight:600;max-width:18ch;margin:0 auto}
#jp-pilier-do-root .sf-lo-bridge-src{font-size:11.5px;color:var(--mute);font-style:italic;margin-top:2px}
/* Séparateur = HAIRLINE VERTICAL fin entre chiffres voisins (copie .sf-stat + .sf-stat::before du hub). */
#jp-pilier-do-root .sf-lo-bridge-stat + .sf-lo-bridge-stat::before{
content:"";position:absolute;left:-11px;top:14%;height:62%;width:1px;
background:linear-gradient(180deg,transparent,rgba(10,27,51,.10),transparent);
}
@media (max-width:880px){
#jp-pilier-do-root .sf-lo-bridge-stats{grid-template-columns:repeat(2,1fr);gap:30px 18px}
#jp-pilier-do-root .sf-lo-bridge-num{font-size:42px}
#jp-pilier-do-root .sf-lo-bridge-stat + .sf-lo-bridge-stat::before{display:none}
}
@media (max-width:520px){
#jp-pilier-do-root .sf-lo-bridge-stats{grid-template-columns:1fr}
}
/* ---------- BADGE-ROW (barre fine 3 avis externes, texte) ---------- */
#jp-pilier-do-root .jp-badgerow{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:10px 28px;max-width:1232px;margin:0 auto 8px;padding:14px 24px;
}
#jp-pilier-do-root .jp-badgerow--compact{padding:10px 24px}
#jp-pilier-do-root .jp-badgerow-item{
display:inline-flex;align-items:center;gap:8px;
font-size:14px;color:var(--ink-2);position:relative;
}
/* séparateur fin entre badges (point, pas de barre lourde) */
#jp-pilier-do-root .jp-badgerow-item + .jp-badgerow-item::before{
content:"";position:absolute;left:-15px;top:50%;transform:translateY(-50%);
width:3px;height:3px;border-radius:50%;background:var(--cream-3);
}
#jp-pilier-do-root a.jp-badgerow-item{transition:color .2s}
#jp-pilier-do-root a.jp-badgerow-item:hover{color:var(--terracotta)}
#jp-pilier-do-root .jp-badgerow-name{font-weight:700;color:var(--ink)}
/* Étoiles jaunes façon trust-strip du hub (drop-shadow doux). */
#jp-pilier-do-root .jp-badgerow-stars{
color:var(--sage);font-size:13px;letter-spacing:1.5px;
filter:drop-shadow(0 1px 2px rgba(255,207,4,.25));
}
/* Score en CYAN + gras 800 (registre .sf-trust-card-score du hub). */
#jp-pilier-do-root .jp-badgerow-score{font-weight:800;color:var(--terracotta);letter-spacing:-0.02em}
#jp-pilier-do-root .jp-badgerow-score small{font-weight:600;color:var(--mute);font-size:11px}
/* variante logos d'intégration */
#jp-pilier-do-root .jp-badgerow--logos{flex-direction:column;gap:14px}
#jp-pilier-do-root .jp-badgerow-title{font-size:12.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--mute)}
#jp-pilier-do-root .jp-badgerow-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px 32px}
#jp-pilier-do-root .jp-badgerow-logo{height:26px;width:auto;opacity:.72;filter:grayscale(1);transition:opacity .2s,filter .2s}
#jp-pilier-do-root .jp-badgerow-logo:hover{opacity:1;filter:grayscale(0)}
/* ---------- FEATURE-GRID (onglets desktop / accordéon mobile) ---------- */
#jp-pilier-do-root .jp-fg{margin:8px 0 4px}
/* Eyebrow de section CENTRÉ à 2 traits cyan (copie exacte du patron eyebrow hub). */
#jp-pilier-do-root .jp-fg-eyebrow{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font:700 12.5px/1 'DM Sans',sans-serif;letter-spacing:0.16em;text-transform:uppercase;color:var(--terracotta);
}
#jp-pilier-do-root .jp-fg-eyebrow::before,
#jp-pilier-do-root .jp-fg-eyebrow::after{
content:"";width:30px;height:2px;border-radius:2px;background:var(--terracotta);flex:0 0 auto;
}
/* Intro de section CENTRÉE (corrige text-align:justify). */
#jp-pilier-do-root .jp-fg-intro{max-width:760px;margin:0 auto 8px;text-align:center}
#jp-pilier-do-root .jp-fg-intro p{font-size:15.5px;line-height:1.8;color:var(--ink);margin:0 0 14px}
#jp-pilier-do-root .jp-fg-trailing p{font-size:15.5px;line-height:1.8;color:var(--ink);margin:0 0 14px;text-align:justify}
#jp-pilier-do-root .jp-fg-trailing{margin-top:18px;padding-top:18px;border-top:1px solid var(--cream-2)}
/* Barre d'onglets = SEGMENTED PILLS centrée dans un rail crème arrondi (registre segmented control). */
#jp-pilier-do-root .jp-fg-tabs{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px auto 28px;
padding:6px;background:var(--cream);border:1px solid var(--cream-3);border-radius:16px;
width:fit-content;max-width:100%;
}
#jp-pilier-do-root .jp-fg-tab{
display:inline-flex;align-items:center;gap:9px;
padding:10px 16px;border-radius:11px;
font-size:14px;font-weight:700;color:var(--ink-2);
background:transparent;border:0;cursor:pointer;
transition:background .2s,color .2s,box-shadow .2s;
}
#jp-pilier-do-root .jp-fg-tab:hover{background:rgba(10,27,51,.04);color:var(--ink)}
/* Onglet actif = pilule blanche surélevée à filet cyan. */
#jp-pilier-do-root .jp-fg-tab.is-active{
background:var(--paper);color:var(--terracotta);
box-shadow:0 2px 8px -2px rgba(10,27,51,.14),0 0 0 1px rgba(0,163,221,.18);
}
#jp-pilier-do-root .jp-fg-tab-ic{display:inline-flex;color:currentColor}
#jp-pilier-do-root .jp-fg-tab-ic .jp-fg-ic{display:block}
#jp-pilier-do-root .jp-fg-tab-name{white-space:nowrap}
/* Kicker de panneau (compteur déplacé hors de l'onglet) : eyebrow discret à trait cyan.
Affiché UNIQUEMENT en mode onglets (en accordéon, le compteur reste la pilule .jp-fg-fam-count). */
#jp-pilier-do-root .jp-fg-panel-kicker{
display:none;
font-size:12.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute);
margin:0 0 14px;align-items:center;gap:10px;
}
#jp-pilier-do-root .jp-fg-panel-kicker::before{
content:"";width:30px;height:2px;border-radius:2px;background:var(--terracotta);
}
/* Familles : natif = socle DOM (accordéon mobile + base onglets desktop).
Relief façon carte de hub : ombre douce au repos + liseré/ombre cyan à l'ouverture. */
#jp-pilier-do-root .jp-fg-fam{
border:1px solid var(--module-border);border-radius:18px;
margin-top:14px;background:var(--paper);overflow:hidden;
box-shadow:var(--jp-shadow-rest);
transition:border-color .28s ease,box-shadow .28s ease;
}
#jp-pilier-do-root .jp-fg-fam[open]{
border-color:rgba(0,163,221,.30);
box-shadow:0 16px 36px -16px rgba(0,163,221,.18);
}
#jp-pilier-do-root .jp-fg-fam-head{
display:flex;align-items:center;gap:14px;
padding:17px 20px;cursor:pointer;list-style:none;
transition:background .18s;
}
#jp-pilier-do-root .jp-fg-fam-head::-webkit-details-marker{display:none}
#jp-pilier-do-root .jp-fg-fam-head:hover{background:var(--cream)}
/* en-tête de famille ouverte : titre cyan (cohérent avec FAQ ouverte du hub). */
#jp-pilier-do-root .jp-fg-fam[open] .jp-fg-fam-name{color:var(--terracotta)}
#jp-pilier-do-root .jp-fg-fam-ic{
flex-shrink:0;width:42px;height:42px;border-radius:12px;
display:grid;place-items:center;color:var(--terracotta);
background:var(--terracotta-soft);border:1px solid #CDE9F6;
}
#jp-pilier-do-root .jp-fg-fam-titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#jp-pilier-do-root .jp-fg-fam-name{font-size:17px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);line-height:1.2}
#jp-pilier-do-root .jp-fg-fam-sub{font-size:13px;color:var(--mute);line-height:1.35}
#jp-pilier-do-root .jp-fg-fam-count{
flex-shrink:0;font-size:12.5px;font-weight:700;color:var(--terracotta);
padding:5px 11px;border-radius:99px;background:var(--terracotta-soft);white-space:nowrap;
}
#jp-pilier-do-root .jp-fg-fam-chev{
flex-shrink:0;width:11px;height:11px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
transform:rotate(45deg);transition:transform .22s;margin-left:2px;
}
#jp-pilier-do-root .jp-fg-fam[open] .jp-fg-fam-chev{transform:rotate(-135deg)}
#jp-pilier-do-root .jp-fg-fam-body{padding:4px 20px 22px}
#jp-pilier-do-root .jp-fg-fam-intro{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 22px;text-align:left;max-width:720px}
#jp-pilier-do-root .jp-fg-fam-extra{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0 0 14px}
/* Cartes de fonctionnalités — 3 colonnes régulières, hauteur ÉGALE, cartes BLANCHES à ombre douce,
layout VERTICAL (icône en haut → titre → desc). */
#jp-pilier-do-root .jp-fg-cards{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;list-style:none;margin:0;padding:0;
}
#jp-pilier-do-root .jp-fg-card{
display:flex;flex-direction:column;gap:10px;height:100%;
padding:20px 18px;border:1px solid var(--module-border);border-radius:16px;
background:var(--paper);
box-shadow:var(--jp-shadow-rest);
transition:transform .2s,box-shadow .2s,border-color .2s;
}
#jp-pilier-do-root .jp-fg-card:hover{
transform:translateY(-3px);border-color:rgba(0,163,221,.32);
box-shadow:var(--jp-shadow-hover);
}
/* Tuile d'icône 44px cyan-douce (identique à la tuile de famille) + inversion cyan au hover. */
#jp-pilier-do-root .jp-fg-card-ic{
flex-shrink:0;width:44px;height:44px;border-radius:12px;
display:grid;place-items:center;color:var(--terracotta);
background:var(--terracotta-soft);border:1px solid #CDE9F6;
}
#jp-pilier-do-root .jp-fg-card:hover .jp-fg-card-ic{background:var(--terracotta);color:#fff}
#jp-pilier-do-root .jp-fg-card-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
#jp-pilier-do-root .jp-fg-card-title{font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-0.01em;color:var(--ink);background:none;padding:0}
#jp-pilier-do-root .jp-fg-card-desc{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
#jp-pilier-do-root .jp-fg-card-desc strong{background:none;color:var(--ink);padding:0}
/* Neutralise le surligneur jaune global des de .sf-content SUR les titres de cartes
feature-grid (titres structurés, pas de la prose) : 42 titres surlignés = bruit visuel.
La prose des sections garde le surligneur ; seules ces cartes sont remises au propre. */
#jp-pilier-do-root .sf-content .jp-fg-card-title,
#jp-pilier-do-root .sf-content strong.jp-fg-card-title{background-image:none !important;background:none !important;padding:0 !important}
#jp-pilier-do-root .sf-content .jp-fg-card-desc strong{background-image:none !important;background:none !important;padding:0 !important}
/* --- Desktop ≥920px : bascule en ONGLETS (JS ajoute .jp-fg--tabs). Sans JS : accordéon natif --- */
@media (min-width:920px){
#jp-pilier-do-root .jp-fg--tabs .jp-fg-fam{
border:0;border-radius:0;margin-top:0;background:none;box-shadow:none;
/* contenu présent dans le DOM mais masqué visuellement quand l'onglet n'est pas actif :
affichage piloté par .is-active (CSS), JAMAIS d'injection JS au clic → SEO préservé */
display:none;
}
/* en mode onglets, le panneau n'est plus une carte : pas d'ombre/liseré cyan de carte. */
#jp-pilier-do-root .jp-fg--tabs .jp-fg-fam[open]{box-shadow:none;border-color:transparent}
#jp-pilier-do-root .jp-fg--tabs .jp-fg-fam[open] .jp-fg-fam-name{color:var(--ink)}
#jp-pilier-do-root .jp-fg--tabs .jp-fg-fam.is-active{display:block;animation:jpFgFade .25s ease}
#jp-pilier-do-root .jp-fg--tabs .jp-fg-fam-head{display:none} /* en mode onglets, l'en-tête est la tab */
#jp-pilier-do-root .jp-fg--tabs .jp-fg-fam-body{padding:28px 2px 8px}
#jp-pilier-do-root .jp-fg--tabs .jp-fg-panel-kicker{display:flex}
#jp-pilier-do-root .jp-fg--tabs .jp-fg-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
@keyframes jpFgFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:620px){
#jp-pilier-do-root .jp-fg-cards{grid-template-columns:1fr}
#jp-pilier-do-root .jp-fg-fam-head{gap:11px;padding:14px 15px}
}
/* ---------- PRICING-CARDS (3 cartes, 12 mois recommandée) ---------- */
#jp-pilier-do-root .jp-pc{margin:8px 0 4px}
#jp-pilier-do-root .jp-pc-intro p{font-size:15.5px;line-height:1.8;color:var(--ink);margin:0 0 14px;text-align:justify}
#jp-pilier-do-root .jp-pc-sub{
font-size:16px;font-weight:600;color:var(--ink-2);margin:6px 0 26px;text-align:center;
}
#jp-pilier-do-root .jp-pc-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;
}
/* Cartes de prix façon hub : rayon 20px + ombre douce AU REPOS + hover relevé. */
#jp-pilier-do-root .jp-pc-card{
position:relative;display:flex;flex-direction:column;
padding:30px 26px 26px;
background:var(--paper);border:1px solid var(--module-border);border-radius:20px;
box-shadow:var(--jp-shadow-rest);
transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease;
}
#jp-pilier-do-root .jp-pc-card:hover{
transform:translateY(-5px);border-color:rgba(0,163,221,.30);
box-shadow:var(--jp-shadow-hover);
}
/* carte recommandée : liseré cyan MARQUÉ (anneau 1px + bordure) + ombre cyan + légère
surélévation (registre .jp-hub-choose__card--featured du hub ; PAS de % nulle part). */
#jp-pilier-do-root .jp-pc-card.is-reco{
border:2px solid var(--terracotta);
box-shadow:0 0 0 1px var(--terracotta),0 22px 44px -18px rgba(0,163,221,.40);
}
#jp-pilier-do-root .jp-pc-card.is-reco:hover{
border-color:var(--terracotta);
box-shadow:0 0 0 1px var(--terracotta),0 30px 50px -20px rgba(0,163,221,.46);
}
@media (min-width:760px){
#jp-pilier-do-root .jp-pc-card.is-reco{transform:translateY(-10px)}
#jp-pilier-do-root .jp-pc-card.is-reco:hover{transform:translateY(-13px)}
}
/* badge « Le plus choisi » = onglet en haut de carte, pas un ruban % en coin */
#jp-pilier-do-root .jp-pc-badge{
position:absolute;top:-13px;left:50%;transform:translateX(-50%);
padding:6px 16px;border-radius:99px;white-space:nowrap;
font-size:12px;font-weight:700;letter-spacing:0.02em;
color:#fff;background:var(--terracotta);
box-shadow:0 8px 18px -6px rgba(0,163,221,.5);
}
#jp-pilier-do-root .jp-pc-eng{
font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;
}
#jp-pilier-do-root .jp-pc-card.is-reco .jp-pc-eng{color:var(--terracotta)}
/* Autorise le retour propre MONTANT / PÉRIODE, jamais à l'intérieur du montant. */
#jp-pilier-do-root .jp-pc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;line-height:1}
/* white-space:nowrap → le « € » ne retombe jamais à la ligne (cause : « 64,95 € » dans un seul nœud). */
#jp-pilier-do-root .jp-pc-amount{
font-size:40px;font-weight:800;letter-spacing:-0.03em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
#jp-pilier-do-root .jp-pc-period{font-size:14px;font-weight:600;color:var(--mute)}
#jp-pilier-do-root .jp-pc-unit{font-size:13px;color:var(--ink-2);margin-top:6px}
#jp-pilier-do-root .jp-pc-gap{
font-size:13px;font-weight:700;color:var(--terracotta);
margin-top:12px;padding:8px 12px;border-radius:10px;background:var(--terracotta-soft);
}
#jp-pilier-do-root .jp-pc-incl{list-style:none;margin:20px 0 22px;padding:18px 0 0;border-top:1px solid var(--cream-2);display:flex;flex-direction:column;gap:11px;flex:1}
#jp-pilier-do-root .jp-pc-incl li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:var(--ink)}
#jp-pilier-do-root .jp-pc-check{flex-shrink:0;color:var(--terracotta);margin-top:1px}
/* Signature de marque : coins CARRÉS (radius 4px) + ombre JAUNE, fond cyan PERMANENT (le hover
ne vire plus au jaune) ; seule l'ombre s'intensifie + translateY(-2px). */
#jp-pilier-do-root .jp-pc-cta{
display:block;text-align:center;padding:14px 22px;border-radius:4px;
font-size:14.5px;font-weight:700;letter-spacing:-0.005em;
background:var(--terracotta);color:#fff;box-shadow:0 10px 22px -6px rgba(255,207,4,.50);
transition:box-shadow .25s ease,transform .2s ease;
}
#jp-pilier-do-root .jp-pc-cta:hover{background:var(--terracotta);color:#fff;box-shadow:0 14px 28px -6px rgba(255,207,4,.60);transform:translateY(-2px)}
/* Ghost : même radius carré, contour cyan, halo jaune léger au hover. */
#jp-pilier-do-root .jp-pc-cta--ghost{
background:var(--paper);color:var(--terracotta);border:2px solid var(--terracotta);border-radius:4px;
box-shadow:none;padding:12px 20px;
}
#jp-pilier-do-root .jp-pc-cta--ghost:hover{background:var(--terracotta);color:#fff;border-color:var(--terracotta);box-shadow:0 12px 26px -6px rgba(255,207,4,.50)}
#jp-pilier-do-root .jp-pc-note{font-size:13px;line-height:1.6;color:var(--mute);text-align:center;margin:24px auto 0;max-width:68ch}
#jp-pilier-do-root .jp-pc-options{margin:18px auto 0;max-width:760px;border:1px solid var(--cream-2);border-radius:14px;background:var(--cream);overflow:hidden}
#jp-pilier-do-root .jp-pc-options > summary{
list-style:none;cursor:pointer;padding:14px 20px;
font-size:14px;font-weight:700;color:var(--ink);
display:flex;align-items:center;justify-content:space-between;
}
#jp-pilier-do-root .jp-pc-options > summary::-webkit-details-marker{display:none}
#jp-pilier-do-root .jp-pc-options > summary::after{
content:"";width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
transform:rotate(45deg);transition:transform .2s;
}
#jp-pilier-do-root .jp-pc-options[open] > summary::after{transform:rotate(-135deg)}
#jp-pilier-do-root .jp-pc-options-body{padding:0 20px 18px}
#jp-pilier-do-root .jp-pc-options-body p{font-size:14px;line-height:1.7;color:var(--ink-2);margin:0 0 10px;text-align:left}
#jp-pilier-do-root .jp-pc-options-body p strong{background:none;color:var(--ink);padding:0}
@media (max-width:860px){
#jp-pilier-do-root .jp-pc-grid{grid-template-columns:1fr;gap:28px;max-width:440px;margin:0 auto}
#jp-pilier-do-root .jp-pc-card.is-reco{transform:none}
#jp-pilier-do-root .jp-pc-card.is-reco:hover{transform:translateY(-3px)}
}
/* ---------- SCREENSHOT-FEATURE (mockup fenêtre navigateur + ombre cyan) ---------- */
#jp-pilier-do-root .jp-ssf{margin:6px 0 18px}
#jp-pilier-do-root .jp-ssf-frame{
border:1px solid var(--module-border);border-radius:16px;overflow:hidden;
background:var(--paper);
box-shadow:0 26px 54px -22px rgba(0,163,221,.40),0 6px 16px -10px rgba(10,27,51,.18);
}
#jp-pilier-do-root .jp-ssf-bar{
display:flex;align-items:center;gap:7px;
padding:11px 15px;background:var(--cream-2);border-bottom:1px solid var(--cream-3);
}
#jp-pilier-do-root .jp-ssf-dot{width:11px;height:11px;border-radius:50%;background:#CBD2DB}
#jp-pilier-do-root .jp-ssf-dot:nth-child(1){background:#F2B8B5}
#jp-pilier-do-root .jp-ssf-dot:nth-child(2){background:#FBE2A0}
#jp-pilier-do-root .jp-ssf-dot:nth-child(3){background:#B7E3C6}
#jp-pilier-do-root .jp-ssf-screen{position:relative;line-height:0}
#jp-pilier-do-root .jp-ssf-img{width:100%;height:auto;display:block}
/* Badge sur le screenshot : aplat navy PLEIN opaque (pas de backdrop-filter → on retire le
tell glassmorphism ; le navy plein reste parfaitement lisible sur la capture). */
#jp-pilier-do-root .jp-ssf-badge{
position:absolute;left:14px;bottom:14px;
padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;
color:#fff;background:var(--ink);
}
#jp-pilier-do-root .jp-ssf-cap{font-size:12.5px;color:var(--mute);font-style:italic;margin-top:9px;padding:0 4px;line-height:1.45}
@media (min-width:900px){
#jp-pilier-do-root .jp-ssf--left{float:left;width:54%;margin:6px 30px 16px 0}
#jp-pilier-do-root .jp-ssf--right{float:right;width:54%;margin:6px 0 16px 30px}
}
@media (max-width:899px){
#jp-pilier-do-root .jp-ssf--left,#jp-pilier-do-root .jp-ssf--right{float:none;width:100%;margin:6px 0 16px}
}
/* ---------- OVERRIDES de cohabitation (les modules vivent dans .sf-content > .sf-section,
qui imposent des styles globaux aux , et . On les neutralise
UNIQUEMENT pour les classes de nos modules, sans toucher la prose des piliers). ---------- */
/* a) Les de nos modules ne sont pas des liens de prose : pas de soulignement cyan global. */
#jp-pilier-do-root .sf-content a.jp-pc-cta,
#jp-pilier-do-root .sf-content a.jp-badgerow-item{
text-decoration:none !important;font-weight:700 !important;border-radius:4px;
background-color:transparent;
}
/* CTA recommandée : fond cyan PERMANENT → texte BLANC + ombre JAUNE (coins carrés 4px). */
#jp-pilier-do-root .sf-content a.jp-pc-cta{
color:#fff !important;background:var(--terracotta) !important;border-radius:4px;
box-shadow:0 10px 22px -6px rgba(255,207,4,.50);
}
#jp-pilier-do-root .sf-content a.jp-pc-cta:hover{
color:#fff !important;background:var(--terracotta) !important;
box-shadow:0 14px 28px -6px rgba(255,207,4,.60);
}
/* CTA secondaire (ghost) : texte cyan sur fond blanc + contour cyan, halo jaune léger au hover. */
#jp-pilier-do-root .sf-content a.jp-pc-cta--ghost{
color:var(--terracotta) !important;background:var(--paper) !important;border-radius:4px;
border:2px solid var(--terracotta);box-shadow:none;
}
#jp-pilier-do-root .sf-content a.jp-pc-cta--ghost:hover{
color:#fff !important;background:var(--terracotta) !important;border-color:var(--terracotta);
box-shadow:0 12px 26px -6px rgba(255,207,4,.50);
}
/* badge-row : items en couleur de texte normale, hover cyan, jamais soulignés. */
#jp-pilier-do-root .sf-content a.jp-badgerow-item{color:var(--ink-2) !important;border-radius:0}
#jp-pilier-do-root .sf-content a.jp-badgerow-item:hover{color:var(--terracotta) !important;background:transparent !important}
#jp-pilier-do-root .sf-content a.jp-badgerow-item .jp-badgerow-name{color:var(--ink) !important}
/* Score CYAN même dans un badge cliquable (aligné sur .sf-trust-card-score du hub). */
#jp-pilier-do-root .sf-content a.jp-badgerow-item .jp-badgerow-score{color:var(--terracotta) !important}
/* b) Nos (feature-grid familles + pricing options) ne doivent PAS hériter du look
des FAQ (.sf-section details : fond cream, bordure peach à l'ouverture, padding
60px, marqueurs ::before "?" et ::after "+"). On remet à plat + on tue les marqueurs. */
#jp-pilier-do-root .sf-section details.jp-fg-fam,
#jp-pilier-do-root .sf-section details.jp-pc-options{
background:var(--paper);border:1px solid var(--module-border);
border-radius:16px;box-shadow:none;margin-bottom:0;overflow:hidden;
}
#jp-pilier-do-root .sf-section details.jp-fg-fam[open],
#jp-pilier-do-root .sf-section details.jp-pc-options[open]{
background:var(--paper);border-color:var(--module-border);box-shadow:none;
}
#jp-pilier-do-root .sf-section details.jp-pc-options{background:var(--cream);border-color:var(--cream-2)}
#jp-pilier-do-root .sf-section details.jp-pc-options[open]{background:var(--cream);border-color:var(--cream-2)}
/* summaries de nos modules : padding propre + on supprime les marqueurs globaux "?" / "+". */
#jp-pilier-do-root .sf-section details.jp-fg-fam > summary.jp-fg-fam-head{padding:16px 20px}
#jp-pilier-do-root .sf-section details.jp-pc-options > summary{padding:14px 20px}
#jp-pilier-do-root .sf-section details.jp-fg-fam > summary::before,
#jp-pilier-do-root .sf-section details.jp-fg-fam > summary::after,
#jp-pilier-do-root .sf-section details.jp-pc-options > summary::before{content:none !important;display:none !important}
/* on garde NOTRE chevron ::after sur l'options summary (défini plus haut) — on le ré-affirme. */
#jp-pilier-do-root .sf-section details.jp-pc-options > summary::after{
content:"" !important;display:block !important;
width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
transform:rotate(45deg);position:static;color:transparent;font-size:0;
}
#jp-pilier-do-root .sf-section details.jp-pc-options[open] > summary::after{transform:rotate(-135deg)}
/* la règle globale `.sf-section details > p{padding-left:60px}` ne doit pas décaler nos . */
#jp-pilier-do-root .sf-section details.jp-fg-fam .jp-fg-fam-body p,
#jp-pilier-do-root .sf-section details.jp-pc-options .jp-pc-options-body p{padding-left:0;padding-right:0}
/* ===== Bande de preuve LO : pied de source sous les compteurs ===== */
#jp-pilier-do-root .sf-lo-bridge-srcfoot{text-align:center;font-size:12px;color:var(--mute);font-style:italic;margin:20px 0 0}
/* ===== Visuel howto "Comment ca marche" (page de vente LO) - parcours 3 temps, 100% SSR ===== */
#jp-pilier-do-root .sf-lo-howto{padding:30px 0 20px}
#jp-pilier-do-root .sf-lo-howto-inner{max-width:1140px;margin:0 auto;padding:0 28px}
#jp-pilier-do-root .sf-lo-howto-head{text-align:center;max-width:720px;margin:0 auto 40px}
#jp-pilier-do-root .sf-lo-howto-kicker{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 14px;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}
#jp-pilier-do-root .sf-lo-howto-kicker::before,#jp-pilier-do-root .sf-lo-howto-kicker::after{content:"";width:28px;height:2px;border-radius:2px;background:var(--terracotta);flex:0 0 auto}
#jp-pilier-do-root .sf-lo-howto-title{font-family:'DM Sans',sans-serif;font-size:clamp(23px,3vw,32px);line-height:1.16;color:var(--ink);margin:0 0 12px;font-weight:800;letter-spacing:-.01em}
#jp-pilier-do-root .sf-lo-howto-sub{font-size:16px;line-height:1.62;color:var(--ink-2);margin:0}
#jp-pilier-do-root .sf-lo-howto-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
#jp-pilier-do-root .sf-lo-howto-steps::before{content:"";position:absolute;top:33px;left:16.66%;right:16.66%;height:2px;background:linear-gradient(90deg,var(--terracotta-soft),var(--terracotta) 50%,var(--terracotta-soft));z-index:0}
#jp-pilier-do-root .sf-lo-howto-step{position:relative;z-index:1;text-align:center}
#jp-pilier-do-root .sf-lo-howto-medal{width:66px;height:66px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper);border:2px solid var(--terracotta);color:var(--terracotta);box-shadow:0 10px 22px -10px rgba(0,163,221,.45)}
#jp-pilier-do-root .sf-lo-howto-medal svg{width:28px;height:28px}
#jp-pilier-do-root .sf-lo-howto-step--key .sf-lo-howto-medal{background:var(--ink);border-color:var(--ink);color:var(--sage);box-shadow:0 0 0 4px var(--sage-soft),0 14px 28px -10px rgba(10,27,51,.5)}
#jp-pilier-do-root .sf-lo-howto-num{display:block;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--terracotta);margin:0 0 7px}
#jp-pilier-do-root .sf-lo-howto-step--key .sf-lo-howto-num{color:var(--ink)}
#jp-pilier-do-root .sf-lo-howto-step-title{font-family:'DM Sans',sans-serif;font-size:19px;font-weight:700;color:var(--ink);margin:0 0 9px;line-height:1.25}
#jp-pilier-do-root .sf-lo-howto-step-text{font-size:14.5px;line-height:1.6;color:var(--mute);margin:0 auto;max-width:31ch}
@media (max-width:860px){
#jp-pilier-do-root .sf-lo-howto{padding:18px 0 8px}
#jp-pilier-do-root .sf-lo-howto-head{margin-bottom:26px}
#jp-pilier-do-root .sf-lo-howto-steps{grid-template-columns:1fr;gap:0;max-width:460px}
#jp-pilier-do-root .sf-lo-howto-steps::before{top:40px;bottom:40px;left:32px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--terracotta-soft),var(--terracotta) 50%,var(--terracotta-soft))}
#jp-pilier-do-root .sf-lo-howto-step{display:grid;grid-template-columns:auto 1fr;gap:18px;text-align:left;align-items:start;padding:14px 0}
#jp-pilier-do-root .sf-lo-howto-medal{margin:0}
#jp-pilier-do-root .sf-lo-howto-step-text{max-width:none}
#jp-pilier-do-root .sf-lo-howto-body{padding-top:6px}
}
/* ===== RESTAURATION LO (etat valide 2026-06-05) — carte chiffres + boutons charte, PRIORITAIRE =====
Re-declare les regles LO ecrasees par un redeploiement concurrent du fichier partage.
A re-appliquer apres chaque ecrasement (strategie : resync avant deploiement). */
#jp-pilier-do-root .sf-lo-bridge-inner{max-width:1232px;margin:0 auto;padding:34px 28px 30px;background:var(--paper);border:1px solid var(--module-border);border-radius:24px}
#jp-pilier-do-root .sf-lo-bridge-num{font-size:clamp(2.6rem,4.4vw,3.4rem) !important;font-weight:800;line-height:1;letter-spacing:-0.035em;font-variant-numeric:tabular-nums;color:var(--terracotta)}
#jp-pilier-do-root .sf-content a.jp-pc-cta,#jp-pilier-do-root .sf-content a.jp-pc-cta--ghost{border-radius:10px !important}
/* ============================================================================
REFONTE MENU + FOOTER — 2026-06-05 (chef de projet). Bloc consolidé en FIN de
fichier. NE TOUCHE AUCUN sélecteur logiciel.
v3 (équilibre validé Thomas) : cartes color-codées PAR UNIVERS (Téléopérateurs &
Guides = jaune, reste cyan) ; colonnes à hauteur égale ; la colonne à 2 cartes les
répartit haut/bas (space-between) pour remplir ; carte seule remplit sa colonne ;
titre sur fond JAUNE en foncé (lisible).
============================================================================ */
/* 1) POSITION — méga centré sur le viewport (via .jp-header-main-inner). */
.jp-header-main-inner{position:relative}
.jp-nav-item{position:static}
.jp-mega::after{display:none}
/* 2+3) SOLUTIONS & RESSOURCES — cartes par univers, colonnes à hauteur égale. */
.jp-mega-solutions{width:1040px;max-width:96vw;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.jp-mega-ressources{width:960px;max-width:96vw;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.jp-mega-solutions .jp-mega-col,.jp-mega-ressources .jp-mega-col{padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.jp-mega-solutions .jp-mega-group,.jp-mega-ressources .jp-mega-group{
display:flex;flex-direction:column;justify-content:flex-start;
background:var(--terracotta-soft);border-radius:14px;padding:18px 20px;margin:0}
.jp-mega-solutions .jp-mega-col > .jp-mega-group:only-child,
.jp-mega-ressources .jp-mega-col > .jp-mega-group:only-child{flex:1}
.jp-mega-solutions .jp-mega-group[data-color="yellow"],.jp-mega-ressources .jp-mega-group[data-color="yellow"]{background:#FFF7DA}
/* titre sur fond JAUNE : foncé + lisible (jamais jaune sur jaune) */
.jp-mega-group[data-color="yellow"] .jp-mega-title{color:var(--ink);border-bottom-color:rgba(217,168,0,.55)}
.jp-mega-solutions .jp-mega-item,.jp-mega-ressources .jp-mega-item{text-align:left;flex:0 0 auto}
.jp-mega-solutions .jp-mega-item-icon,.jp-mega-ressources .jp-mega-item-icon{width:44px;height:44px}
.jp-mega-solutions .jp-mega-item:hover,.jp-mega-ressources .jp-mega-item:hover{background:rgba(255,255,255,.65)}
.jp-mega-title[data-color="yellow"]{color:#D9A800;border-bottom-color:rgba(217,168,0,.30)}
/* 3bis) COMPACITÉ (méga moins haut) + FIT ÉCRAN (jamais coupé hors écran : scroll si besoin). */
.jp-mega{max-height:calc(100vh - 165px);overflow-y:auto;overflow-x:hidden}
.jp-mega-solutions .jp-mega-item,.jp-mega-ressources .jp-mega-item{padding:4px 10px}
.jp-mega-solutions .jp-mega-item-icon,.jp-mega-ressources .jp-mega-item-icon{width:38px;height:38px}
.jp-mega-solutions .jp-mega-item-text strong,.jp-mega-ressources .jp-mega-item-text strong,
.jp-mega-solutions .jp-mega-item-text small,.jp-mega-ressources .jp-mega-item-text small{line-height:1.25}
.jp-mega-solutions .jp-mega-group,.jp-mega-ressources .jp-mega-group{padding:16px 18px;gap:9px}
/* la liste « Entreprises » (colonne à 1 carte de Solutions) respire + remplit (vide en bas discret) */
.jp-mega-solutions .jp-mega-col > .jp-mega-group:only-child{gap:18px}
.jp-mega-solutions .jp-mega-title,.jp-mega-ressources .jp-mega-title{margin-bottom:10px;padding-bottom:6px}
#jp-pilier-do-root .jp-mega{max-height:calc(100vh - 165px) !important;overflow-y:auto !important;overflow-x:hidden !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-item,#jp-pilier-do-root .jp-mega-ressources .jp-mega-item{padding:4px 10px !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-item-icon,#jp-pilier-do-root .jp-mega-ressources .jp-mega-item-icon{width:38px !important;height:38px !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-item-text strong,#jp-pilier-do-root .jp-mega-ressources .jp-mega-item-text strong,
#jp-pilier-do-root .jp-mega-solutions .jp-mega-item-text small,#jp-pilier-do-root .jp-mega-ressources .jp-mega-item-text small{line-height:21px !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-group,#jp-pilier-do-root .jp-mega-ressources .jp-mega-group{padding:16px 18px !important;gap:9px !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-col > .jp-mega-group:only-child{gap:18px !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-title,#jp-pilier-do-root .jp-mega-ressources .jp-mega-title{margin:0 auto 10px !important;padding-bottom:6px !important}
/* 4) FOOTER EXHAUSTIF. */
.sf-footer-top{grid-template-columns:1.1fr 1.7fr 1fr 1fr 1.15fr;gap:40px}
.sf-footer-group + .sf-footer-group{margin-top:24px}
.sf-footer-col-wide .sf-footer-list-2up{columns:2;column-gap:26px}
.sf-footer-list-2up li{break-inside:avoid}
@media (max-width:1099px){.sf-footer-col-wide .sf-footer-list-2up{columns:1}}
@media (max-width:900px){.sf-footer-top{grid-template-columns:1fr 1fr}}
/* 5) PARITÉ PILIERS (#jp-pilier-do-root). */
#jp-pilier-do-root .jp-mega-solutions{width:1040px !important;max-width:96vw !important;align-items:stretch !important}
#jp-pilier-do-root .jp-mega-ressources{width:960px !important;max-width:96vw !important;align-items:stretch !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-col,
#jp-pilier-do-root .jp-mega-ressources .jp-mega-col{padding:0 !important;display:flex !important;flex-direction:column !important;justify-content:space-between !important;gap:16px !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-group,
#jp-pilier-do-root .jp-mega-ressources .jp-mega-group{display:flex !important;flex-direction:column !important;justify-content:flex-start !important;background:var(--terracotta-soft) !important;border-radius:14px !important;padding:18px 20px !important;margin:0 !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-col > .jp-mega-group:only-child,
#jp-pilier-do-root .jp-mega-ressources .jp-mega-col > .jp-mega-group:only-child{flex:1 !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-group[data-color="yellow"],
#jp-pilier-do-root .jp-mega-ressources .jp-mega-group[data-color="yellow"]{background:#FFF7DA !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-title,
#jp-pilier-do-root .jp-mega-ressources .jp-mega-title{
font-size:18px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:0 !important;
color:#00A4DD !important;border-bottom:2px solid #00A4DD !important;padding-bottom:8px !important;
display:inline-block !important;margin:0 auto 14px !important;text-align:center !important}
#jp-pilier-do-root .jp-mega-group[data-color="yellow"] .jp-mega-title{color:#0A1B33 !important;border-bottom-color:#D9A800 !important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-item,
#jp-pilier-do-root .jp-mega-ressources .jp-mega-item{text-align:left !important;flex:0 0 auto !important}
/* Footer pilier : 4 colonnes. */
#jp-pilier-do-root .sf-footer-top{grid-template-columns:1.1fr 1.7fr 1fr 1fr 1.15fr !important;gap:40px !important;align-items:start !important}
#jp-pilier-do-root .sf-footer-group + .sf-footer-group{margin-top:24px !important}
#jp-pilier-do-root .sf-footer-col-wide .sf-footer-list-2up{columns:2 !important;column-gap:26px !important}
#jp-pilier-do-root .sf-footer-list-2up li{break-inside:avoid !important}
@media (max-width:1099px){
#jp-pilier-do-root .sf-footer-col-wide .sf-footer-list-2up{columns:1 !important}
#jp-pilier-do-root .sf-footer-top{grid-template-columns:repeat(4,1fr) !important;gap:28px 24px !important}
#jp-pilier-do-root .sf-footer-brand-block{grid-column:1 / -1 !important}
}
@media (max-width:639px){
#jp-pilier-do-root .sf-footer-top{grid-template-columns:1fr !important;gap:24px !important}
#jp-pilier-do-root .sf-footer-brand-block{text-align:center !important;align-items:center !important}
}
/* 6) PHOTOS DANS LE MENU (vignettes carrées + 2 grandes photos « Nos services ») — 2026-06-06.
Les anciennes icônes plates deviennent des photos rognées (object-fit:cover). Bat le compactage 38px. */
.jp-mega-solutions .jp-mega-item-icon,.jp-mega-ressources .jp-mega-item-icon,.jp-mega-services .jp-mega-item-icon{
width:56px;height:56px;min-width:56px;border-radius:12px;overflow:hidden;flex:0 0 auto;background:#e8eef3;padding:0;display:block}
.jp-mega-solutions .jp-mega-item-icon img,.jp-mega-ressources .jp-mega-item-icon img,.jp-mega-services .jp-mega-item-icon img{
width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;max-width:none}
.jp-mega-solutions .jp-mega-item,.jp-mega-ressources .jp-mega-item,.jp-mega-services .jp-mega-item{align-items:center}
.jp-mega-svc-photo{display:block;width:100%;height:148px;object-fit:cover;border-radius:14px;margin:2px 0 12px}
.jp-mega-services .jp-mega-btn img{width:44px;height:44px;border-radius:9px;object-fit:cover}
.jp-drawer-item-icon{width:52px;height:52px;min-width:52px;border-radius:11px;overflow:hidden;flex:0 0 auto;padding:0;background:#e8eef3}
.jp-drawer-item-icon img{width:100%;height:100%;object-fit:cover;border-radius:11px;display:block;max-width:none}
.jp-drawer-action-icon{width:54px;height:54px;min-width:54px;border-radius:11px;overflow:hidden;padding:0}
.jp-drawer-action-icon img{width:100%;height:100%;object-fit:cover;border-radius:11px;display:block;max-width:none}
.jp-drawer-tools-item-icon{width:46px;height:46px;min-width:46px;border-radius:10px;overflow:hidden;padding:0}
.jp-drawer-tools-item-icon img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block;max-width:none}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-item-icon,#jp-pilier-do-root .jp-mega-ressources .jp-mega-item-icon,#jp-pilier-do-root .jp-mega-services .jp-mega-item-icon{
width:56px!important;height:56px!important;min-width:56px!important;border-radius:12px!important;overflow:hidden!important;background:#e8eef3!important;padding:0!important}
#jp-pilier-do-root .jp-mega-solutions .jp-mega-item-icon img,#jp-pilier-do-root .jp-mega-ressources .jp-mega-item-icon img,#jp-pilier-do-root .jp-mega-services .jp-mega-item-icon img{
width:100%!important;height:100%!important;object-fit:cover!important;border-radius:12px!important;max-width:none!important}
#jp-pilier-do-root .jp-mega-svc-photo{display:block!important;width:100%!important;height:148px!important;object-fit:cover!important;border-radius:14px!important;margin:2px 0 12px!important}
/* 6b) NOS SERVICES — équilibre validé Thomas 2026-06-06 (photos généreuses, textes qui
s'enroulent — fini la collision nowrap —, boutons compacts à vignette, marges aérées). */
.jp-mega-services{width:1260px;max-width:96vw;grid-template-columns:minmax(0,1fr) 380px;gap:26px;padding:30px 34px}
.jp-mega-services .jp-mega-relation-grid{gap:34px}
.jp-mega-services .jp-mega-item-text strong{white-space:normal;line-height:1.3;font-size:16.5px;font-weight:700;margin:0 0 6px}
.jp-mega-services .jp-mega-item-text small{white-space:normal;line-height:1.45;font-size:13.5px}
.jp-mega-svc-photo{width:100%;height:155px;object-fit:cover;border-radius:14px;margin:0 0 14px;display:block}
.jp-mega-col-relation .jp-mega-subcol{justify-content:flex-start}
.jp-mega-col-relation .jp-mega-item{align-items:flex-start;background:none}
.jp-mega-col-relation .jp-mega-btn{height:auto;margin-top:auto}
.jp-mega-services .jp-mega-btn img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.jp-mega-col-tools .jp-mega-item-icon{width:52px;height:52px;min-width:52px}
#jp-pilier-do-root .jp-mega-services{width:1260px!important;max-width:96vw!important;grid-template-columns:minmax(0,1fr) 380px!important;gap:26px!important;padding:30px 34px!important}
#jp-pilier-do-root .jp-mega-services .jp-mega-relation-grid{gap:34px!important}
#jp-pilier-do-root .jp-mega-services .jp-mega-item-text strong{white-space:normal!important;line-height:1.3!important;font-size:16.5px!important;font-weight:700!important;margin:0 0 6px!important}
#jp-pilier-do-root .jp-mega-services .jp-mega-item-text small{white-space:normal!important;line-height:1.45!important;font-size:13.5px!important;font-style:italic!important}
#jp-pilier-do-root .jp-mega-svc-photo{width:100%!important;height:155px!important;object-fit:cover!important;border-radius:14px!important;margin:0 0 14px!important;display:block!important}
#jp-pilier-do-root .jp-mega-col-relation .jp-mega-subcol{justify-content:flex-start!important}
#jp-pilier-do-root .jp-mega-col-relation .jp-mega-item{align-items:flex-start!important;padding:0!important;margin:0!important;flex:0 0 auto!important;background:none!important}
#jp-pilier-do-root .jp-mega-col-relation .jp-mega-btn{height:auto!important;padding:12px 18px!important;gap:14px!important;margin-top:auto!important}
#jp-pilier-do-root .jp-mega-services .jp-mega-btn img{width:48px!important;height:48px!important;border-radius:10px!important;object-fit:cover!important}
#jp-pilier-do-root .jp-mega-col-tools{padding:24px 20px 26px!important}
#jp-pilier-do-root .jp-mega-col-tools .jp-mega-item{align-items:center!important;padding:9px 8px!important}
#jp-pilier-do-root .jp-mega-col-tools .jp-mega-item-icon{width:52px!important;height:52px!important;min-width:52px!important}
/* 6c) NOS SERVICES v3 — compact validé Thomas (2026-06-06) : modale ≈ son contenu (fin du vide
fantôme), gap maîtrisé ~18 px au-dessus des boutons, PHOTOS CLIQUABLES (photo+texte = 1 seul
lien .jp-mega-svc-link), bouton plus court, tête téléopératrice entière (object-position top).
Alignement boutons = bas carte « Nos outils » : relcol pilote la hauteur, tools s'étire (écart 0 vérifié). */
.jp-mega-services{min-height:0}
.jp-mega-col-relation > .jp-mega-title{margin:0 0 22px}
.jp-mega-col-relation .jp-mega-subcol{justify-content:flex-start}
.jp-mega-svc-link{flex-direction:column;align-items:stretch;padding:0;text-decoration:none;color:inherit}
.jp-mega-svc-link:hover{background:transparent}
.jp-mega-svc-link:hover .jp-mega-svc-photo{filter:brightness(1.03)}
.jp-mega-svc-photo{width:100%;height:155px;object-fit:cover;border-radius:14px;margin:0 0 12px;display:block}
.jp-mega-col-relation .jp-mega-btn{height:auto;margin-top:16px;padding:9px 16px}
.jp-mega-services .jp-mega-btn img{width:40px;height:40px;border-radius:9px;object-fit:cover}
.jp-mega-col-tools{justify-content:flex-start}
.jp-mega-relation-grid .jp-mega-subcol:last-child .jp-mega-svc-photo{object-position:center top}
#jp-pilier-do-root .jp-mega-services{min-height:0!important}
#jp-pilier-do-root .jp-mega-col-relation > .jp-mega-title{margin:0 0 22px!important}
#jp-pilier-do-root .jp-mega-col-relation .jp-mega-subcol{justify-content:flex-start!important}
#jp-pilier-do-root .jp-mega-svc-link{flex-direction:column!important;align-items:stretch!important;padding:0!important;text-decoration:none!important;color:inherit!important}
#jp-pilier-do-root .jp-mega-svc-photo{width:100%!important;height:155px!important;object-fit:cover!important;border-radius:14px!important;margin:0 0 12px!important;display:block!important}
#jp-pilier-do-root .jp-mega-col-relation .jp-mega-btn{height:auto!important;margin-top:16px!important;padding:9px 16px!important}
#jp-pilier-do-root .jp-mega-services .jp-mega-btn img{width:40px!important;height:40px!important;border-radius:9px!important;object-fit:cover!important}
#jp-pilier-do-root .jp-mega-col-tools{justify-content:flex-start!important}
#jp-pilier-do-root .jp-mega-relation-grid .jp-mega-subcol:last-child .jp-mega-svc-photo{object-position:center top!important}
/* ===== FIN refonte menu + footer 2026-06-05 ===== */