Soutenir BaugéPlus — Ajouter en liste blanche (Adblock / uBlock / Brave…)

:root{
/* Fond blanc */
--bg: #ffffff;
--bg2:#ffffff;

/* Cartes / UI */
--card: rgba(3,23,43,.04);
--card2: rgba(3,23,43,.06);
--border: rgba(3,23,43,.14);

/* Textes */
--text: rgba(3,23,43,.92);
--muted: rgba(3,23,43,.70);
--muted2: rgba(3,23,43,.58);

/* Accents */
--accent: #EA661D;
--accent2:#FF8A3D;
--good:#16a34a;
--warn:#f59e0b;
--danger:#e11d48;

/* Styles */
--shadow: 0 18px 55px rgba(3,23,43,.10);
--radius: 18px;
--radius2: 26px;

--max: 1120px;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

/* ✅ FOND BLANC #fff */
body{
margin:0;
font-family: var(--sans);
color: var(--text);
background:
radial-gradient(900px 520px at 12% 0%, rgba(234,102,29,.12), transparent 55%),
radial-gradient(900px 520px at 88% 10%, rgba(225,29,72,.10), transparent 55%),
radial-gradient(1100px 650px at 50% 100%, rgba(59,130,246,.08), transparent 60%),
#fff;
overflow-x:hidden;
}

a{ color: inherit; }
.wrap{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

/* Top bar en blanc */
.topbar{
position:sticky; top:0; z-index:50;
backdrop-filter: blur(14px);
background: rgba(255,255,255,.78);
border-bottom: 1px solid rgba(3,23,43,.10);
}
.topbar .inner{
display:flex; align-items:center; justify-content:space-between;
padding: 14px 0;
gap: 14px;
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo{
width:42px; height:42px; border-radius:14px;
background:
radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.55), transparent 60%),
linear-gradient(135deg, rgba(234,102,29,.98), rgba(255,138,61,.90));
box-shadow: 0 10px 26px rgba(234,102,29,.20);
position:relative;
}
.logo:after{
content:"+";
position:absolute; inset:0;
display:grid; place-items:center;
font-weight:900; font-size:26px;
color: rgba(255,255,255,.98);
text-shadow: 0 2px 10px rgba(3,23,43,.25);
}
.brand strong{ display:block; line-height:1.1; }
.brand span{ display:block; font-size:12px; color:var(--muted); }

.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}

.btn{
border:1px solid rgba(3,23,43,.14);
background: rgba(255,255,255,.85);
color: var(--text);
padding: 10px 14px;
border-radius: 14px;
text-decoration:none;
font-weight: 800;
font-size: 13.5px;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:10px;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
user-select:none;
white-space:nowrap;
box-shadow: 0 10px 24px rgba(3,23,43,.06);
}
.btn:hover{ background: rgba(255,255,255,.95); transform: translateY(-1px); }
.btn.primary{
border: none;
background: linear-gradient(135deg, rgba(234,102,29,.98), rgba(255,138,61,.92));
color: rgba(255,255,255,.98);
box-shadow: 0 16px 40px rgba(234,102,29,.18);
}
.btn.primary:hover{ filter: brightness(1.03); }
.btn.ghost{
background: rgba(255,255,255,.75);
border: 1px solid rgba(3,23,43,.12);
}

.chip{
border:1px solid rgba(3,23,43,.14);
background: rgba(255,255,255,.80);
padding: 7px 10px;
border-radius: 999px;
font-size: 12px;
color: rgba(3,23,43,.78);
display:inline-flex; gap:8px; align-items:center;
}
.dot{
width:9px; height:9px; border-radius:50%;
background: linear-gradient(135deg, var(--good), #60a5fa);
box-shadow: 0 0 0 4px rgba(22,163,74,.12);
}

/* Hero */
header.hero{ padding: 42px 0 22px; }
.hero-grid{
display:grid;
grid-template-columns: 1.25fr .75fr;
gap: 18px;
align-items: stretch;
}
@media (max-width: 920px){ .hero-grid{ grid-template-columns:1fr; } }

/* Panels */
.panel{
border:1px solid rgba(3,23,43,.10);
background: rgba(255,255,255,.85);
border-radius: var(--radius2);
box-shadow: var(--shadow);
overflow:hidden;
position:relative;
}
.panel .pad{ padding: 22px; }

.headline{
font-size: clamp(28px, 4vw, 46px);
line-height: 1.05;
margin: 0 0 12px;
letter-spacing: -0.02em;
color: rgba(3,23,43,.95);
}
.sub{
margin:0;
color: var(--muted);
line-height: 1.55;
font-size: 15.5px;
max-width: 70ch;
}

.kpis{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
margin-top: 18px;
}
@media (max-width: 560px){ .kpis{ grid-template-columns:1fr; } }
.kpi{
border:1px solid rgba(3,23,43,.10);
background: rgba(3,23,43,.02);
border-radius: 16px;
padding: 12px 12px;
display:flex; gap:12px; align-items:flex-start;
}
.kpi .ico{
width:38px; height:38px;
border-radius: 14px;
border:1px solid rgba(3,23,43,.10);
background: rgba(255,255,255,.85);
display:grid; place-items:center;
font-size:18px;
flex:0 0 auto;
}
.kpi strong{ display:block; color: rgba(3,23,43,.92); }
.kpi span{ display:block; font-size:12.5px; color: var(--muted2); margin-top:3px; line-height:1.35; }

/* Right card */
.right-card{ display:flex; flex-direction:column; min-height: 100%; }
.support-box{
border:1px solid rgba(3,23,43,.10);
background:
radial-gradient(700px 340px at 20% 10%, rgba(234,102,29,.10), transparent 60%),
radial-gradient(700px 340px at 90% 40%, rgba(22,163,74,.10), transparent 60%),
rgba(255,255,255,.88);
border-radius: var(--radius2);
padding: 18px;
box-shadow: var(--shadow);
}
.support-title{ margin:0 0 8px; font-weight: 900; font-size: 16px; letter-spacing: .01em; }
.support-mini{ margin:0; color: var(--muted); font-size: 13.5px; line-height:1.5; }

.domain-row{ margin-top: 14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.domain{
font-family: var(--mono);
padding: 10px 12px;
border-radius: 14px;
border:1px solid rgba(3,23,43,.12);
background: rgba(255,255,255,.92);
color: rgba(3,23,43,.92);
display:flex; gap:10px; align-items:center;
flex: 1 1 auto;
min-width: 220px;
}
.domain b{ color: rgba(3,23,43,.95); }

.toast{
position: fixed;
left:50%;
transform: translateX(-50%);
bottom: 18px;
padding: 10px 14px;
border-radius: 14px;
border:1px solid rgba(3,23,43,.12);
background: rgba(255,255,255,.92);
color: rgba(3,23,43,.92);
font-size: 13.5px;
box-shadow: 0 18px 50px rgba(3,23,43,.14);
opacity:0;
pointer-events:none;
transition: opacity .16s ease, transform .16s ease;
z-index: 999;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-2px); }

.progress{
margin-top: 14px;
border-radius: 14px;
border:1px solid rgba(3,23,43,.10);
background: rgba(3,23,43,.02);
overflow:hidden;
}
.progress .bar{
height: 10px;
width: 0%;
background: linear-gradient(90deg, rgba(22,163,74,.95), rgba(234,102,29,.95));
transition: width .25s ease;
}
.progress .txt{
display:flex; justify-content:space-between; gap:10px;
padding: 10px 12px;
font-size: 12.5px;
color: var(--muted);
}

/* Sections */
main{ padding: 18px 0 50px; }
.section{
margin-top: 18px;
border:1px solid rgba(3,23,43,.10);
background: rgba(255,255,255,.88);
border-radius: var(--radius2);
overflow:hidden;
box-shadow: var(--shadow);
}
.section .head{
padding: 16px 18px;
display:flex; align-items:center; justify-content:space-between; gap:10px;
border-bottom:1px solid rgba(3,23,43,.08);
background: rgba(3,23,43,.02);
}
.section .head h3{ margin:0; font-size: 16px; letter-spacing: .01em; }
.section .head p{ margin:0; color: var(--muted); font-size: 13px; }
.section .body{ padding: 18px; }

.pills{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 0; }
.pill{
border:1px solid rgba(3,23,43,.12);
background: rgba(255,255,255,.92);
color: rgba(3,23,43,.86);
padding: 9px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
cursor:pointer;
transition: transform .12s ease, background .12s ease;
user-select:none;
display:inline-flex; gap:8px; align-items:center;
box-shadow: 0 10px 22px rgba(3,23,43,.06);
}
.pill:hover{ transform: translateY(-1px); background: rgba(255,255,255,.98); }
.pill.active{
background: rgba(234,102,29,.14);
border-color: rgba(234,102,29,.35);
color: rgba(3,23,43,.95);
}

.guide{ display:none; margin-top: 16px; gap: 14px; grid-template-columns: 1fr; }
.guide.show{ display:grid; }

.steps{
border:1px solid rgba(3,23,43,.10);
background: rgba(3,23,43,.02);
border-radius: 18px;
padding: 14px;
}
.steps h4{ margin:0 0 8px; font-size: 15px; color: rgba(3,23,43,.92); }
.steps .note{ margin:0 0 12px; color: var(--muted); font-size: 13px; line-height:1.45; }
.ol{ margin:0; padding-left: 18px; color: rgba(3,23,43,.86); line-height:1.7; font-size: 14px; }
.ol li{ margin: 6px 0; }

.kbd{
font-family: var(--mono);
font-size: 12.5px;
padding: 3px 8px;
border-radius: 10px;
border:1px solid rgba(3,23,43,.14);
background: rgba(255,255,255,.92);
color: rgba(3,23,43,.88);
display:inline-block;
vertical-align: middle;
}

.callout{
margin-top: 12px;
border:1px dashed rgba(3,23,43,.18);
background: rgba(22,163,74,.06);
border-radius: 18px;
padding: 12px 14px;
color: rgba(3,23,43,.86);
display:flex;
gap:10px;
align-items:flex-start;
}
.callout .big{ font-size: 18px; line-height:1; padding-top:2px; }
.callout small{ color: var(--muted); display:block; margin-top:2px; }

/* FAQ */
details{
border:1px solid rgba(3,23,43,.10);
background: rgba(3,23,43,.02);
border-radius: 18px;
padding: 12px 14px;
margin: 10px 0;
overflow:hidden;
}
summary{
cursor:pointer;
font-weight: 900;
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
color: rgba(3,23,43,.92);
}
summary::-webkit-details-marker{ display:none; }
summary .q{ display:flex; gap:10px; align-items:center; }
summary .caret{
width:34px; height:34px; border-radius: 12px;
border:1px solid rgba(3,23,43,.12);
background: rgba(255,255,255,.92);
display:grid; place-items:center;
transition: transform .14s ease;
flex:0 0 auto;
}
details summary .caret{ transform: rotate(180deg); }
details p{
margin: 10px 0 0;
color: var(--muted);
line-height:1.6;
font-size: 14px;
}

/* Footer */
footer{
padding: 22px 0 40px;
color: rgba(3,23,43,.72);
border-top:1px solid rgba(3,23,43,.10);
background: rgba(255,255,255,.90);
}
.foot-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items:center;
}
@media (max-width: 720px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;}
.mini-link{
font-size: 13px;
color: rgba(3,23,43,.78);
text-decoration:none;
border-bottom: 1px dotted rgba(3,23,43,.30);
}
.mini-link:hover{ color: rgba(3,23,43,.95); border-bottom-color: rgba(3,23,43,.55); }

/* Floating shapes (plus doux sur blanc) */
.float{
position:absolute;
inset:auto;
width: 280px; height:280px;
border-radius: 999px;
filter: blur(22px);
opacity: .22;
pointer-events:none;
mix-blend-mode: multiply;
}
.f1{ top:-120px; left:-120px; background: radial-gradient(circle, rgba(234,102,29,.95), transparent 60%); }
.f2{ bottom:-160px; right:-140px; background: radial-gradient(circle, rgba(22,163,74,.90), transparent 62%); }

.sr-only{
position:absolute!important;
width:1px; height:1px;
padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0);
border:0;
}

BaugéPlus — soutien
Guide liste blanche (30 secondes)

Sans tracking • Annonceurs locaux
↩ Retour sur BaugéPlus
✅ Je débloque maintenant

Soutenir BaugéPlus, c’est soutenir l’info locale indépendante 💛

BaugéPlus est un média local porté par une association loi 1901,
sans salariés, animé uniquement par des bénévoles.

Notre fonctionnement est simple : des bannières locales (que nous réalisons nous-mêmes),
sans tracking, sans GAFAM, et sans régies intrusives.
C’est notre seule source de financement pour continuer à couvrir les actus, les événements et les reportages.

Et oui… parfois, ça finance aussi quelques cafés pour tenir les soirées de montage ☕😉

🏡

Annonceurs locaux
Commerces & acteurs du territoire.

🔒

Zéro tracking
Aucune revente de données.

📸

Reportages & matériel
Photo/vidéo, déplacements, hébergement.

Le plus simple : autoriser baugeplus.com

Copiez le domaine, ajoutez-le en liste blanche dans votre bloqueur,
puis rechargez la page.

🌐
baugeplus.com

📋 Copier

Étape 1/3 : copier le domaine
~30 sec

📌 Voir le guide (par bloqueur)
🔄 Je recharge ensuite

✅
Une fois autorisé, le message “Adblock détecté” disparaît et vous soutenez directement BaugéPlus.

📌 Guide liste blanche — choisissez votre bloqueur / navigateur

Instructions rapides + raccourcis clavier. Si besoin, on vous guide pas à pas.

🧩 uBlock Origin
🧱 AdBlock / Adblock Plus
🛡️ Brave Shields
🦊 Firefox (Protection)
🧭 Safari
🌊 Edge
📶 Pi-hole / DNS / Réseau

🧩 uBlock Origin — autoriser baugeplus.com

La méthode la plus simple : désactiver uBlock uniquement pour ce site, puis recharger.

Sur BaugéPlus, cliquez sur l’icône uBlock dans la barre du navigateur.

Cliquez sur le bouton Power (il devient grisé pour ce site).

Rechargez la page : Ctrl + R (Windows) / ⌘ + R (Mac).

✅

Astuce : si l’icône uBlock n’apparaît pas, ouvrez le menu “Extensions” (puzzle) puis épinglez uBlock.
Ensuite refaites les 3 étapes ci-dessus.

🧱 AdBlock / Adblock Plus — mettre baugeplus.com en liste blanche

Les intitulés varient selon l’extension, mais l’idée est toujours la même : “ne pas bloquer sur ce site”.

Sur BaugéPlus, cliquez sur l’icône AdBlock / ABP.

Choisissez “Ne pas bloquer sur ce site” ou “Autoriser sur ce site”.

Confirmez si demandé, puis rechargez la page.

🔒

Rappel : sur BaugéPlus, ce sont uniquement des bannières locales sans tracking.
Vous soutenez directement un média associatif.

🛡️ Brave — désactiver les Shields pour baugeplus.com

Brave bloque via ses “Shields”. On peut les couper uniquement pour ce site.

Sur BaugéPlus, cliquez sur l’icône bouclier (à droite de la barre d’adresse).

Basculez Shields OFF (désactivé) pour ce site.

Rechargez la page.

☕

Bonus : un petit geste, un grand soutien.
Et promis, on ne vous inonde pas : pas d’auto-play sonore, pas de pop-up agressive.

🦊 Firefox — protection renforcée contre le pistage

Firefox peut bloquer des éléments via sa protection. On peut la réduire pour ce site (sans désactiver partout).

Sur BaugéPlus, cliquez sur l’icône bouclier à gauche de la barre d’adresse.

Désactivez la protection pour ce site (ou mettez un niveau moins strict si disponible).

Rechargez la page.

✅

Important : BaugéPlus n’utilise pas de tracking “gros groupes”.
Les annonces sont locales et gérées en interne.

🧭 Safari — extensions & bloqueurs de contenu

Sur Safari (Mac/iPhone/iPad), le blocage vient souvent d’une extension “content blocker”.

Ouvrez BaugéPlus dans Safari.

Cliquez sur aA (ou l’icône d’options du site) dans la barre d’adresse.

Recherchez l’option liée au blocage de contenu / extensions et désactivez-la pour ce site.

Rechargez la page.

📱

Sur iPhone/iPad : allez dans Réglages → Safari → Extensions, puis autorisez pour baugeplus.com si besoin.

🌊 Edge — extensions + sécurité

Edge fonctionne comme Chrome : l’extension se gère via l’icône “puzzle” ou directement l’extension.

Sur BaugéPlus, cliquez sur l’icône Extensions (puzzle).

Ouvrez votre bloqueur et choisissez Autoriser sur ce site / Liste blanche.

Rechargez la page.

🛠️

Si vous ne trouvez pas : menu Edge → Extensions → paramètres de l’extension → “sites autorisés”.

📶 Pi-hole / DNS / blocage réseau — autoriser le domaine

Si le blocage vient du réseau (Pi-hole, DNS filtrant), il faut autoriser les domaines utilisés pour afficher les bannières.

Vérifiez si vous utilisez un système type Pi-hole / AdGuard DNS / filtrage box.

Ajoutez baugeplus.com en allowlist (liste autorisée).

Rechargez la page sur BaugéPlus.

ℹ️

Besoin d’aide : si vous me donnez votre système (Pi-hole / DNS), je vous fournis la procédure exacte.

✅ J’ai ajouté en liste blanche
🔄 Retour & recharger sur BaugéPlus
❓ Questions fréquentes

💡 Pourquoi c’est important ? (transparence)

Simple, clair, sans jargon : ce que finance réellement la publicité locale.

📰

Reportages & actualités
Temps de terrain, rédaction, publication.

🎥

Matériel photo / vidéo
Qualité pro, images fidèles, couverture d’événements.

🌐

Hébergement du site
Serveur, sécurité, maintenance, sauvegardes.

🔒

Ce que BaugéPlus ne fait pas : pas de tracking de “gros groupes”, pas de régie intrusive, pas de données revendues.
Uniquement des bannières locales, réalisées en interne, pour financer le média.

❓ FAQ — on répond aux questions courantes

Pour rassurer : publicité locale ≠ tracking massif.

🤔 “J’ai Adblock… je dois le désactiver partout ?”
⌄

Non. L’objectif est de l’autoriser uniquement pour baugeplus.com. Cela soutient le média local
sans changer vos réglages pour les autres sites.

🔒 “Est-ce que je vais être pisté ?”
⌄

BaugéPlus fonctionne avec des bannières locales réalisées en interne : pas de tracking GAFAM, pas de régies publicitaires agressives,
pas de revente de données.

🧠 “Pourquoi ne pas faire un abonnement ?”
⌄

Possible à terme, mais aujourd’hui le modèle le plus simple pour un média associatif 100% bénévole reste la publicité locale.
Votre “liste blanche” est un geste rapide qui a un impact direct.

☕ “Le café, c’est obligatoire ?”
⌄

Non 😄 Mais on ne va pas vous mentir : entre les déplacements, la rédaction et le montage… il arrive qu’un café sauve une soirée.

🆘 “Je n’y arrive pas, vous pouvez m’aider ?”
⌄

Oui. Dites-nous votre navigateur (Chrome/Firefox/Brave/Safari) et votre bloqueur (uBlock/Adblock/ABP, etc.),
et on vous guide en 2 messages.

Merci pour votre soutien 💛

BaugéPlus • Association loi 1901 • 100% bénévoles • Annonceurs locaux

Retour BaugéPlus
Guide liste blanche
FAQ
Haut de page

Copié ✅

const DOMAIN = "baugeplus.com";

// Pill -> guide switching
const pills = Array.from(document.querySelectorAll(".pill"));
const guides = {
ublock: document.getElementById("g-ublock"),
adblock: document.getElementById("g-adblock"),
brave: document.getElementById("g-brave"),
firefox: document.getElementById("g-firefox"),
safari: document.getElementById("g-safari"),
edge: document.getElementById("g-edge"),
dns: document.getElementById("g-dns"),
};

pills.forEach(btn => {
btn.addEventListener("click", () => {
pills.forEach(b => b.classList.remove("active"));
btn.classList.add("active");

Object.values(guides).forEach(g => g && g.classList.remove("show"));
const target = btn.getAttribute("data-target");
if(guides) guides.classList.add("show");

// update progress subtly
markStep(1, true);
});
});

// Copy domain
async function copyDomain(){
try{
await navigator.clipboard.writeText(DOMAIN);
toast("Domaine copié : " + DOMAIN + " ✅");
markStep(1);
}catch(e){
// fallback
const temp = document.createElement("textarea");
temp.value = DOMAIN;
document.body.appendChild(temp);
temp.select();
document.execCommand("copy");
document.body.removeChild(temp);
toast("Domaine copié : " + DOMAIN + " ✅");
markStep(1);
}
}

// Toast
let toastTimer = null;
function toast(msg){
const t = document.getElementById("toast");
if(!t) return;
t.textContent = msg;
t.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(() => t.classList.remove("show"), 1600);
}

// Progress (3 steps)
// 1: copy domain, 2: whitelist done, 3: reload
const bar = document.getElementById("bar");
const progressLabel = document.getElementById("progressLabel");
const progressHint = document.getElementById("progressHint");

let step = 1;

function markStep(n, silent=false){
step = Math.max(step, n);
const pct = step === 1 ? 33 : (step === 2 ? 66 : 100);

if(bar) bar.style.width = pct + "%";

if(progressLabel){
if(step === 1) progressLabel.textContent = "Étape 1/3 : copier le domaine";
if(step === 2) progressLabel.textContent = "Étape 2/3 : ajouter en liste blanche";
if(step === 3) progressLabel.textContent = "Étape 3/3 : recharger BaugéPlus";
}
if(progressHint){
progressHint.textContent = step < 3 ? "~30 sec" : "c’est bon ✅";
}

if(!silent){
if(step === 1) toast("Copié ✅ Maintenant : autorisez sur votre bloqueur.");
if(step === 2) toast("Parfait ✅ Il reste à recharger BaugéPlus.");
if(step === 3) toast("Merci 💛 Vous soutenez l’info locale.");
}
}

function openAllFAQ(){
document.querySelectorAll("#faq details").forEach(d => d.open = true);
toast("FAQ ouverte ✅");
document.getElementById("faq").scrollIntoView({behavior:"smooth", block:"start"});
}

// Small UX: detect platform keys for reload hint (not mandatory)
(function init(){
// Set initial progress bar
markStep(1, true);

// Replace the visible domain if you ever want another domain
const dt = document.getElementById("domainText");
if(dt) dt.textContent = DOMAIN;

// CTA: if user scrolls to guide, consider step 1 done when they click copy.
})();