/* ============================================================
123web — PREMIUM 2026 (couche finale, chargée après ds-2026 et mockups-2026)
Objectif : moins de signaux, plus de tenue. Une seule règle par famille :
3 graisses (400/500/600) · 8 tailles · 1 accent (magenta) · 0 dégradé sur
les composants · 0 ombre portée (filets 1 px) · capitales réservées aux
étiquettes mono 12 px · 1 dispositif d'emphase (cadre pointillé + étiquette).
Rollback = retirer la balise dans les doctype*.tpl (+ lexique-hub/definition).
DÉPLOYÉ EN PROD le 21/09/2026 (v32). Historique : ~/dev/123web-local/CHANGELOG.md · harnais : premium/README.md
Conventions : sélecteurs préfixés `html body` (ds-2026 l'utilise), surcharges en !important, sections numérotées
1-24 (typo, surfaces, boutons, header, plans, contenu, bandeaux, footer, mouvement, mobile, FAQ, cartes, rythme,
FAQ v2, hero, gabarits récents, articles/mobile nav, grille pid139, footer bas/hub, mobile tableaux, contraste,
sections à dégradé inline, reliquats, footer sans soulignement). Bumper `?v=` dans les tpl à chaque modif.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');
:root {
--p-font-head: "Inter Tight", "Poppins", system-ui, sans-serif;
--p-font-body: "Inter", "Poppins", system-ui, sans-serif;
--p-ink: #171940; /* navy : titres, boutons sombres */
--p-text: #2b2c4a; /* texte courant */
--p-muted: #5b5f73; /* texte secondaire */
--p-accent: #d13076; /* magenta : action, flèches, étiquettes */
--p-accent-deep: #b02362;
--p-paper: #ffffff;
--p-mist: #f4f5fa; /* fond de section clair */
--p-line: #e6e8f0; /* filet */
--p-line-strong: #cfd3e0;
--p-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--p-r: 12px; /* rayon composants */
--p-r-lg: 20px; /* rayon cartes */
--p-ease: cubic-bezier(.22, .61, .36, 1);
}
/* ------------------------------------------------------------
1. TYPOGRAPHIE — 3 graisses, 8 tailles, titres medium serrés
------------------------------------------------------------ */
html body { color: var(--p-text); font-weight: 400; font-size: 16px; line-height: 1.6; font-family: var(--p-font-body) !important; }
html body p, html body li, html body td, html body label, html body input, html body textarea, html body select, html body .btn, html body a { font-family: var(--p-font-body); }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4,
html body h1[class], html body h2[class], html body h3[class], html body h4[class],
html body h1.font-weight-bold, html body h2.font-weight-bold, html body h3.font-weight-bold, html body h4.font-weight-bold,
html body h1.font-weight-semibold, html body h2.font-weight-semibold, html body h3.font-weight-semibold, html body h4.font-weight-semibold,
html body h2.font-weight-normal, html body h2.font-weight-extra-bold, html body h2.font-weight-light {
color: var(--p-ink) !important;
font-family: var(--p-font-head) !important;
font-weight: 500 !important;
letter-spacing: -0.02em;
text-transform: none !important;
line-height: 1.1;
}
html body h1, html body .h1, html body h1[class] { font-size: 40px !important; line-height: 1.08; letter-spacing: -0.025em; }
html body h2, html body .h2 { font-size: 32px !important; }
html body h3, html body .h3 { font-size: 24px !important; line-height: 1.2; }
html body h4, html body .h4 { font-size: 18px !important; line-height: 1.3; }
html body h5, html body h6 { font-size: 16px !important; }
@media (min-width: 992px) {
body h1, html body .h1, html body h1[class] { font-size: 46px !important; }
body h2, html body .h2, html body h2[class] { font-size: 36px !important; }
}
html body h2[class], html body .h2 { font-size: 32px !important; }
html body h3[class] { font-size: 24px !important; }
html body h4[class] { font-size: 18px !important; }
/* sous-ligne dans un H1 (ex. "/mois") : même graisse, plus petit */
html body h1 span, html body h1 small, html body h1 span.font-weight-light, html body h1 span[class] { font-weight: 500 !important; color: var(--p-muted) !important; }
/* Le gras devient 600 partout (700/800/900 disparaissent) */
html body strong, html body b, html body th, html body .font-weight-bold, html body .font-weight-semibold,
html body .font-weight-extra-bold, html body .fw-bold, html body dt { font-weight: 600 !important; }
html body .font-weight-light, html body .font-weight-normal, html body .fw-light, html body em { font-weight: 400 !important; }
html body p, html body li, html body td, html body label { font-weight: 400; }
html body p.lead, html body .lead { font-weight: 400 !important; font-size: 18px !important; color: var(--p-muted); }
/* Les "sous-titres" H2 en light 31 px (Porto) : redeviennent du texte courant */
html body h1 + h2, html body h1 + div > h2, html body .appear-animation > h1 + h2 {
font-size: 20px !important; font-weight: 400 !important; color: var(--p-muted) !important;
letter-spacing: 0; line-height: 1.5;
}
/* Petits titres en capitales gris (h2.text-4 uppercase) → étiquette mono */
html body h2.custom-text-color-grey-1.text-4, html body .text-uppercase.text-4,
html body h4.font-weight-bold.text-color-light.text-5.ls-0,
html body .p-label {
font-family: var(--p-mono) !important; font-size: 12px !important; font-weight: 500 !important;
letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--p-accent) !important;
display: inline-flex; align-items: center; gap: 8px;
}
html body h2.custom-text-color-grey-1.text-4::before, html body .p-label::before {
content: ""; width: 7px; height: 7px; background: var(--p-accent); border-radius: 1px; display: inline-block;
}
/* Soulignement "signature" en dégradé sous les H2 (ds-2026 §8.4) : retiré */
html body h2::after, html body h2.text-7::after, html body .text-center h2.text-7::after { display: none !important; }
/* Texte en dégradé (prix XXL) : texte plein */
html body .price, html body .plan-price .price, html body .plan-header strong.text-5, html body .gradient-text-color,
html body strong.text-5, html body .counter strong {
background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important;
-webkit-text-fill-color: currentColor !important; color: var(--p-ink) !important;
}
/* Couleurs de texte "thème" (rose/violet/bleu/vert) : une seule encre, l'accent pour les liens */
html body .text-color-primary, html body .text-color-secondary, html body .text-color-tertiary, html body .text-color-quaternary,
html body .text-primary, html body .text-secondary, html body .text-success, html body .text-info, html body .custom-text-color-1 { color: var(--p-ink) !important; }
html body a.text-color-primary, html body a.text-color-secondary, html body a.text-color-tertiary, html body a.text-color-quaternary,
html body a.text-primary, html body a.text-success { color: var(--p-accent) !important; }
html body p a:not(.btn), html body li a:not(.btn), html body td a:not(.btn) { color: var(--p-accent); text-decoration: none; }
html body p a:not(.btn):hover, html body li a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
html body .text-color-light, html body .text-light { color: #fff !important; }
html body .custom-text-color-grey-1 { color: var(--p-muted) !important; }
/* ------------------------------------------------------------
2. SURFACES — 0 dégradé sur les composants, 0 ombre, filets 1 px
------------------------------------------------------------ */
html body .card, html body .plan, html body .custom-box-shadow-1, html body .box-shadow-1, html body .box-shadow-2, html body .box-shadow-3,
html body .custom-box-shadow-2, html body .featured-box, html body .accordion .card, html body .w26-card, html body .w26-tile {
box-shadow: none !important; border: 1px solid var(--p-line) !important; border-radius: var(--p-r-lg) !important;
background-image: none !important;
}
html body .card:hover, html body .plan:hover, html body .featured-box:hover { box-shadow: none !important; transform: none !important; border-color: var(--p-line-strong) !important; }
html body img.mt-0.lazyloaded, html body .img-thumbnail, html body img.shadow, html body img.box-shadow-1 { box-shadow: none !important; }
html body .custom-border-radius-1 { border-radius: var(--p-r-lg) !important; }
html body .dropdown-menu { box-shadow: none !important; border: 1px solid var(--p-line) !important; border-radius: var(--p-r) !important; }
/* Décor de fond : formes SVG animées du hero, cercles flous Porto, blobs/points/anneaux des mockups */
html body svg.custom-svg-style-1, html body .custom-svg-style-1, html body .custom-svg-style-2 { display: none !important; }
html body .custom-circle, html body .w26mk-blob, html body .w26mk-dot, html body .w26mk-ring,
html body .custom-bg-circle, html body .bg-circle, html body [class*="custom-circle-pos"] { display: none !important; }
html body .w26mk-float, html body .w26mk-float2, html body .w26mk-float3 { animation: none !important; transform: none !important; }
/* Le mockup lui-même devient un document posé : filet, sans ombre, cadre pointillé magenta */
html body .w26mk-card { box-shadow: none !important; border: 1px solid var(--p-line-strong) !important; background-image: none !important; }
/* Dispositif d'emphase unique : cadre pointillé + étiquette de coin (à poser sur une image réelle) */
html body .p-frame { position: relative; display: inline-block; border: 1.5px dashed var(--p-accent); padding: 0; border-radius: 4px; }
html body .p-frame img { display: block; border-radius: 3px !important; }
html body .p-frame::after { content: attr(data-label); position: absolute; right: -1.5px; bottom: -22px; background: var(--p-accent); color: #fff; font: 500 11px/1 var(--p-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 0 0 4px 4px; }
html body .w26mk-pin { box-shadow: none !important; border: 1px solid var(--p-line-strong) !important; background-image: none !important; }
html body .mk1-shot, html body .mk1-mob__hero, html body .mk1-mark { background-image: none !important; background-color: var(--p-ink) !important; }
/* Sections : fonds plats (le violet dégradé devient navy) */
html body section.section, html body .section { background-image: none !important; }
html body .bg-color-secondary, html body section.bg-color-secondary { background: var(--p-ink) !important; }
html body .bg-color-tertiary, html body .bg-color-dark, html body .bg-color-primary { background-image: none !important; }
html body .custom-bg-color-light-1, html body .custom-bg-color-light-2, html body .bg-color-light-scale-1 { background: var(--p-mist) !important; background-image: none !important; }
html body .bg-color-light { background: var(--p-paper) !important; }
/* ------------------------------------------------------------
3. BOUTONS — 1 plein (magenta), 1 sombre (navy), 1 contour. Pas de dégradé, pas de saut.
------------------------------------------------------------ */
html body .btn {
font-weight: 600 !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important;
border-radius: var(--p-r) !important; padding: 12px 22px !important; box-shadow: none !important; background-image: none !important;
transition: background-color .25s var(--p-ease), border-color .25s var(--p-ease), color .25s var(--p-ease) !important;
line-height: 1.2 !important;
}
html body .btn:hover, html body .btn:focus { transform: none !important; box-shadow: none !important; }
html body .btn.btn-rounded, html body .btn.rounded-0 { border-radius: var(--p-r) !important; }
html body .btn-primary, html body .btn-gradient, html body .btn.btn-gradient, html body .btn-quaternary, html body .btn-success, html body .btn-secondary2, html body .btn.btn-secondary2 {
background: var(--p-accent) !important; border-color: var(--p-accent) !important; color: #fff !important;
}
html body .btn-primary:hover, html body .btn-gradient:hover, html body .btn-quaternary:hover, html body .btn-success:hover, html body .btn-secondary2:hover { background: var(--p-accent-deep) !important; border-color: var(--p-accent-deep) !important; color: #fff !important; }
html body .btn-dark, html body .btn-tertiary, html body .btn-secondary:not(.btn-outline) {
background: var(--p-ink) !important; border-color: var(--p-ink) !important; color: #fff !important;
}
html body .btn-dark:hover, html body .btn-tertiary:hover, html body .btn-secondary:not(.btn-outline):hover { background: #0f1030 !important; border-color: #0f1030 !important; }
html body .btn-outline, html body .btn.btn-outline, html body .btn-dark.btn-outline, html body .btn.btn-dark.btn-modern.btn-outline, html body .btn-secondary.btn-outline, html body .btn-light.btn-outline, html body .btn-primary.btn-outline {
background: transparent !important; border: 1px solid var(--p-line-strong) !important; color: var(--p-ink) !important;
}
html body .btn-outline:hover { border-color: var(--p-ink) !important; background: var(--p-mist) !important; color: var(--p-ink) !important; }
/* Sur fond sombre : contour blanc */
html body .bg-color-tertiary .btn-outline, html body .bg-color-secondary .btn-outline, html body .plan-featured .btn-outline, html body #footer .btn-outline {
border-color: rgba(255,255,255,.45) !important; color: #fff !important;
}
html body .bg-color-tertiary .btn-outline:hover, html body .plan-featured .btn-outline:hover { background: rgba(255,255,255,.08) !important; border-color: #fff !important; }
html body .btn.btn-modern { text-transform: none !important; }
/* Balayage lumineux au survol (ds-2026 §8.2) : retiré */
html body .btn::before, html body .btn::after, html body .btn-primary::before, html body .btn-primary::after { display: none !important; }
/* ------------------------------------------------------------
4. HEADER — une ligne, texte en casse normale, une action
------------------------------------------------------------ */
html body #header .header-top { border-bottom: 0 !important; background: var(--p-ink) !important; min-height: 0 !important; }
html body #header .header-top .urgence-message-header, html body #header .header-top .header-social-icons { display: none !important; }
html body #header .header-top .btn { padding: 6px 14px !important; font-size: 13px !important; height: auto !important; min-height: 0 !important; }
html body #header .header-top .btn-secondary { background: transparent !important; border-color: transparent !important; color: rgba(255,255,255,.85) !important; }
html body #header .header-top .btn-secondary:hover { color: #fff !important; }
html body #header .header-top .btn-primary { background: transparent !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; }
html body #header .header-top .btn-primary:hover { background: rgba(255,255,255,.08) !important; }
html body #header .header-top .custom-height-1 { height: 36px !important; }
html body #header .header-body { border-top: 0 !important; box-shadow: none !important; background: #fff !important; }
html body #header .header-nav-main nav > ul > li > a {
font-weight: 500 !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--p-ink) !important;
}
html body #header .header-nav-main nav > ul > li > a::after, html body #header .header-nav-main nav > ul > li > a::before { display: none !important; content: none !important; background: none !important; width: 0 !important; height: 0 !important; }
html body #header .header-nav-main nav > ul > li.active > a, html body #header .header-nav-main nav > ul > li:hover > a { color: var(--p-accent) !important; background: transparent !important; }
html body #header .header-nav-main nav > ul > li > a.dropdown-toggle::after { display: none !important; }
html body #header .header-nav-main nav > ul > li.dropdown .dropdown-menu { padding: 8px !important; }
html body #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
font-size: 14px !important; font-weight: 400 !important; text-transform: none !important; color: var(--p-ink) !important; border-radius: 8px; padding: 9px 12px !important; border: 0 !important;
}
html body #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover { background: var(--p-mist) !important; color: var(--p-accent) !important; }
html.sticky-header-active #header .header-body { box-shadow: none !important; border-bottom: 1px solid var(--p-line) !important; background: rgba(255,255,255,.96) !important; backdrop-filter: saturate(140%) blur(8px); }
/* ------------------------------------------------------------
5. PLANS / TARIFS — carte blanche, filet, 1 bouton plein, 1 contour ; la mise en avant = liseré magenta
------------------------------------------------------------ */
html body .pricing-table .plan, html body .pricing-table .plan.plan-featured { background: #fff !important; background-image: none !important; overflow: hidden; box-shadow: none !important; }
html body .pricing-table .plan.plan-featured { border: 2px solid var(--p-accent) !important; }
html body .plan .plan-header, html body .plan .plan-header.bg-primary, html body .plan .plan-header.ph2, html body .pricing-table .plan.plan-featured .plan-header {
background: var(--p-mist) !important; background-image: none !important; border-bottom: 1px solid var(--p-line) !important; padding: 18px 16px !important; border-radius: 0 !important;
}
html body .pricing-table .plan .plan-header.ph2, html body .pricing-table .plan .plan-header.ph2 *, html body .plan .plan-header h3, html body .plan .plan-header h4, html body .plan .plan-header p, html body .plan .plan-header span, html body .plan .plan-header strong,
html body .plan .plan-header.ph2 h3, html body .plan .plan-header.ph2 span, html body .pricing-table .plan.plan-featured .plan-header h3,
html body .pricing-table .plan.plan-featured .plan-header span, html body .pricing-table .plan.plan-featured .plan-header h4,
html body .pricing-table .plan.plan-featured .plan-header p, html body .pricing-table .plan.plan-featured .plan-header strong { color: var(--p-ink) !important; text-transform: none !important; }
html body .plan .plan-header h3 { font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; }
html body .plan .plan-header h3 .text-2, html body .plan .plan-header.ph2 h3 .text-2, html body .pricing-table .plan.plan-featured .plan-header h3 span {
font-family: var(--p-mono) !important; font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase !important; color: var(--p-muted) !important; font-weight: 500 !important;
}
html body .pricing-table .plan.plan-featured p, html body .pricing-table .plan.plan-featured .plan-features p, html body .pricing-table .plan.plan-featured .plan-features ul li,
html body .pricing-table .plan.plan-featured .plan-features a, html body .pricing-table .plan.plan-featured span.price2, html body .pricing-table .plan.plan-featured .text-3 { color: var(--p-text) !important; }
html body .pricing-table .plan.plan-featured .plan-features a, html body .plan .plan-features a { color: var(--p-accent) !important; }
html body .pricing-table .plan.plan-featured .plan-features ul li::before { background-color: var(--p-mist) !important; }
html body .pricing-table .plan.plan-featured .plan-popular-tag { display: none !important; }
html body .plan-price, html body .plan .plan-price, html body .plan-featured .plan-price { background: none !important; padding: 18px 0 0 !important; }
html body .plan-price .price, html body .plan-featured .plan-price .price, html body .pricing-table .plan.plan-featured .price { font-size: 40px !important; font-weight: 500 !important; letter-spacing: -0.02em; line-height: 1 !important; color: var(--p-ink) !important; }
html body .plan-price .price .price-unit, html body .plan-featured .plan-price .price .price-unit { font-size: 14px !important; font-weight: 400 !important; color: var(--p-muted) !important; letter-spacing: 0; -webkit-text-fill-color: var(--p-muted) !important; }
html body .plan-price .price2, html body .plan-featured .plan-price .price2 { display: block; font-size: 13px !important; color: var(--p-muted) !important; font-weight: 400 !important; margin: 6px 0 12px; }
html body .plan-price.pp3 .price, html body .plan-featured .plan-price.pp3 .price { font-size: 26px !important; }
html body .plan-price .btn, html body .plan-featured .plan-price .btn, html body .pricing-table .plan.plan-featured .plan-footer .btn { width: calc(100% - 32px); margin: 0 16px; box-shadow: none !important; }
html body .plan-price .btn.btn-dark.btn-modern, html body .plan-featured .plan-price .btn.btn-dark.btn-modern, html body .plan-price .btn.btn-primary { background: var(--p-accent) !important; border: 1px solid var(--p-accent) !important; color: #fff !important; }
html body .plan:not(.plan-featured) .btn.btn-dark.btn-modern.btn-outline, html body .plan.plan-featured .btn.btn-dark.btn-modern.btn-outline, html body .plan.plan-featured .plan-footer .btn.btn-outline, html body .plan-price .btn.btn-outline, html body .plan-price .btn.btn-dark.btn-modern.btn-outline, html body .plan-featured .plan-price .btn.btn-outline,
html body .pricing-table .plan.plan-featured .plan-price .btn.btn-outline { background: transparent !important; border: 1px solid var(--p-line-strong) !important; color: var(--p-ink) !important; }
html body .plan-price .btn.btn-outline:hover { border-color: var(--p-ink) !important; background: var(--p-mist) !important; }
html body .plan-features, html body .plan .plan-features { background: none !important; }
html body .plan-features p b, html body .plan-features p strong { font-weight: 500 !important; color: var(--p-muted) !important; }
html body .plan p.text-3 img[alt^="vitesse"] { height: 12px; width: auto; opacity: .85; }
html body .plan p.text-3 { color: var(--p-muted) !important; font-size: 14px !important; }
/* Sous-titre H2 qui suit un H2 : redevient un chapeau */
html body h2 + h2, html body h2 + h2[class] { font-size: 20px !important; font-weight: 400 !important; color: var(--p-muted) !important; letter-spacing: 0; line-height: 1.5; }
/* Ruban diagonal "IMBATTABLE" et badges tournants : neutralisés */
html body .ribbon, html body .plan-ribbon, html body [class*="ribbon"] { display: none !important; }
html body .badge, html body .label { border-radius: 6px !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: .04em; box-shadow: none !important; background-image: none !important; }
/* ------------------------------------------------------------
6. CONTENU — listes, FAQ, images, séparateurs
------------------------------------------------------------ */
html body .list.list-icons li > [class*="fa-"], html body .list-icons li > i { color: var(--p-accent) !important; }
html body .accordion .card { border: 0 !important; border-bottom: 1px solid var(--p-line) !important; border-radius: 0 !important; }
html body .accordion .card-header { background: none !important; padding: 0 !important; }
html body .accordion .card-header a, html body .accordion-toggle { font-weight: 500 !important; font-size: 17px !important; color: var(--p-ink) !important; padding: 18px 40px 18px 0 !important; }
html body .accordion .card-header a:hover { color: var(--p-accent) !important; }
html body .accordion .card-body { color: var(--p-muted); padding: 0 0 20px !important; }
html body img.img-fluid, html body .img-fluid, html body figure img, html body .article img { border-radius: var(--p-r) !important; }
html body hr, html body .divider { border-color: var(--p-line) !important; }
html body .divider::before, html body .divider::after { display: none !important; }
html body .divider i, html body .divider .fa { display: none !important; }
html body .counter, html body .counters .counter { background: none !important; }
html body .progress, html body .progress-bar { border-radius: 4px !important; background-image: none !important; box-shadow: none !important; }
html body .progress-bar { background: var(--p-ink) !important; }
html body .featured-box .box-content { border: 0 !important; }
html body .featured-box .icon-featured, html body .featured-box i { color: var(--p-accent) !important; background: none !important; }
/* Encarts numérotés (pastilles 1, 2, 3) : navy plat, pas de dégradé */
html body .custom-step, html body .step-number, html body .number-circle, html body .w26-num,
html body .bg-primary.rounded-circle, html body .bg-color-primary.rounded-circle { background: var(--p-ink) !important; background-image: none !important; box-shadow: none !important; }
/* ------------------------------------------------------------
7. BANDEAUX SOMBRES (CTA) — navy plat, texte blanc, un bouton
------------------------------------------------------------ */
html body .bg-color-tertiary h1, html body .bg-color-tertiary h2, html body .bg-color-tertiary h3, html body .bg-color-tertiary h4,
html body .bg-color-secondary h2, html body .bg-color-secondary h3, html body .bg-color-secondary p, html body .bg-color-tertiary p,
html body .bg-color-tertiary .text-color-dark, html body .bg-color-secondary .text-color-dark { color: #fff !important; }
html body .bg-color-tertiary p, html body .bg-color-secondary p { color: rgba(255,255,255,.78) !important; }
html body .bg-color-tertiary .form-control, html body .bg-color-secondary .form-control {
border: 1px solid rgba(255,255,255,.18) !important; background: rgba(255,255,255,.06) !important; color: #fff !important; box-shadow: none !important; border-radius: var(--p-r) !important;
}
html body .bg-color-tertiary .form-control::placeholder, html body .bg-color-secondary .form-control::placeholder { color: rgba(255,255,255,.55); }
html body .form-control { border: 1px solid var(--p-line-strong) !important; border-radius: var(--p-r) !important; box-shadow: none !important; padding: 12px 14px !important; font-size: 15px !important; }
html body .form-control:focus { border-color: var(--p-ink) !important; box-shadow: 0 0 0 3px rgba(23,25,64,.10) !important; }
/* ------------------------------------------------------------
8. FOOTER — navy plat, 4 colonnes, hiérarchie sobre
------------------------------------------------------------ */
html body #footer { background: var(--p-ink) !important; background-image: none !important; border-top: 0 !important; }
html body #footer::before, html body #footer::after { display: none !important; }
html body #footer h4, html body #footer h5 { color: #fff !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase !important; font-family: var(--p-mono); }
html body #footer h4::after, html body #footer h5::after, html body #footer .title-underline { display: none !important; }
html body #footer p, html body #footer li, html body #footer a { color: rgba(255,255,255,.72) !important; font-size: 14px !important; font-weight: 400 !important; }
html body #footer a:hover { color: #fff !important; }
html body #footer .footer-copyright { background: #0f1030 !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
html body #footer .social-icons li { box-shadow: none !important; }
html body #footer .social-icons li a { background: rgba(255,255,255,.08) !important; border-radius: 8px !important; }
/* ------------------------------------------------------------
9. MOUVEMENT — entrée douce, pas de rebond
------------------------------------------------------------ */
html body .appear-animation { animation-duration: .7s !important; animation-timing-function: var(--p-ease) !important; }
html body .scroll-to-top { background: var(--p-ink) !important; border-radius: 10px !important; box-shadow: none !important; }
html { scroll-behavior: smooth; }
/* Barre de progression de lecture et scrollbar "signature" (ds-2026 §8.1 / 8.11) : retirées */
html body .w26-readbar, html body #w26-readbar, html body .reading-progress { display: none !important; }
/* ------------------------------------------------------------
10. MOBILE — barre d'appel sobre, rien ne se chevauche
------------------------------------------------------------ */
@media (max-width: 991.98px) {
body h1, html body .h1 { font-size: 34px !important; }
body h2, html body .h2 { font-size: 26px !important; }
body .mobile-callbar { box-shadow: none !important; border-top: 1px solid rgba(255,255,255,.12); }
body .mobile-callbar a { font-weight: 600 !important; font-size: 15px !important; }
body .mobile-callbar .mcb-call { background: var(--p-ink) !important; }
body .mobile-callbar .mcb-devis { background: var(--p-accent) !important; }
body #header .header-top { display: none !important; }
}
/* Surcharges de spécificité (ds-2026 écrit en "html body …") */
html body .pricing-table .plan .plan-header.ph2, html body .pricing-table .plan .plan-header.ph2 h3, html body .pricing-table .plan .plan-header.ph2 h4,
html body .pricing-table .plan .plan-header.ph2 p, html body .pricing-table .plan .plan-header.ph2 span, html body .pricing-table .plan .plan-header.ph2 h3 span,
html body .pricing-table .plan.plan-featured .plan-header h3, html body .pricing-table .plan.plan-featured .plan-header h3 span { color: var(--p-ink) !important; }
html body .pricing-table .plan .plan-header.ph2 h3 span, html body .pricing-table .plan.plan-featured .plan-header h3 span { color: var(--p-muted) !important; }
/* Home : le sous-titre du hero est une phrase, pas une étiquette */
html body h1 + h2.custom-text-color-grey-1.text-4, html body h1 + h2.custom-text-color-grey-1.text-4.text-uppercase {
font-family: inherit !important; font-size: 20px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important;
color: var(--p-muted) !important; display: block; line-height: 1.5;
}
html body h1 + h2.custom-text-color-grey-1.text-4::before { display: none !important; }
/* Hero : moins d'air mort au-dessus du titre */
html body section.section > .container.pt-5.mt-5 { margin-top: 0 !important; padding-top: 32px !important; }
/* Liens "FAQ" dans les cartes tarifs : discrets */
html body .plan .plan-features a.text-4, html body .plan-features a { font-size: 14px !important; }
/* Sections sombres : plat, sans grain ni dégradé */
html body section.section.bg-color-secondary, html body section.section.section-height-3.bg-color-secondary, html body .section.bg-color-quaternary { background: var(--p-ink) !important; }
html body .section.bg-color-secondary::after, html body .section.bg-color-quaternary::after { display: none !important; }
html body section.section.bg-color-secondary .btn-secondary { background: var(--p-accent) !important; }
/* Compteurs home : 3 chiffres posés à plat, pas de bulles colorées */
html body .custom-circles-group-1 { position: static !important; display: flex !important; gap: 12px; height: auto !important; width: auto !important; margin: 0 0 24px; }
html body .custom-circles-group-1 .circle-1, html body .custom-circles-group-1 .circle-2, html body .custom-circles-group-1 .circle-3 {
position: static !important; width: auto !important; height: auto !important; border-radius: var(--p-r) !important; background: var(--p-mist) !important; background-image: none !important;
flex: 1 1 0; padding: 20px 16px !important; display: block !important; transform: none !important; box-shadow: none !important; border: 1px solid var(--p-line);
}
html body .custom-circles-group-1 .counter strong { color: var(--p-ink) !important; font-size: 32px !important; font-weight: 500 !important; -webkit-text-fill-color: var(--p-ink) !important; }
html body .custom-circles-group-1 .counter label { color: var(--p-muted) !important; font-size: 12px !important; font-family: var(--p-mono); letter-spacing: .08em; text-transform: uppercase; font-weight: 500 !important; }
/* Reliquats mesurés (audit_styles.py) : liens à soulignement dégradé, images ombrées, exposants gras, mockups */
html body a:not(.btn), html body a.text-4, html body p a, html body li a, html body i, html body span.w26mk-g { background-image: none !important; }
html body img, html body .img-fluid, html body figure img { box-shadow: none !important; }
html body sup, html body sup.pxbd, html body strong.text-5, html body .w26mk-live, html body .w26mk-pin__t, html body .mk5-kp, html body .mk5-rank, html body .mk5-delta, html body .is-on,
html body span.d-block.appear-animation, html body .counter span { font-weight: 600 !important; }
html body .mk5-rank, html body .mk1-mob.w26mk-float3, html body .w26mk-card *, html body .w26mk-pin * { box-shadow: none !important; }
html body section.section.custom-bg-color-light-1, html body section.section.custom-bg-color-light-1[class], html body .section.custom-bg-color-light-1 { background: var(--p-mist) !important; background-image: none !important; }
html body .btn.btn-secondary.btn-outline.btn-rounded, html body a.btn.btn-secondary.btn-outline.btn-rounded { background: transparent !important; background-image: none !important; border: 1px solid var(--p-line-strong) !important; color: var(--p-ink) !important; }
html body .btn.btn-secondary.btn-outline.btn-rounded:hover { border-color: var(--p-ink) !important; background: var(--p-mist) !important; }
html body ul.dropdown-menu { box-shadow: none !important; }
html body #header .header-nav-main nav > ul > li.dropdown > ul.dropdown-menu, html body #header ul.dropdown-menu { box-shadow: none !important; }
html body div strong.text-5, html body p strong.text-5, html body .plan-header strong.text-5, html body .pricing-table strong.text-5 { font-weight: 600 !important; }
html body .w26mk span, html body .w26mk-card span, html body .mk1-shot span { background-image: none !important; }
/* ------------------------------------------------------------
11. FAQ — liste à filets, question en 17/500, réponse en gris, chevron discret
------------------------------------------------------------ */
html body .accordion, html body .accordion.accordion-modern-status { border-top: 1px solid var(--p-line); }
html body .accordion .card, html body .accordion .card.card-default, html body .accordion-modern-status .card {
border: 0 !important; border-bottom: 1px solid var(--p-line) !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important;
}
html body .accordion .card-header, html body .accordion-modern-status .card-header { background: transparent !important; padding: 0 !important; border: 0 !important; }
html body .accordion .card-header .card-title { margin: 0 !important; }
html body .accordion .card-header a, html body .accordion .card-header a.accordion-toggle, html body .accordion-modern-status .card-header a {
display: block; position: relative; padding: 20px 48px 20px 0 !important; font-family: var(--p-font-head) !important; font-size: 17px !important; font-weight: 500 !important;
color: var(--p-ink) !important; background: transparent !important; border: 0 !important; line-height: 1.4 !important; text-transform: none !important; letter-spacing: -0.005em;
}
html body .accordion .card-header a:hover { color: var(--p-accent) !important; }
html body .accordion .card-header a::before, html body .accordion .card-header a::after,
html body .accordion-modern-status-arrow .card-header a::before, html body .accordion-modern-status-arrow .card-header a::after { display: none !important; content: none !important; }
html body .accordion .card-header a .p-chev, html body .accordion .card-header a::marker { display: none; }
html body .accordion .card-header a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23171940' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 20px !important; transition: color .25s var(--p-ease); }
html body .accordion .card-header a:not(.collapsed) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d13076' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important; color: var(--p-accent) !important; }
html body .accordion .card-body, html body .accordion .card-body.pt-0 { padding: 0 48px 22px 0 !important; color: var(--p-muted) !important; font-size: 15px !important; line-height: 1.65; background: transparent !important; }
html body .accordion .card-body p { color: var(--p-muted) !important; margin-bottom: 10px; }
html body .accordion .card-body p:last-child { margin-bottom: 0; }
html body .accordion .card-body a { color: var(--p-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
/* En-tête de FAQ : titre + chapeau, sans capitales */
html body #faq + .container h3.text-color-primary, html body #faq + .container > .row > .col > h3 { font-size: 32px !important; text-transform: none !important; margin-bottom: 8px !important; }
html body #faq + .container > .row > .col > h4 { font-size: 17px !important; font-weight: 400 !important; color: var(--p-muted) !important; margin-bottom: 28px !important; font-family: var(--p-font-body) !important; }
/* ------------------------------------------------------------
12. CARTES DE SERVICE — icône posée sur une tuile, sans points décoratifs
------------------------------------------------------------ */
html body .custom-dots-rect-1, html body .custom-dots-rect-2, html body .custom-dots-rect-3, html body [class*="custom-dots-rect"] { display: none !important; }
html body .card .card-body > img.img-fluid[src*="icon-"], html body .card .card-body > img[src$=".svg"] {
width: 28px !important; height: 28px !important; padding: 16px !important; box-sizing: content-box !important; background: var(--p-mist) !important; border-radius: 16px !important; margin: 0 0 20px !important;
}
html body .card .card-body.p-5, html body .card .card-body.pt-5 { padding: 32px 28px !important; }
html body .card .card-body h4 { margin-bottom: 8px !important; }
html body .card .card-body p { color: var(--p-muted) !important; font-size: 15px !important; }
html body .card .card-body a.font-weight-bold, html body .card .card-body a.text-color-tertiary, html body .card .card-body a.text-color-quaternary, html body .card .card-body a.text-color-primary {
font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--p-accent) !important; display: inline-block; margin-top: 8px;
}
html body .card .card-body a.font-weight-bold::after, html body .card .card-body a.text-color-tertiary::after { content: " →"; }
/* ------------------------------------------------------------
13. RYTHME — sections à 96 px, containers à 1200, paragraphes limités à 68 caractères
------------------------------------------------------------ */
@media (min-width: 992px) {
html body section.section, html body .section { padding-top: 88px !important; padding-bottom: 88px !important; }
html body section.section.m-0.pt-5 { padding-top: 48px !important; }
html body .container { max-width: 1200px; }
}
html body .row.pb-4.mb-5 { margin-bottom: 0 !important; }
/* FAQ : spécificité au-dessus de ds-2026 */
html body .accordion.accordion-modern-status .card.card-default, html body .accordion.accordion-modern-status.accordion-modern-status-borders .card.card-default,
html body .accordion .card.card-default { border-width: 0 0 1px 0 !important; border-style: solid !important; border-color: var(--p-line) !important; border-radius: 0 !important; }
html body .accordion.accordion-modern-status .card .card-header h4 a.accordion-toggle, html body .accordion .card .card-header .card-title a.accordion-toggle {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23171940' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 20px !important; background-color: transparent !important;
}
html body .accordion.accordion-modern-status .card .card-header h4 a.accordion-toggle:not(.collapsed), html body .accordion .card .card-header .card-title a.accordion-toggle:not(.collapsed) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d13076' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}
/* ------------------------------------------------------------
14. FAQ v2 — bloc en deux colonnes (titre à gauche, questions à droite), items à filets, pastille +/−
------------------------------------------------------------ */
html body #faq + .container > .row > .col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
html body #faq + .container > .row > .col > h3 { grid-column: 1; font-size: 40px !important; line-height: 1.05 !important; margin: 0 0 12px !important; }
html body #faq + .container > .row > .col > h4 { grid-column: 1; margin: 0 !important; max-width: 36ch; }
html body #faq + .container > .row > .col > .accordion { grid-column: 2; grid-row: 1 / span 4; }
@media (max-width: 991.98px) {
html body #faq + .container > .row > .col { display: block; }
html body #faq + .container > .row > .col > h3 { font-size: 28px !important; }
html body #faq + .container > .row > .col > h4 { margin-bottom: 20px !important; }
}
html body .accordion.accordion-modern-status .card.card-default, html body .accordion .card.card-default { border-width: 0 0 1px 0 !important; border-color: var(--p-line) !important; }
html body .accordion.accordion-modern-status .card .card-header h4 a.accordion-toggle, html body .accordion .card .card-header .card-title a.accordion-toggle, html body .accordion .card-header a {
padding: 22px 64px 22px 0 !important; font-size: 18px !important; color: var(--p-ink) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='17.5' fill='%23f4f5fa' stroke='%23e6e8f0'/%3E%3Cpath d='M18 11v14M11 18h14' stroke='%23171940' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right 0 center !important; background-size: 36px 36px !important; background-color: transparent !important;
}
html body .accordion.accordion-modern-status .card .card-header h4 a.accordion-toggle:not(.collapsed), html body .accordion .card .card-header .card-title a.accordion-toggle:not(.collapsed), html body .accordion .card-header a:not(.collapsed) {
color: var(--p-ink) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='17.5' fill='%23171940' stroke='%23171940'/%3E%3Cpath d='M11 18h14' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
html body .accordion .card-header a:hover { color: var(--p-accent) !important; }
html body .accordion .card-body, html body .accordion .card-body.pt-0 { padding: 0 64px 26px 0 !important; max-width: 70ch; }
html body .accordion .card-body p, html body .accordion .card-body li { font-size: 15.5px !important; line-height: 1.7 !important; color: var(--p-muted) !important; }
/* Bloc « En savoir plus » (details SEO) : pleine largeur sous la FAQ, discret */
html body #faq + .container > .row > .col > .details-seo { grid-column: 1 / -1; margin-top: 40px !important; border: 0 !important; border-top: 1px solid var(--p-line) !important; }
html body .details-seo summary { font-family: var(--p-mono) !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted) !important; padding: 16px 0 !important; }
html body .details-seo .content { padding: 8px 0 0 !important; max-width: 72ch; color: var(--p-muted) !important; font-size: 15px !important; }
html body .details-seo .content h1, html body .details-seo .content h2 { font-size: 24px !important; margin: 24px 0 8px !important; }
html body .details-seo .content h3 { font-size: 18px !important; margin: 20px 0 6px !important; }
/* ------------------------------------------------------------
15. HERO — un visuel principal, cadre pointillé + étiquette de coin, pas de pastilles flottantes
------------------------------------------------------------ */
html body .w26mk .w26mk-pin { display: none !important; }
html body .w26mk__art { position: relative; }
html body .w26mk__art::before { content: ""; position: absolute; inset: -16px; border: 1.5px dashed var(--p-accent); border-radius: 6px; pointer-events: none; }
html body .w26mk__art::after { content: "123WEB"; position: absolute; right: -16px; bottom: -38px; background: var(--p-accent); color: #fff; font: 500 11px/1 var(--p-mono); letter-spacing: .12em; padding: 6px 10px; border-radius: 0 0 4px 4px; }
/* Captures de sites clients (bandeau sombre) : même dispositif */
html body .bg-color-tertiary .row img.img-fluid, html body .bg-color-tertiary .col-md-3 img, html body .bg-color-tertiary .col-lg-3 img { outline: 1.5px dashed rgba(255,255,255,.45); outline-offset: 6px; border-radius: 4px !important; }
/* ------------------------------------------------------------
16. GABARITS RÉCENTS (agence-geo, application-web, tarif-seo…) — dégradés inline, en-têtes colorés, tableaux
------------------------------------------------------------ */
html body [style*="linear-gradient"] { background-image: none !important; }
html body div[style*="linear-gradient"][class*="d-flex"] { background-color: var(--p-ink) !important; }
html body .alert[style*="linear-gradient"], html body .card[style*="linear-gradient"] { background-color: var(--p-mist) !important; box-shadow: none !important; border: 1px solid var(--p-line) !important; border-radius: var(--p-r-lg) !important; }
html body div[style*="linear-gradient"][style*="border-radius"] { background-color: var(--p-ink) !important; box-shadow: none !important; }
html body .card .card-header.bg-secondary, html body .card .card-header.bg-primary, html body .card .card-header.bg-success, html body .card .card-header.bg-info,
html body .card .card-header.bg-dark, html body .card .card-header.bg-tertiary, html body .card .card-header.bg-quaternary {
background: var(--p-ink) !important; background-image: none !important; border: 0 !important; border-radius: 0 !important;
}
html body .card .card-header.bg-white { background: transparent !important; }
html body .badge.bg-success, html body .badge.bg-primary, html body .badge.bg-secondary, html body .badge.bg-info, html body .badge.bg-warning { background: var(--p-mist) !important; color: var(--p-ink) !important; border: 1px solid var(--p-line); }
html body table td, html body table th, html body table.table, html body .table-responsive { box-shadow: none !important; }
html body table.table { border: 1px solid var(--p-line) !important; border-radius: var(--p-r-lg); overflow: hidden; }
html body table.table thead th { background: var(--p-ink) !important; color: #fff !important; font-weight: 500 !important; font-size: 13px !important; text-transform: none !important; }
html body table.table td { border-color: var(--p-line) !important; font-size: 15px !important; }
html body .text-success, html body td.text-success { color: var(--p-ink) !important; }
html body .box-shadow-6, html body .box-shadow-4, html body .box-shadow-5 { box-shadow: none !important; border: 1px solid var(--p-line) !important; border-radius: var(--p-r-lg) !important; }
html body .alert { border-radius: var(--p-r) !important; }
html body div[style*="linear-gradient"] .text-light, html body div[style*="linear-gradient"] .text-light *, html body div[style*="linear-gradient"] h3, html body div[style*="linear-gradient"] p { color: #fff !important; }
/* Garde-fou lisibilité : un bouton plein a TOUJOURS un texte blanc, quel que soit le contexte (liens de cartes, plans, listes) */
html body a.btn:not(.btn-outline):not([class*="btn-outline-"]):not(.btn-link):not(.btn-light):not(.btn-white), html body .plan .plan-features a.btn, html body .pricing-table .plan.plan-featured .plan-features a.btn,
html body .plan .plan-features a.btn.btn-dark.btn-modern, html body .card .card-body a.btn, html body li a.btn, html body p a.btn { color: #fff !important; }
html body .plan .plan-features a.btn.btn-dark.btn-modern, html body .pricing-table .plan.plan-featured .plan-features a.btn { background: var(--p-accent) !important; border-color: var(--p-accent) !important; }
html body a.btn.btn-outline, html body a.btn.btn-light, html body a.btn.btn-white { color: var(--p-ink) !important; }
html body .bg-color-tertiary a.btn.btn-outline, html body .bg-color-secondary a.btn.btn-outline, html body #footer a.btn.btn-outline { color: #fff !important; }
/* a-propos : carte CTA w26 à plat */
html body .w26-cta, html body .w26-inline, html body .w26-hero { background-image: none !important; box-shadow: none !important; }
html body .w26-cta { background: var(--p-ink) !important; border-radius: var(--p-r-lg) !important; }
/* Pages département : colonne tarif mise en avant = gris, pas rose */
html body td.bg-primary, html body th.bg-primary, html body .table td.bg-primary, html body .table th.bg-primary { background: var(--p-mist) !important; color: var(--p-ink) !important; }
html body .table thead th.bg-primary { background: var(--p-ink) !important; color: #fff !important; }
/* Footer : bloc "Guides et ressources" plus compact */
html body #footer .row + .row h5, html body #footer h5.font-weight-bold.text-color-light { margin-bottom: 10px !important; }
html body #footer .footer-copyright p { font-size: 12px !important; color: rgba(255,255,255,.5) !important; }
html body #footer .container { padding-top: 48px !important; padding-bottom: 32px !important; }
html body #footer a.text-2, html body #footer li a { line-height: 1.5; }
html body .w26-cta::before, html body .w26-cta::after, html body #footer::before, html body #footer::after, html body .w26-hero::before, html body .w26-hero::after { display: none !important; background-image: none !important; }
/* ------------------------------------------------------------
17. ARTICLES — image d'illustration en pleine largeur, colonne de lecture 72ch, mobile nav homogène
------------------------------------------------------------ */
html body img[src*="photos-actualite"][style*="float"] { float: none !important; display: block; width: 100% !important; max-width: 100% !important; margin: 0 0 28px !important; border-radius: var(--p-r-lg) !important; }
html body .article, html body .post, html body .blog-post, html body article { max-width: 100%; }
html body .post-content p, html body .article p, html body .blog-posts p { font-size: 17px !important; line-height: 1.75 !important; }
html body .post-content h2, html body article h2 { margin-top: 40px !important; }
/* Burger et menu mobile */
html body #header .header-btn-collapse-nav { background: var(--p-ink) !important; border-radius: 10px !important; box-shadow: none !important; padding: 10px 14px !important; }
@media (max-width: 991.98px) {
html body #header .header-nav-main nav > ul > li > a, html body #header .header-nav-main nav > ul > li.dropdown > a,
html body #header .header-nav-main nav > ul > li.nav-item-refonte > a, html body #header .header-nav-main nav > ul > li.nav-item-hebergement > a {
padding: 13px 4px !important; font-size: 16px !important; font-weight: 500 !important; border-bottom: 1px solid var(--p-line) !important; margin: 0 !important; line-height: 1.3 !important;
}
html body #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a { padding: 10px 12px !important; font-size: 15px !important; }
html body #header .header-nav-main nav > ul { padding-bottom: 12px; }
}
/* Contact : pastilles d'icônes vides (l'icône n'existe pas dans le markup) → simple puce fine */
html body .feature-box .feature-box-icon.custom-feature-box-icon-size-1, html body .feature-box .feature-box-icon { width: 10px !important; height: 10px !important; min-width: 0 !important; border-radius: 3px !important; background: var(--p-accent) !important; margin: 8px 16px 0 0 !important; box-shadow: none !important; }
html body .feature-box .feature-box-icon i { display: none !important; }
html body .feature-box .feature-box-info h4 { font-size: 13px !important; font-family: var(--p-mono) !important; letter-spacing: .06em; text-transform: uppercase !important; color: var(--p-muted) !important; font-weight: 500 !important; margin-bottom: 4px !important; }
html body .feature-box .feature-box-info p { font-size: 16px !important; color: var(--p-ink) !important; }
html body .page-header { padding: 56px 0 !important; }
html body .page-header h1 { margin: 0 !important; }
@media (max-width: 991.98px) {
/* menu mobile : pas de soulignement animé ni de losange (ds-2026), chevron du thème conservé */
html body #header .header-nav-main nav > ul > li > a::before, html body #header .header-nav-main nav > ul > li > a::after,
html body #header .header-nav-main nav > ul > li.dropdown > a::before { display: none !important; content: none !important; }
html body #header .header-nav-main nav > ul > li.dropdown > a.dropdown-toggle::after { display: none !important; content: none !important; background: none !important; }
html body #header .header-nav-main nav > ul > li.dropdown > a.dropdown-toggle .fa-chevron-down { color: var(--p-muted) !important; font-size: 12px; }
/* hero mobile : pas de cadre pointillé (il chevauche le texte), mockup en simple carte */
html body .w26mk__art::before, html body .w26mk__art::after { display: none !important; }
html body .w26mk { margin-top: 12px; }
}
@media (max-width: 991.98px) {
/* un seul filet par item : sur le