/*
 * Refonte BackMobile (2026) — système de design des pages principales
 * (Accueil, BackMobile, Le forfait, Financement), de l'en-tête et du pied de page.
 * Tout est rattaché à `.bm` pour ne pas toucher aux autres gabarits (blog, contact,
 * site IBS) ni hériter des règles globales de app.css.
 */

/* --- Socle : neutralise les règles globales de app.css à l'intérieur de .bm --- */
.bm{font-family:Geist,Inter,system-ui,sans-serif;color:#0B1A12;line-height:normal;letter-spacing:normal;-webkit-font-smoothing:antialiased}
.bm *{box-sizing:border-box}
.bm section{padding:0}
.bm h1,.bm h2,.bm h3,.bm h4{font-family:inherit;font-weight:600;line-height:1.2;letter-spacing:normal;margin:0}
.bm p{margin:0}
.bm a{color:inherit}
.bm img{display:block;max-width:100%}
.bm-page{width:100%;background:#F3F4EF}

/* --- Utilitaires --- */
.bm .mono{font-family:'Geist Mono',ui-monospace,monospace}
.bm .wrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px}
.bm .tw{text-wrap:balance}
.bm .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bm .dots{background-image:radial-gradient(rgba(255,255,255,0.075) 1px,transparent 1px);background-size:22px 22px}
.bm .ldots{background-image:radial-gradient(rgba(11,36,22,0.09) 1px,transparent 1px);background-size:22px 22px}
.bm .glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(90px)}

/* --- Boutons --- */
.bm .b{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:600;transition:transform .2s,background .2s,box-shadow .2s;cursor:pointer;border:0;font-family:inherit;white-space:nowrap}
.bm .b:hover{transform:translateY(-1px)}
.bm .b .ar{transition:transform .2s}.bm .b:hover .ar{transform:translateX(3px)}
.bm .b-lime{background:#8CC63F;color:#08200F;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 28px -10px rgba(140,198,63,.6)}
.bm .b-lime:hover{background:#9BD24F;color:#08200F}
.bm .b-ghost{color:#FFFFFF;background:rgba(255,255,255,0.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16)}
.bm .b-ghost:hover{background:rgba(255,255,255,0.1);color:#FFFFFF}
.bm .b-dark{background:#0B2416;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -12px rgba(11,36,22,.6)}
.bm .b-dark:hover{background:#133524;color:#FFFFFF}

/* --- Cartes --- */
.bm .card{background:#FFFFFF;border:1px solid #E2E5DC;border-radius:20px;box-shadow:0 1px 2px rgba(11,26,18,.04),0 12px 32px -16px rgba(11,26,18,.14)}
.bm .dcard{border:1px solid rgba(255,255,255,0.09);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.bm .lift{transition:transform .25s,box-shadow .25s}
.bm .lift:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(11,26,18,.04),0 28px 56px -24px rgba(11,26,18,.28)}
.bm .lift .ar{transition:transform .25s}.bm .lift:hover .ar{transform:translateX(3px)}

/* --- En-tête --- */
.bm.hdr{position:sticky;top:0;z-index:50;background:rgba(7,26,16,0.86);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,0.07)}
.bm .nl{color:#C3D1C7;text-decoration:none;padding:9px 14px;border-radius:10px;transition:color .2s,background .2s}
.bm .nl:hover{color:#FFFFFF;background:rgba(255,255,255,0.06)}
.bm .nl.on{color:#FFFFFF;background:rgba(140,198,63,0.16)}
.bm .ml{display:flex;align-items:center;min-height:48px;padding:0 4px;color:#E3ECE5;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.07);font-weight:500;letter-spacing:.04em;font-size:14px}
.bm .ml:hover,.bm .ml.on{color:#8CC63F}
.bm .menu-sm{display:none !important}
.bm #bm-mobile-nav:not([hidden]){display:flex}
.bm .logo-dot{border-radius:50%;background:#FFFFFF;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.bm .logo-dot img{width:100%;height:100%;object-fit:contain}

/* --- Pied de page --- */
.bm.ft{background:#07170E;color:#B9C8BD}
.bm.ft input::placeholder{color:#8FA396}
.bm.ft a{color:#B9C8BD;text-decoration:none}.bm.ft a:hover{color:#FFFFFF}
.bm .nl-msg{margin:0 0 14px;border-radius:12px;padding:10px 14px;font-size:14px}
.bm .nl-msg--ok{background:rgba(140,198,63,.16);color:#D7EDB6}
.bm .nl-msg--err{background:rgba(255,120,120,.14);color:#FFD4D4}

/* --- Le forfait : curseur de data et choix du réseau --- */
.bm .rng{-webkit-appearance:none;appearance:none;background:transparent;width:100%;height:32px;margin:0;cursor:pointer;position:relative}
.bm .rng::-webkit-slider-runnable-track{height:8px;background:transparent}
.bm .rng::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#FFFFFF;border:2px solid #1E6B3A;box-shadow:0 6px 16px -4px rgba(11,26,18,.35)}
.bm .rng::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#FFFFFF;border:2px solid #1E6B3A;box-shadow:0 6px 16px -4px rgba(11,26,18,.35)}
.bm .rng::-moz-range-track{background:transparent}
.bm .rng:focus-visible{outline:none}
.bm .rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(140,198,63,.45)}
.bm .net{position:relative;height:200px;border-radius:24px;background:#FFFFFF;border:2px solid #E2E5DC;box-shadow:0 1px 2px rgba(11,26,18,0.04);display:flex;align-items:center;justify-content:center;padding:24px;cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.bm .net:hover{transform:translateY(-2px)}
.bm .net img{max-width:240px;max-height:96px;width:auto;height:auto;object-fit:contain}
.bm .net-dot{position:absolute;top:18px;right:18px;width:28px;height:28px;border-radius:50%;border:2px solid #E2E5DC;background:#FFFFFF;color:#8CC63F;display:flex;align-items:center;justify-content:center}
.bm .net-dot svg{display:none}
.bm .net[aria-pressed="true"]{border-color:#1E6B3A;box-shadow:0 0 0 6px rgba(140,198,63,0.18),0 24px 48px -24px rgba(11,36,22,0.35)}
.bm .net[aria-pressed="true"] .net-dot{border-color:#1E6B3A;background:#0B2416}
.bm .net[aria-pressed="true"] .net-dot svg{display:block}

/* --- Financement : ticket « un seul loyer » --- */
.bm .perf{height:14px;background-image:radial-gradient(circle at 7px 0,#F3F4EF 6px,transparent 6.5px);background-size:14px 14px;background-repeat:repeat-x}

/* --- Responsive --- */
@media (max-width:960px){
.bm .wrap{padding-left:20px;padding-right:20px}
.bm .navlinks,.bm .hide-sm{display:none !important}
.bm .menu-sm{display:inline-flex !important}
.bm .g2,.bm .g3,.bm .fgrid,.bm .bento,.bm .cmp{grid-template-columns:minmax(0,1fr) !important}
.bm .bento>*{grid-row:auto !important;grid-column:auto !important}
.bm .g4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.bm .h1{font-size:44px !important}
.bm .h2{font-size:34px !important}
.bm .big{font-size:60px !important}
.bm .ov{margin:14px 0 0 !important}
.bm .stack-sm{flex-direction:column !important;align-items:stretch !important}
.bm .vr{border-left:0 !important}
.bm .cta{padding:40px 24px !important}
.bm .cmp-ar{transform:rotate(90deg);margin:-6px auto !important}
.bm .opex{margin:0 !important}
}
@media (max-width:560px){
.bm .h1{font-size:36px !important}
.bm .h2{font-size:30px !important}
.bm .lockup{flex-wrap:wrap}
}

/* --- Surtitres (ex. « OFFRE ENTREPRISE ») : texte simple, sans pastille --- */
.bm .eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#B5E07A}
.bm .eyebrow--dark{color:#1E6B3A}

/* --- Page Eurofiber : reprise de l'affiche « Offre promotionnelle Eurofiber » --- */
.bm .ef{--ef-navy:#0D1B2E;--ef-cyan:#1EA7CF;position:relative;overflow:hidden;background:linear-gradient(180deg,#EEF3F7 0%,#F6F8FA 100%);font-family:Arial,Helvetica,sans-serif;color:var(--ef-navy)}
.bm .ef-photo{position:absolute;right:-180px;top:64px;height:700px;width:auto;max-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 30%);mask-image:linear-gradient(to right,transparent 0%,#000 30%)}
.bm .ef-band{position:absolute;left:0;top:0;width:62%;height:64px;background:var(--ef-navy);clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
.bm .ef-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,var(--ef-cyan) 100%);clip-path:polygon(70% 70%,100% 0,100% 0,99% 20%,72% 100%,60% 100%);opacity:.9}
.bm .ef-band img{position:absolute;left:max(40px,calc((100vw - 1240px) / 2 + 40px));top:50%;transform:translateY(-50%);height:24px;width:auto;filter:brightness(0) invert(1)}
.bm .ef-grid>div:not(.ef-right){position:relative;z-index:1}
.bm .ef-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,.6fr);gap:32px;align-items:start;padding-top:112px;padding-bottom:40px}
.bm .ef-title{margin:0;font-family:inherit;font-weight:400;font-size:52px;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;color:var(--ef-navy)}
.bm .ef-title span{display:block;color:var(--ef-cyan);font-size:72px}
.bm .ef-rule{width:120px;height:6px;border-radius:3px;background:var(--ef-cyan);margin:14px 0 22px}
.bm .ef-date{margin:0 0 14px;padding-left:150px;font-size:19px;color:#7A8592}
.bm .ef-price{position:relative;max-width:460px;border-radius:14px;padding:26px 36px 24px;text-align:center;color:#FFFFFF;background:linear-gradient(160deg,#18304F 0%,#0B1628 70%);box-shadow:0 0 0 3px #2BB3DA,0 0 26px rgba(30,167,207,.45),0 24px 50px -20px rgba(13,27,46,.6)}
.bm .ef-price-kind{margin:0;font-size:27px;letter-spacing:.01em}
.bm .ef-price-row{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 0 10px}
.bm .ef-price-num{font-size:140px;line-height:1;letter-spacing:-.04em;color:var(--ef-cyan)}
.bm .ef-price-unit{display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:38px;line-height:1}
.bm .ef-price-unit b{font-weight:400;font-size:58px}
.bm .ef-price-fees{margin:0;padding-top:16px;border-top:2px solid var(--ef-cyan);font-size:24px}
.bm .ef-logo{display:block;width:100%;max-width:260px;height:auto;margin:18px 0 64px}
.bm .ef-stat{display:flex;align-items:center;gap:22px;padding:20px 26px;margin-bottom:16px;border-radius:16px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px -18px rgba(13,27,46,.35)}
.bm .ef-stat i{flex:none;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4FC3E3,#1A9BC4);display:flex;align-items:center;justify-content:center;color:#FFFFFF}
.bm .ef-stat p{margin:0;font-size:34px;line-height:1.08;color:var(--ef-navy)}
.bm .ef-stat p span{display:block;color:var(--ef-cyan)}
.bm .ef-recharge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;margin-top:470px;margin-left:40px;padding:14px 22px;border-radius:12px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:16px;font-weight:700;color:var(--ef-navy)}
.bm .ef-feats{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-radius:18px;background:#FFFFFF;box-shadow:0 18px 40px -22px rgba(13,27,46,.35)}
.bm .ef-feat{display:flex;align-items:center;gap:12px;padding:20px 14px;font-size:14px;line-height:1.35;color:var(--ef-navy)}
.bm .ef-feat + .ef-feat{border-left:1px solid #E6EAEE}
.bm .ef-feat svg{flex:none;width:36px;height:36px;fill:none;stroke:#2C6EAE;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bm .ef-elig{position:relative;width:min(66%,820px);margin:16px auto 0;padding:18px 28px;border-radius:0 0 30px 30px;background:var(--ef-navy);box-shadow:0 3px 0 var(--ef-cyan);display:flex;align-items:center;justify-content:center;gap:12px;color:#FFFFFF;font-size:18px;text-align:center}
.bm .ef-elig svg{flex:none;width:24px;height:24px;fill:none;stroke:#FFFFFF;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1180px){
.bm .ef-feats{grid-template-columns:repeat(3,minmax(0,1fr))}
.bm .ef-feat:nth-child(4){border-left:0}
.bm .ef-feat:nth-child(n+4){border-top:1px solid #E6EAEE}
}
@media (max-width:960px){
.bm .ef-band{width:100%;clip-path:none}
.bm .ef-band::after{display:none}
.bm .ef-band img{left:20px}
.bm .ef-grid{grid-template-columns:minmax(0,1fr);padding-top:96px}
.bm .ef-photo{position:static;display:block;width:100%;height:auto;max-height:420px;object-fit:cover;-webkit-mask-image:none;mask-image:none;margin-top:8px}
.bm .ef-title{font-size:38px}
.bm .ef-title span{font-size:50px}
.bm .ef-date{padding-left:0}
.bm .ef-price-num{font-size:104px}
.bm .ef-recharge{margin:0}
.bm .ef-feats{grid-template-columns:minmax(0,1fr)}
.bm .ef-feat + .ef-feat{border-left:0;border-top:1px solid #E6EAEE}
.bm .ef-elig{width:100%;border-radius:0 0 20px 20px;font-size:15.5px}
}

/* --- Responsive mobile : espacements et tailles adaptés aux petits écrans ---
   Les gabarits portent leurs espacements en style inline (repris des maquettes) :
   on les resserre ici sous 960 px, sans toucher à l'affichage ordinateur. */
@media (max-width:960px){
.bm [style*="padding-top: 128px"],.bm [style*="padding-top: 120px"],.bm [style*="padding-top: 96px"],.bm [style*="padding-top: 88px"]{padding-top:56px !important}
.bm [style*="padding-bottom: 128px"],.bm [style*="padding-bottom: 120px"],.bm [style*="padding-bottom: 96px"]{padding-bottom:56px !important}
.bm [style*="padding-top: 72px"]{padding-top:40px !important}
.bm [style*="padding-bottom: 72px"]{padding-bottom:40px !important}
.bm [style*="margin-top: 88px"]{margin-top:40px !important}
.bm [style*="margin-bottom: 64px"],.bm [style*="margin-bottom: 56px"]{margin-bottom:32px !important}
.bm [style*="margin-bottom: 48px"],.bm [style*="margin-bottom: 40px"]{margin-bottom:28px !important}
.bm .g2{gap:32px !important}
/* Accueil : chiffres clés en 2 × 2 */
.bm .g4>div{padding:22px 18px !important}
.bm .g4>div:nth-child(even){border-left:1px solid rgba(255,255,255,0.08) !important}
.bm .g4>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,0.08)}
.bm .g4 p[style*="font-size: 52px"]{font-size:38px !important}
/* Cartes Réseau / Mobile / Financement moins hautes */
.bm a.lift[style*="min-height: 320px"]{min-height:200px !important;gap:28px}
.bm a.lift p[style*="font-size: 52px"],.bm a.lift p[style*="font-size: 40px"]{font-size:34px !important}
/* Grands chiffres et titres de cartes */
.bm p[style*="font-size: 48px"]{font-size:36px !important}
.bm p[style*="font-size: 44px"]{font-size:32px !important}
.bm p[style*="margin: 0 0 44px"]{margin-bottom:24px !important}
.bm .card[style*="padding: 36px"],.bm [style*="padding: 36px"]{padding:26px !important}
.bm .card[style*="padding: 32px"],.bm [style*="padding: 32px"]{padding:24px !important}
/* Le forfait : choix du réseau plus compact */
.bm .net{height:128px;padding:18px}
.bm .net img{max-height:64px;max-width:170px}
.bm .net-dot{top:12px;right:12px;width:24px;height:24px}
/* Eurofiber */
.bm .ef-grid{padding-top:88px}
}
@media (max-width:560px){
.bm .ef-title{font-size:30px}
.bm .ef-title span{font-size:42px}
.bm .ef-price{padding:22px 20px 20px}
.bm .ef-price-kind{font-size:22px}
.bm .ef-price-num{font-size:88px}
.bm .ef-price-unit{font-size:28px;gap:8px}
.bm .ef-price-unit b{font-size:44px}
.bm .ef-price-fees{font-size:20px}
.bm .ef-stat p{font-size:28px}
.bm .ef-stat i{width:60px;height:60px}
.bm .big{font-size:52px !important}
}
@media (max-width:960px){
.bm .dcard[style*="padding: 30px 30px 76px"]{padding:24px !important}
.bm .card p[style*="font-size: 26px"]{white-space:nowrap}
.bm .ef-logo{max-width:220px;margin:0 0 24px}
}
@media (max-width:560px){
.bm .g4 p[style*="font-size: 52px"]{font-size:32px !important;white-space:nowrap}
}

/* --- Signature « BACKMOBILE by NETWORTH » (en-tête) --- */
.bm .lockup-by{display:inline-flex;align-items:center;gap:14px;background:#FFFFFF;border-radius:14px;padding:8px 16px;box-shadow:0 12px 32px -16px rgba(0,0,0,0.5)}
.bm .lockup-by-nw{height:20px;width:auto}
.bm .lockup-by-by{font-family:Geist,Inter,system-ui,sans-serif;font-size:19px;font-style:italic;font-weight:500;letter-spacing:.02em;color:#56635A}
.bm .lockup-by-bm{height:62px;width:auto}
@media (max-width:560px){
.bm .lockup-by{gap:10px;padding:6px 12px}
.bm .lockup-by-nw{height:15px}
.bm .lockup-by-by{font-size:16px}
.bm .lockup-by-bm{height:50px}
}


/* --- Signature dans l'en-tête (remplace le logo rond) --- */
.bm.hdr .lockup-by{gap:9px;padding:4px 12px 4px 12px;border-radius:12px;box-shadow:none}
.bm.hdr .lockup-by-nw{height:14px}
.bm.hdr .lockup-by-by{font-size:15px}
.bm.hdr .lockup-by-bm{height:46px}
@media (max-width:560px){
.bm.hdr .lockup-by{gap:7px;padding:3px 10px}
.bm.hdr .lockup-by-nw{height:11px}
.bm.hdr .lockup-by-by{font-size:13px}
.bm.hdr .lockup-by-bm{height:40px}
}
/* Menu : liens sur une ligne (la signature prend plus de place que l'ancien logo rond) */
.bm .nl{white-space:nowrap;padding:9px 11px}
@media (min-width:1101px) and (max-width:1240px){
.bm.hdr .navlinks{font-size:12px !important;letter-spacing:.03em !important}
.bm .nl{padding:8px 7px}
.bm.hdr .hide-sm{font-size:11.5px !important;padding:0 12px !important;letter-spacing:.03em !important}
.bm.hdr .hide-sm .ar{display:none}
}
/* En-tête : menu « hamburger » dès 1100 px pour garder la signature lisible */
.bm.hdr .lockup-by{flex:none}
@media (max-width:1100px){
.bm.hdr .navlinks,.bm.hdr .hide-sm{display:none !important}
.bm.hdr .menu-sm{display:inline-flex !important}
}
/* Accueil : grande signature au-dessus du titre (BackMobile 2 fois plus haut que Networth) */
.bm .lockup-by--hero{gap:14px;padding:10px 22px 10px 14px;border-radius:16px}
.bm .lockup-by--hero .lockup-by-bm{height:104px}
.bm .lockup-by--hero .lockup-by-nw{height:21px}
.bm .lockup-by--hero .lockup-by-by{font-size:20px}
@media (max-width:960px){
.bm .hero-lead{font-size:24px !important}
.bm .hero-lead svg{width:26px;height:26px}
}
@media (max-width:560px){
.bm .lockup-by--hero{gap:10px;padding:8px 14px 8px 10px}
.bm .lockup-by--hero .lockup-by-bm{height:76px}
.bm .lockup-by--hero .lockup-by-nw{height:16px}
.bm .lockup-by--hero .lockup-by-by{font-size:16px}
.bm .hero-lead{font-size:21px !important}
}