:root{
--primary:#567b1b;--primary-dark:#3f5c12;--secondary:#1e3a5f;--accent:#d97706;
--danger:#dc2626;--success:#16a34a;--warning:#d97706;--info:#2563eb;
--ink:#131a1f;--muted:#64748b;--line:#dde3d6;--bg:#f5f7f2;--card:#fff;
--shadow:0 18px 50px rgba(86,123,27,.11);--radius:20px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.announcement{background:#02142a;color:#dff9f5;text-align:center;padding:9px 16px;font-size:13px;font-weight:700}
.public-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:14px max(24px,calc((100% - 1400px)/2));background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand,.sidebar-brand{display:flex;align-items:center;gap:12px}.brand span:last-child,.sidebar-brand span:last-child{display:flex;flex-direction:column}.brand small,.sidebar-brand small{color:var(--muted);font-size:11px;margin-top:2px}
.brand-mark{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:950;box-shadow:0 10px 25px rgba(86,123,27,.24)}
.public-nav{display:flex;gap:22px;align-items:center;font-weight:750;font-size:14px}.mobile-menu{display:none;border:0;background:none;font-size:25px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:13px;padding:12px 18px;font-weight:850;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff}.btn-secondary{background:var(--secondary);color:#fff}.btn-soft{background:#e6efd9;color:var(--primary-dark)}.btn-outline{background:#fff;color:var(--primary);border:1px solid var(--line)}.btn-danger{background:var(--danger);color:#fff}.btn-warning{background:var(--accent);color:#342400}.btn-sm{padding:8px 11px;font-size:12px}
.hero{padding:78px 24px 64px;background:radial-gradient(circle at 86% 15%,rgba(30,58,95,.20),transparent 27%),radial-gradient(circle at 10% 5%,rgba(86,123,27,.18),transparent 28%),linear-gradient(135deg,#f5f8f1,#f5f8f1)}
.hero-grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}.pill{display:inline-flex;padding:8px 13px;border-radius:999px;background:#e6efd9;color:var(--primary-dark);font-size:13px;font-weight:850;border:1px solid #cfe0b8}
.hero h1{font-size:54px;line-height:1.05;letter-spacing:-2.3px;margin:18px 0}.hero p{font-size:18px;line-height:1.75;color:#4f6864}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.hero-proof{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;font-weight:750;color:#516c67}
.digital-card{background:#fff;border-radius:26px;padding:25px;border:1px solid rgba(86,123,27,.14);box-shadow:var(--shadow);position:relative;overflow:hidden}.digital-card:before{content:"";position:absolute;right:-55px;top:-55px;width:190px;height:190px;border-radius:50%;background:linear-gradient(135deg,rgba(30,58,95,.18),rgba(86,123,27,.12))}
.card-top,.card-bottom{display:flex;align-items:center;justify-content:space-between;position:relative}.card-main{display:grid;grid-template-columns:88px 1fr 82px;gap:17px;align-items:center;margin:27px 0;position:relative}.portrait{width:88px;height:100px;border-radius:18px;background:#e6efd9;display:grid;place-items:center;font-size:40px}.card-main h3{font-size:21px;margin:0 0 7px}.card-main p{font-size:13px;margin:4px 0;color:#57706c}.member-no{font-weight:900;color:var(--primary);letter-spacing:.4px}.qr-demo{width:78px;height:78px;border:6px solid white;outline:1px solid #c7d8d5;border-radius:8px;background:repeating-conic-gradient(#02142a 0 25%,#fff 0 50%) 0/16px 16px}.card-bottom{padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.status{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:850}.status.success{background:#e6efd9;color:#166534}.status.warning{background:#fef3c7;color:#92400e}.status.danger{background:#fee2e2;color:#991b1b}.status.info{background:#dbeafe;color:#1e40af}
.section{max-width:1240px;margin:auto;padding:72px 24px}.section-head{text-align:center;max-width:780px;margin:0 auto 40px}.section-head h1,.section-head h2{font-size:38px;letter-spacing:-1.3px;margin:0 0 12px}.section-head p{font-size:16px;line-height:1.65;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card,.public-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:23px;box-shadow:0 8px 25px rgba(86,123,27,.05)}.feature-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#e6efd9;font-size:23px}.feature-card h3{font-size:17px;margin:16px 0 8px}.feature-card p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.public-footer{background:#02142a;color:#fff;padding:48px 24px 20px}.footer-grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.footer-grid a,.footer-grid p{display:block;color:#bdd9d5;margin:9px 0}.copyright{max-width:1240px;margin:30px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.15);color:#9fc4bf;font-size:13px}
.auth-shell{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:45px 20px;background:radial-gradient(circle at 20% 10%,rgba(86,123,27,.14),transparent 28%),var(--bg)}.auth-card{width:min(100%,560px);background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}.auth-card h1{font-size:30px;margin:8px 0}.auth-card>p{color:var(--muted);line-height:1.55}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:13px;font-weight:800}.field input,.field select,.field textarea{width:100%;border:1px solid #cddeda;border-radius:12px;padding:12px 13px;background:#fff;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(86,123,27,.1)}.help{font-size:11px;color:var(--muted)}
.toast{position:fixed;top:82px;right:20px;z-index:90;padding:13px 16px;border-radius:12px;color:#fff;box-shadow:var(--shadow);animation:fadeout 6s forwards}.toast.success{background:var(--success)}.toast.danger{background:var(--danger)}.toast.warning{background:var(--warning)}.toast.info{background:var(--info)}@keyframes fadeout{0%,80%{opacity:1}100%{opacity:0;pointer-events:none}}
.dashboard-body{background:#edf4f2}.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;background:#0b403b;color:#fff;padding:20px 16px;display:flex;flex-direction:column;z-index:50}.sidebar-brand{padding:3px 7px 20px}.sidebar-brand .brand-mark{width:42px;height:42px}.sidebar-brand small{color:#99c1bc}.sidebar-nav{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sidebar-nav::-webkit-scrollbar{width:7px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px}.sidebar-nav a{display:flex;align-items:center;gap:11px;padding:12px;border-radius:11px;color:#d4e8e5;font-size:14px;font-weight:720}.sidebar-nav a:hover,.sidebar-nav a.active{background:#17625b;color:#fff}.sidebar-nav span{width:22px;text-align:center}.sidebar-user{margin-top:auto;padding:13px 9px;border-top:1px solid rgba(255,255,255,.13);display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center}.sidebar-user small{display:block;color:#9fc4bf;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:125px}.avatar-sm{width:38px;height:38px;border-radius:50%;background:#dff5f1;color:var(--primary-dark);display:grid;place-items:center;font-weight:900}
.dashboard-main{margin-left:260px;min-height:100vh}.dashboard-top{height:76px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 25px;position:sticky;top:0;z-index:30}.dashboard-top h1{font-size:22px;margin:0}.dashboard-top p{font-size:12px;color:var(--muted);margin:3px 0 0}.dash-actions{display:flex;gap:9px}.sidebar-toggle{display:none}.dashboard-content{padding:24px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:19px}.stat-card span{font-size:12px;color:var(--muted);font-weight:800}.stat-card strong{display:block;font-size:28px;margin:7px 0}.stat-note{font-size:11px;color:var(--success);font-weight:800}.grid-2{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:19px;margin-bottom:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.panel-head h2,.panel-head h3{margin:0;font-size:17px}.muted{color:var(--muted)}.small{font-size:12px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:12px 10px;text-align:left;border-bottom:1px solid #edf2f1;vertical-align:middle}th{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.actions{display:flex;gap:6px;flex-wrap:wrap}.empty{text-align:center;padding:38px 15px;color:var(--muted)}.empty-icon{font-size:38px;margin-bottom:8px}
.timeline{display:flex;flex-direction:column;gap:13px}.timeline-item{display:grid;grid-template-columns:39px 1fr;gap:11px}.timeline-icon{width:39px;height:39px;border-radius:12px;background:#e7f6f3;display:grid;place-items:center}.timeline-item strong{font-size:13px}.timeline-item p{font-size:12px;line-height:1.45;margin:4px 0;color:var(--muted)}
.dropzone{border:2px dashed #bcd0a3;border-radius:15px;padding:24px;text-align:center;background:#f7faf3}.dropzone input{max-width:100%}.camera-box video,.camera-box canvas{max-width:100%;border-radius:14px;background:#102d2a}.profile-card{background:linear-gradient(155deg,#567b1b,#0b514c);color:#fff;border-radius:20px;padding:24px}.profile-card .portrait{margin-bottom:15px}.profile-card p{color:#d4efeb}.profile-card .btn{width:100%;margin-top:15px}.progress{height:10px;background:#dfeae8;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:var(--primary)}.document-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fafcfc;margin-bottom:9px}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.article-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.article-cover{height:170px;background:linear-gradient(135deg,#d8efea,#ddebfa);display:grid;place-items:center;font-size:50px}.article-card .body{padding:19px}.article-card h3{margin:8px 0;font-size:18px}.article-card p{font-size:13px;line-height:1.55;color:var(--muted)}
.card-print-wrap{max-width:760px;margin:auto}.member-card-print{background:linear-gradient(135deg,#fff,#eef9f7);border:1px solid #bdd8d3;border-radius:24px;padding:28px;box-shadow:var(--shadow)}.print-actions{text-align:center;margin:18px}.verification-code{font-family:ui-monospace,monospace;font-weight:900;letter-spacing:1px}
@media(max-width:1050px){.feature-grid,.stat-grid{grid-template-columns:repeat(2,1fr)}.hero-grid,.grid-2{grid-template-columns:1fr}.article-grid,.grid-3{grid-template-columns:1fr 1fr}.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.dashboard-main{margin-left:0}.sidebar-toggle{display:inline-flex}}
@media(max-width:700px){.public-nav{display:none;position:absolute;left:15px;right:15px;top:78px;background:#fff;padding:15px;border-radius:15px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.public-nav.open{display:flex}.mobile-menu{display:block}.hero h1{font-size:38px}.feature-grid,.stat-grid,.article-grid,.grid-3,.form-grid,.footer-grid{grid-template-columns:1fr}.card-main{grid-template-columns:75px 1fr}.qr-demo{display:none}.dashboard-content{padding:15px}.dashboard-top{padding:0 15px}.dash-actions .btn span{display:none}}
@media print{body{background:#fff}.sidebar,.dashboard-top,.print-actions,.public-header,.announcement,.public-footer{display:none!important}.dashboard-main{margin:0}.dashboard-content{padding:0}.member-card-print{box-shadow:none;border:2px solid #567b1b}}
/* V6 premium */
.hero-panel{background:linear-gradient(125deg,#02142a,#567b1b 58%,#1e3a5f);color:#fff;border-radius:24px;padding:28px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;box-shadow:0 22px 55px rgba(7,63,58,.22)}
.hero-panel h2{font-size:28px;margin:12px 0 7px}.hero-panel p{max-width:760px;color:#d8f5f1;margin:0;line-height:1.6}.scanner-orb{width:105px;height:105px;border-radius:34px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);display:grid;place-items:center;font-size:52px;transform:rotate(5deg)}
.scan-file-card{border:1px solid var(--line);border-radius:17px;padding:16px;margin-bottom:14px;background:linear-gradient(145deg,#fff,#f7fbfa)}.scan-file-title{display:flex;align-items:center;gap:12px;margin-bottom:14px}.scan-file-title>span{width:45px;height:45px;border-radius:13px;background:#e6efd9;display:grid;place-items:center;font-size:22px}.scan-file-title small{display:block;color:var(--muted);margin-top:3px}.form-grid.compact{gap:10px}.steps{padding-left:21px;color:var(--muted);line-height:1.65}.steps li{margin-bottom:8px}.dashboard-body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 95% 5%,rgba(30,58,95,.08),transparent 23%),radial-gradient(circle at 18% 90%,rgba(86,123,27,.07),transparent 22%)}
.panel,.stat-card{box-shadow:0 10px 30px rgba(86,123,27,.055)}
@media(max-width:700px){.hero-panel{align-items:flex-start}.scanner-orb{display:none}}

.address-autocomplete{position:relative}.address-results:empty{display:none}.address-results{position:absolute;z-index:80;left:0;right:0;top:78px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden}.address-option{display:block;width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;cursor:pointer}.address-option:hover{background:#eaf7f4}.address-error{padding:12px;color:var(--danger)}.warning-box{padding:14px;border-radius:13px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}.security-badge{display:inline-flex;gap:7px;align-items:center;padding:7px 10px;border-radius:999px;background:#e6efd9;color:#166534;font-size:12px;font-weight:800}

.stripe-element-box{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;min-height:90px}
.signature-pad{display:block;max-width:100%;margin:12px 0}
.security-badge{display:inline-flex;padding:7px 10px;border-radius:999px;background:#e6efd9;color:#166534;font-size:11px;font-weight:850}

.account-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.account-type-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:18px;border:2px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:.2s}
.account-type-card:hover{border-color:var(--primary);transform:translateY(-1px)}
.account-type-card:has(input:checked){border-color:var(--primary);background:#eefaf7;box-shadow:0 0 0 3px rgba(86,123,27,.08)}
.account-type-card input{position:absolute;right:13px;top:13px}
.account-type-card .account-icon{font-size:28px}
.account-type-card small{color:var(--muted);line-height:1.4}
.professional-box{padding:20px;border:1px solid #bcd8d3;border-radius:17px;background:linear-gradient(135deg,#f3fbf9,#eff8ff)}
.professional-box h3{margin-top:0}
.professional-cta{display:grid;grid-template-columns:1.3fr .7fr;gap:25px;align-items:center;background:linear-gradient(135deg,#f5f8f1,#f5f8f1)}
.professional-cta h2{font-size:34px;margin:14px 0 8px}
.professional-cta p{color:var(--muted);line-height:1.7}
@media(max-width:800px){.account-type-grid,.professional-cta{grid-template-columns:1fr}}

img{max-width:100%;height:auto}
@media(max-width:640px){.article-grid{grid-template-columns:1fr}}

/* Articles au contenu riche (.campgo-article) — lisibilité mobile */
@media(max-width:600px){
 .campgo-article{padding:12px !important;box-shadow:none !important}
 .campgo-article>div{padding:22px 16px !important}
 .campgo-article h1{font-size:24px !important;line-height:1.25 !important}
 .campgo-article h2{font-size:19px !important;margin-top:26px !important}
 .campgo-article p,.campgo-article li{font-size:15px !important;line-height:1.65 !important}
 .campgo-article table{display:block;overflow-x:auto}
}

/* Page article en pleine largeur (contenu riche collé) */
.article-rich{width:100%;max-width:100%;margin:0;padding:0;overflow-x:hidden}
.article-rich-head{max-width:1080px;margin:0 auto;padding:34px 24px 6px}
.article-rich-head h1{font-size:40px;letter-spacing:-1.2px;line-height:1.18;margin:12px 0 10px}
.article-rich-head .article-lead{font-size:18px;line-height:1.6;color:var(--muted);margin:0 0 6px}
.article-rich-head img{width:100%;max-height:440px;object-fit:cover;border-radius:16px;margin:14px 0 0}
.article-rich-topbar{max-width:1200px;margin:0 auto;padding:20px 24px 0}
.article-back{display:inline-block;margin-bottom:12px;color:var(--primary-dark);font-weight:700;font-size:14px}
.article-rich-body{width:100%;max-width:100%;overflow-x:hidden}
.article-rich-body img{max-width:100%;height:auto}
.article-rich-body table{max-width:100%;overflow-x:auto;display:block}
@media(max-width:600px){
 .article-rich-head{padding:22px 18px 2px}
 .article-rich-head h1{font-size:26px}
 .article-rich-head .article-lead{font-size:16px}
 .article-rich-topbar{padding:16px 18px 0}
}

/* Bouton flottant d'assistance (mascotte) */
.assist-fab{position:fixed;right:20px;bottom:20px;z-index:900;display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 14px;border-radius:999px;color:#fff;font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 10px 28px rgba(2,132,199,.45);background:linear-gradient(270deg,#f97316,#e11d48,#7c3aed,#1e3a5f);background-size:800% 800%;animation:assistGrad 8s ease infinite, assistBob 2.6s ease-in-out infinite}
.assist-fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 34px rgba(2,132,199,.55)}
.assist-fab-emoji{font-size:24px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.assist-fab::before{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(30,58,95,.6);animation:assistPulse 2.2s infinite}
@keyframes assistGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes assistBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes assistPulse{0%{box-shadow:0 0 0 0 rgba(30,58,95,.55)}70%{box-shadow:0 0 0 16px rgba(30,58,95,0)}100%{box-shadow:0 0 0 0 rgba(30,58,95,0)}}
@media(max-width:600px){.assist-fab{right:14px;bottom:14px;padding:11px 16px 11px 12px;font-size:14px}.assist-fab-emoji{font-size:21px}}
@media(prefers-reduced-motion:reduce){.assist-fab,.assist-fab::before{animation:none}}

/* Article réservé — dégradé façon "aperçu" (le texte s'estompe puis invitation) */
.article-gate-fade{position:relative;max-height:620px;overflow:hidden}
.article-gate-fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;background:linear-gradient(to bottom,rgba(255,255,255,0),#ffffff 92%);pointer-events:none}
.article-gate-cta{max-width:640px;margin:-40px auto 44px;position:relative;z-index:2;padding:28px 24px;border:1px solid #bfe3dd;border-radius:18px;background:linear-gradient(135deg,#f5f8f1,#f5f8f1);text-align:center;box-shadow:0 12px 34px rgba(86,123,27,.12)}
.article-gate-badge{display:inline-flex;align-items:center;gap:6px;background:#fef3c7;color:#b45309;font-weight:800;font-size:.72rem;letter-spacing:.4px;padding:5px 12px;border-radius:999px;margin-bottom:8px}

/* Partage pour lire (articles) */
.article-share-box{margin:20px auto 0;max-width:520px;padding:18px 16px;border:1px dashed #9fd0c8;border-radius:14px;background:rgba(255,255,255,.7)}
.article-share-title{font-weight:800;color:#567b1b;margin-bottom:4px}
.article-share-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px}
.share-net{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;color:#fff;font-weight:700;font-size:.9rem;text-decoration:none}
.share-fb{background:#1877f2}.share-wa{background:#25d366}.share-x{background:#0f1419}.share-li{background:#0a66c2}
.share-net:hover{filter:brightness(1.05);transform:translateY(-1px)}
.article-share-confirm{opacity:.5;pointer-events:none}
.article-share-confirm.is-armed{opacity:1;pointer-events:auto}
.article-share-hint{margin-top:9px}

.share-net svg{flex:0 0 auto}
.share-net span{white-space:nowrap}

/* Footer compact sur mobile */
@media(max-width:700px){
  .public-footer{padding:18px 16px 80px}
  .footer-grid{gap:10px;text-align:left}
  .public-footer .brand-mark{transform:scale(.78);transform-origin:left top;margin-bottom:0}
  .public-footer h3{font-size:1rem;margin:2px 0}
  .public-footer h4{margin:0 0 2px;font-size:.9rem}
  .footer-grid p{font-size:.84rem;line-height:1.3;margin:2px 0}
  .footer-grid a{margin:3px 0;font-size:.9rem}
  .copyright{margin-top:10px;padding-top:9px;font-size:11.5px}
}

/* ---- Cartes « Documents utiles » ------------------------------------------
   La catégorie est saisie librement en administration : certaines tiennent en
   deux mots, d'autres sont une phrase entière en majuscules. Sur une simple
   pastille, la longue catégorie passait sur quatre lignes, poussait le prix
   à la ligne et faisait descendre le titre et le bouton DE CETTE CARTE
   seulement — d'une carte à l'autre, plus rien n'était aligné.
   On fige donc la hauteur de l'en-tête, on tronque la catégorie sur une seule
   ligne (le libellé complet reste dans l'infobulle) et on colle le bouton en
   bas de carte. */
.doc-card{display:flex;flex-direction:column;gap:9px;height:100%}
.doc-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px}
.doc-card-head .pill{
  display:block;min-width:0;max-width:100%;padding:7px 12px;font-size:12px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-card-head .status{flex:0 0 auto;white-space:nowrap}
/* Le titre et la description sont clampés sur 3 lignes. Ils doivent être
   dans un conteneur intermédiaire : un enfant direct d'une boîte flex est
   « blockifié » par le navigateur, qui ignore alors le clamp et coupe le
   texte au milieu d'une ligne. */
.doc-card-body{display:block}
.doc-card-title{
  margin:2px 0 0;font-size:1.06rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(3 * 1.35em)}
.doc-card-desc{
  margin:0;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(3 * 1.45em)}
.doc-card-foot{margin-top:auto}
.doc-card-foot .btn{width:100%;justify-content:center;text-align:center}
.doc-card-meta{text-align:right}
@media(max-width:640px){
  .doc-card-title,.doc-card-desc{min-height:0}
}

/* ---- Champ téléphone avec drapeau français --------------------------------
   Le drapeau + « +33 » sont décoratifs : la personne saisit son numéro
   normalement (06 12 34 56 78). Le serveur remet le numéro au format
   national avant de l'enregistrer, pour que les SMS partent toujours. */
.phone-fr{display:flex;align-items:stretch;width:100%}
.phone-fr .phone-flag{
  display:flex;align-items:center;gap:7px;padding:0 12px;
  border:1px solid #cddeda;border-right:0;border-radius:12px 0 0 12px;
  background:#f5f7f2;color:#41615c;font-weight:800;font-size:14px;white-space:nowrap;user-select:none}
.phone-fr .phone-flag .flag{display:block;border:1px solid #d7e3e0;border-radius:2px}
.phone-fr input{border-radius:0 12px 12px 0;flex:1 1 auto;min-width:0}
.phone-fr:focus-within .phone-flag{border-color:var(--primary)}

/* Entre 700 et 1150px la barre de navigation passait sur deux lignes :
   on resserre l'espacement plutôt que de retirer un lien du menu. */
/* Un intitule de menu ne doit JAMAIS se couper en deux : c'est ce qui rendait la
   barre illisible a TOUTES les largeurs, sans jamais provoquer de debordement. */
@media(min-width:1280px){.public-nav a{white-space:nowrap}}
@media(min-width:1280px) and (max-width:1420px){.public-nav{gap:14px;font-size:13.5px}.public-header .brand{max-width:230px}}

/* Le menu déroulant (☰) n'apparaissait qu'en dessous de 700px : entre 700 et
   900px (tablette en portrait) la barre débordait déjà de l'écran et la page
   défilait horizontalement. On bascule maintenant sur le menu ☰ dès 900px. */
/* Le menu passe en burger dès 1024 px : avec le lien « Documents », la barre
   débordait de 73 px à 901 px et repassait sur deux lignes jusqu'à ~1020 px. */
@media(max-width:1279px){.public-nav{display:none;position:absolute;left:15px;right:15px;top:78px;background:#fff;padding:15px;border-radius:15px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;font-size:14px;gap:12px;z-index:60}.public-nav.open{display:flex}.mobile-menu{display:block}}
/* Aperçu des fichiers choisis (voir app.js) */
.file-preview{display:none;gap:8px;flex-wrap:wrap;margin-top:8px}
.file-preview figure{margin:0;width:92px}
.file-preview img{width:92px;height:70px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block;background:#f1f5f9}
.file-preview .file-preview-doc{width:92px;height:70px;border-radius:9px;border:1px solid var(--line);background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;color:#64748b}
.file-preview figcaption{font-size:.66rem;color:#64748b;text-align:center;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Documents utiles : recherche, thèmes, fiche et remplissage ---- */
.doc-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.doc-filters input[type=search]{flex:1 1 240px;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:12px;font-size:1rem}
.doc-themes{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.doc-theme{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.82rem;font-weight:600;color:#334155;text-decoration:none}
.doc-theme span{background:#f1f5f9;border-radius:999px;padding:0 7px;font-size:.72rem;color:#64748b}
.doc-theme:hover{border-color:#567b1b;color:#567b1b}
.doc-theme.is-on{background:#567b1b;border-color:#567b1b;color:#fff}
.doc-theme.is-on span{background:rgba(255,255,255,.22);color:#fff}
.doc-card-title a{color:inherit;text-decoration:none}
.doc-card-title a:hover{color:#567b1b}
.doc-fillable{margin:6px 0 0;font-size:.78rem;font-weight:700;color:#567b1b}
.doc-hero{background:linear-gradient(135deg,#f5f8f1,#f5f8f1);border:1px solid #cfe9e2;border-radius:18px;padding:22px}
.doc-hero h1{font-size:clamp(1.35rem,4vw,1.9rem);line-height:1.25}
.doc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.doc-actions .btn{flex:0 1 auto}
.doc-block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:16px}
.doc-block h2{font-size:1.05rem;margin:0 0 8px}
.doc-block-green{background:#f4fbf8;border-color:#cfe9e2}
.doc-steps{margin:0;padding-left:20px;line-height:1.7}
.doc-note{background:#eff6ff;border:1px solid #bfdbfe;border-radius:14px;padding:12px 14px;margin:0 0 14px;font-size:.9rem}
.doc-note-green{background:#f5f8f1;border-color:#a7f3d0}
@media(max-width:560px){
  .doc-hero{padding:16px;border-radius:14px}
  .doc-actions .btn{width:100%;justify-content:center}
}

/* ---- Mes données : sécurité et suppression ---- */
.data-safe{background:linear-gradient(135deg,#f5f8f1,#f5f8f1);border:1px solid #cfe9e2}
.data-safe h2{margin-top:0}
.data-list{margin:0;padding-left:20px;line-height:1.75;font-size:.93rem}
.data-list li{margin-bottom:5px}
.data-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.data-row:last-child{border-bottom:0}
.data-row .actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.data-thumb{width:56px;height:56px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#f1f5f9}
.data-del{color:#b91c1c;border-color:#fecaca}
.data-del:hover{background:#fef2f2}
.data-danger{border:1px solid #fecaca;background:#fff8f8}
.data-danger h2{margin-top:0;color:#b91c1c}
.data-wipe{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.data-wipe input{padding:9px 12px;border:1px solid var(--line);border-radius:10px;max-width:220px}
@media(max-width:560px){
  .data-row .actions{margin-left:0;width:100%}
  .data-row .actions .btn{flex:1;justify-content:center}
  .data-wipe input,.data-wipe .btn{width:100%;max-width:none}
}

/* ---- Fiche document : fil d'Ariane et contenu ---- */
.doc-page{max-width:840px;margin-inline:auto}
.doc-crumbs{font-size:.82rem;color:#64748b;margin:0 0 14px;line-height:1.7}
.doc-crumbs a{color:#567b1b;text-decoration:none}
.doc-crumbs a:hover{text-decoration:underline}
.doc-crumbs span{margin:0 4px;color:#cbd5e1}
.doc-crumbs strong{color:#334155;font-weight:700}
.doc-block p{line-height:1.7}
.doc-links{margin:0;padding-left:20px;line-height:1.8}
.doc-links a{color:#567b1b}

/* ---- Actions en lot de l'importateur ---- */
.doc-bulk{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 16px}
.doc-bulk form{margin:0}
.doc-bulk span{flex:1 1 260px;min-width:0}

/* Sélecteur de thème : liste déroulante sur téléphone, pastilles au-dessus. */
.doc-theme-select{display:none;gap:8px;align-items:center;margin:0 0 16px}
.doc-theme-select label{font-weight:700;font-size:.85rem;color:#475569;flex:0 0 auto}
.doc-theme-select select{flex:1 1 auto;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;font-size:1rem;background:#fff}
@media(max-width:700px){
  .doc-theme-select{display:flex}
  .doc-themes{display:none}
}

/* ---- Bouton et notice d'installation de l'application ---- */
.ada-install{position:fixed;left:16px;bottom:16px;z-index:1000;display:flex;align-items:center;gap:10px;background:#567b1b;color:#fff;border:0;border-radius:999px;padding:11px 14px 11px 18px;font-weight:800;font-size:.9rem;box-shadow:0 10px 26px rgba(86,123,27,.35);cursor:pointer;font-family:inherit}
.ada-install b{font-weight:700;opacity:.7;padding:0 4px;font-size:.95rem}
.ada-install b:hover{opacity:1}
.ada-install-tip{position:fixed;left:12px;right:12px;bottom:78px;z-index:1001;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 18px 40px rgba(15,23,42,.22);max-width:420px;margin-inline:auto;font-size:.92rem;line-height:1.6}
.ada-install-tip strong{display:block;margin-bottom:6px}
.ada-install-tip ol{margin:0 0 12px;padding-left:20px}
.ada-install-tip button{background:#567b1b;color:#fff;border:0;border-radius:10px;padding:9px 16px;font-weight:800;cursor:pointer;font-family:inherit;width:100%}
@media(max-width:700px){
  /* Le bouton flottant « Besoin d'aide ? » occupe le coin droit : on garde le
     bouton d'installation à gauche et on le rétrécit. */
  .ada-install{left:10px;bottom:12px;padding:9px 12px 9px 14px;font-size:.82rem}
}

/* --- Notifications sur l'appareil (Web Push) --- */
.push-card{border-left:4px solid #94a3b8}
.push-card.is-on{border-left-color:#16a34a;background:#f5f8f1}
.push-card.is-off{border-left-color:#d97706}
.push-card .push-state{margin:0 0 12px;line-height:1.6;color:#334155}
.push-card .push-actions{display:flex;gap:10px;flex-wrap:wrap}
/* .btn impose display:inline-flex et l'emporte sur [hidden] du navigateur :
   sans cette ligne, « Désactiver » reste visible alors qu'il est masqué. */
.push-card [hidden]{display:none !important}
.push-card .push-error{margin:12px 0 0;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:9px 12px;line-height:1.5}

/* --- Message de l'association, sous l'en-tete --- */
.site-notice{background:#fffbeb;border-bottom:1px solid #fcd34d}
.site-notice-in{padding:13px max(24px,calc((100% - 1400px)/2));display:flex;gap:11px;align-items:flex-start;color:#78350f;font-size:15px;line-height:1.55;font-weight:600}
.site-notice-in>span{font-size:18px;line-height:1.3;flex:none}
.site-notice a{color:#92400e;text-decoration:underline}
.site-notice p{margin:0 0 6px}.site-notice p:last-child{margin:0}
@media(max-width:700px){.site-notice-in{padding:11px 16px;font-size:14px}}
/* Bloc HTML fourni par l'association : on respecte sa mise en forme, mais on
   empeche la troncature en « … » qui rendait le message illisible sur mobile. */
.site-notice-raw>*{white-space:normal!important;text-overflow:clip!important;overflow:visible!important;max-width:100%;box-sizing:border-box}
/* --- Mentions légales --- */
.legal-shell{max-width:860px;margin:0 auto;padding:30px 18px 64px}
.legal-shell h1{font-size:clamp(1.5rem,4vw,2.1rem);margin:6px 0 18px}
.legal-flag{background:#fffbeb;border:1px solid #fcd34d;border-left:4px solid #d97706;border-radius:14px;
  padding:15px 17px;color:#78350f;line-height:1.6;margin:0 0 22px}
.legal-block{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:16px}
.legal-block h2{font-size:1.12rem;margin:0 0 12px}
.legal-block p{line-height:1.7;margin:0 0 12px;color:#334155}
.legal-block p:last-child{margin-bottom:0}
.legal-block a{color:var(--primary-dark,#567b1b);text-decoration:underline}
.legal-list{display:grid;grid-template-columns:200px 1fr;gap:9px 18px;margin:0}
.legal-list dt{font-weight:800;color:#0f172a}
.legal-list dd{margin:0;color:#334155}
.legal-note{color:var(--muted);font-size:.92rem}
.legal-updated{color:var(--muted);font-size:.85rem;text-align:right;margin:18px 4px 0}
@media(max-width:640px){.legal-list{grid-template-columns:1fr;gap:2px 0}.legal-list dd{margin-bottom:10px}}
/* --- « Vous n'arrivez pas à vous inscrire ? » --- */
.signup-help{display:flex;gap:13px;align-items:flex-start;text-align:left;background:#f5f8f1;border:1px solid #b4cf93;
  border-left:4px solid #567b1b;border-radius:14px;padding:14px 16px;margin:0 0 18px;color:#134e4a}
.signup-help-ico{font-size:20px;line-height:1.2;flex:none}
.signup-help strong{display:block;margin-bottom:4px;font-size:1rem}
.signup-help p{margin:0;line-height:1.55;font-size:.94rem}
.signup-help a{color:#567b1b;font-weight:800;text-decoration:underline}
.signup-help-tel{white-space:nowrap;font-size:1.05rem}
.signup-help-note{margin-top:6px!important;font-size:.86rem;color:#3f6b64}
@media(max-width:520px){.signup-help{padding:12px 13px}.signup-help p{font-size:.9rem}}
/* --- Recherche assistée (avocat, association) --- */
.lk-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:70;background:#fff;
  border:1px solid var(--line);border-radius:13px;box-shadow:0 14px 34px rgba(15,23,42,.16);
  max-height:290px;overflow-y:auto;padding:5px}
.lk-item{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:9px 11px;border-radius:9px;line-height:1.35}
.lk-item:hover,.lk-item.on{background:#f5f8f1}
.lk-name{display:block;font-weight:750;color:#0f172a;font-size:.94rem}
.lk-meta{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.lk-empty{padding:11px;color:var(--muted);font-size:.88rem}
.lk-chosen{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 12px;
  background:#f5f8f1;border:1px solid #b4cf93;border-radius:11px;font-size:.88rem;color:#134e4a}
.lk-chosen b{font-weight:800}
/* --- Inscription en trois étapes --- */
.su-card{width:min(100%,720px)}
.su-steps{display:flex;gap:8px;list-style:none;margin:16px 0 18px;padding:0;counter-reset:none}
.su-steps li{flex:1;display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);
  border-radius:12px;font-size:.84rem;font-weight:750;color:#64748b;background:#fff;min-width:0}
.su-steps li.on{border-color:#567b1b;color:#567b1b;background:#f6faf0}
.su-steps li.done{border-color:#b4cf93;color:#567b1b;background:#f5f8f1}
.su-num{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  background:#e2e8f0;color:#475569;font-size:.78rem;font-weight:800}
.su-steps li.on .su-num{background:#567b1b;color:#fff}
.su-steps li.done .su-num{background:#567b1b;color:#fff}
.su-promise{background:#f5f8f1;border:1px solid #b4cf93;border-left:4px solid #567b1b;border-radius:13px;
  padding:13px 15px;margin:0 0 16px;color:#134e4a;line-height:1.55;font-size:.93rem;text-align:left}
.su-title{font-size:1.15rem;margin:4px 0 14px}
.su-opt{font-weight:400;color:var(--muted);font-size:.85em}
.su-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;line-height:1.5;font-weight:400;text-align:left}
.su-check input{width:auto;margin-top:3px;flex:none}
.su-actions{display:flex;gap:10px;flex-wrap:wrap}
.su-actions .btn{flex:1;min-width:150px}
.su-foot{margin:16px 0 0;font-size:.9rem;color:var(--muted)}
.su-foot a{color:#567b1b;font-weight:750;text-decoration:underline}
@media(max-width:560px){.su-steps li{font-size:.75rem;padding:8px}.su-steps li span:not(.su-num){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.vdocs{background:#f8fafc;border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.vdocs label{display:block;font-weight:750;font-size:.9rem;margin-bottom:5px}
.signup-help.compact{padding:10px 13px;gap:10px}
.signup-help.compact strong{font-size:.94rem;margin-bottom:2px}
.signup-help.compact p{font-size:.87rem;line-height:1.45}
.signup-help.compact .signup-help-note{display:none}
.signup-help.compact .signup-help-ico{font-size:17px}

/* ---- Page 404 -------------------------------------------------------- */
.nf-wrap{max-width:760px;margin:0 auto;text-align:center;padding:8px 0 6px}
.nf-wrap h1{font-size:1.85rem;line-height:1.25;margin:12px 0 10px}
.nf-lead{color:#475569;font-size:1.02rem;line-height:1.6;margin:0 auto 12px;max-width:60ch}
.nf-path{margin:0 0 22px}
.nf-path code{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:7px;padding:5px 10px;
  font-size:.86rem;color:#475569;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.nf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:13px;margin:0 0 22px;text-align:left}
.nf-card{display:block;padding:15px 16px;border:1px solid #e2e8f0;border-radius:13px;background:#fff;
  text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.nf-card:hover{border-color:#567b1b;box-shadow:0 6px 18px rgba(86,123,27,.10);transform:translateY(-2px)}
.nf-ico{display:block;font-size:21px;margin-bottom:7px}
.nf-card strong{display:block;color:#567b1b;font-size:1rem;margin-bottom:3px}
.nf-desc{display:block;color:#64748b;font-size:.87rem;line-height:1.45}
.nf-more{color:#475569;font-size:.93rem;line-height:1.6;margin:0 auto 20px;max-width:62ch}
.nf-more a{color:#567b1b;font-weight:600}
@media(max-width:520px){.nf-wrap h1{font-size:1.5rem}.nf-grid{grid-template-columns:1fr}}

/* ---- Articles rapatries du forum ------------------------------------- */
.ada-topic .article-rich-body{max-width:860px;margin:0 auto}
.ada-topic .article-rich-body img{max-width:100%;height:auto}
.topic-meta{max-width:860px;margin:18px auto 0;color:#64748b;font-size:.88rem}
.topic-cta{max-width:860px;margin:26px auto 0;padding:20px 22px;border:1px solid #b4cf93;
  border-radius:14px;background:linear-gradient(180deg,#f6faf0,#fff)}
.topic-cta h2{margin:0 0 8px;font-size:1.22rem;color:#567b1b}
.topic-cta p{margin:0 0 14px;color:#334155;line-height:1.6;font-size:.96rem}
.topic-cta-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:520px){.topic-cta{padding:16px}.topic-cta h2{font-size:1.1rem}}

/* ---- Sommaire des guides --------------------------------------------- */
.gd-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.gd-jump a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #e2e8f0;
  border-radius:999px;background:#fff;color:#567b1b;text-decoration:none;font-size:.88rem;font-weight:600}
.gd-jump a:hover{border-color:#567b1b;background:#f6faf0}
.gd-jump a span{color:#94a3b8;font-weight:500}
.gd-cat{margin:0 0 30px;scroll-margin-top:90px}
.gd-cat h2{font-size:1.2rem;color:#0f172a;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid #f1f5f9}
.gd-count{display:inline-block;margin-left:6px;font-size:.8rem;color:#94a3b8;font-weight:500}
.gd-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:11px}
.gd-list li{padding:12px 14px;border:1px solid #e2e8f0;border-radius:11px;background:#fff}
.gd-list li:hover{border-color:#b4cf93}
.gd-list a{display:block;color:#567b1b;font-weight:600;text-decoration:none;font-size:.95rem;line-height:1.4}
.gd-list a:hover{text-decoration:underline}
.gd-ex{display:block;margin-top:5px;color:#64748b;font-size:.84rem;line-height:1.45}
@media(max-width:520px){.gd-list{grid-template-columns:1fr}}

.art-more{margin:0 0 20px}

/* ---- Astreinte (bureau ferme) ---------------------------------------- */
.astr-bar{background:#fffbeb;border-bottom:1px solid #fde68a}
.astr-bar-in{max-width:1400px;margin:0 auto;padding:11px 22px;display:flex;gap:11px;align-items:flex-start}
.astr-ico{font-size:17px;line-height:1.5;flex:0 0 auto}
.astr-bar p{margin:0;color:#78350f;font-size:.93rem;line-height:1.55}
.astr-bar strong{color:#663000}
.astr-sep{color:#d6a860;margin:0 3px}
.astr-link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#b45309;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.astr-link:hover{color:#92400e}
.astr-note{color:#a17440;font-size:.86rem}

.astr-modal{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.55);
  display:flex;align-items:center;justify-content:center;padding:18px}
.astr-modal[hidden]{display:none !important}
.astr-box{position:relative;background:#fff;border-radius:15px;max-width:430px;width:100%;
  padding:27px 26px 22px;box-shadow:0 22px 60px rgba(0,0,0,.28);max-height:92vh;overflow:auto}
.astr-x{position:absolute;top:11px;right:12px;background:none;border:0;font-size:17px;
  color:#94a3b8;cursor:pointer;line-height:1;padding:5px}
.astr-x:hover{color:#0f172a}
.astr-box h2{margin:0 0 8px;font-size:1.24rem;color:#0f172a}
.astr-lead{margin:0 0 17px;color:#475569;font-size:.92rem;line-height:1.55}
.astr-box label{display:block;font-weight:600;font-size:.88rem;color:#334155;margin-bottom:5px}
.astr-box input{width:100%;padding:11px 13px;border:1px solid #cbd5e1;border-radius:9px;
  font-size:1rem;font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em}
.astr-box input:focus{outline:2px solid #567b1b;outline-offset:1px;border-color:#567b1b}
.astr-submit{width:100%;margin-top:12px}
.astr-result{margin-top:16px;padding:14px 15px;border-radius:10px;font-size:.93rem;line-height:1.55}
.astr-result[hidden]{display:none !important}
.astr-result p{margin:6px 0 0}
.astr-result.ok{background:#f5f8f1;border:1px solid #cfe0b8;color:#166534}
.astr-result.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.astr-result.no{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.astr-tel{display:block;margin:9px 0 0;font-size:1.42rem;font-weight:800;color:#567b1b;
  text-decoration:none;letter-spacing:.02em}
.astr-tel:hover{text-decoration:underline}
.astr-small{font-size:.85rem;opacity:.85}
.astr-foot{margin:15px 0 0;padding-top:13px;border-top:1px solid #f1f5f9;
  font-size:.87rem;color:#64748b;text-align:center}
.astr-foot a{color:#567b1b;font-weight:700}
@media(max-width:560px){
  .astr-bar-in{padding:10px 15px}
  .astr-bar p{font-size:.88rem}
  .astr-note{display:block}
  .astr-box{padding:23px 19px 19px}
}

.astr-preview{background:#eef2ff;border-bottom-color:#c7d2fe}
.astr-preview p{color:#3730a3}
.astr-preview strong{color:#312e81}
.astr-preview .astr-link{color:#4338ca}

/* --- Encadre de TEXTE (2026-08-29) ------------------------------------
   .status est une PASTILLE : inline-flex, 11px, coins ronds. Des qu'on y
   met une phrase avec un <strong> ou un lien, chaque morceau devient un
   element flex separe et le texte se casse en colonnes. Pour un vrai
   paragraphe encadre, utiliser .note : c'est un bloc, il coule normalement. */
.note{display:block;padding:13px 15px;border-radius:14px;font-size:.9rem;line-height:1.55;font-weight:500;border:1px solid transparent}
.note+.note{margin-top:10px}
.note strong{font-weight:800}
.note a{color:inherit;font-weight:700;text-decoration:underline}
.note.success{background:#e6efd9;border-color:#cfe0b8;color:#166534}
.note.warning{background:#fffbeb;border-color:#fcd34d;color:#92400e}
.note.danger{background:#fee2e2;border-color:#fecaca;color:#991b1b}
.note.info{background:#dbeafe;border-color:#bfdbfe;color:#1e40af}
@media(max-width:600px){.note{padding:11px 13px;font-size:.86rem}}

/* ------------------------------------------------------------------------
   Les quatre boutons de l'accueil — alignés sur mobile comme sur ordinateur.

   Avant : `display:flex; flex-wrap:wrap`. Les quatre boutons n'ont pas la
   même largeur, donc trois tenaient sur la première ligne et « La boutique »
   restait seul en dessous, décalé à gauche. C'est ce que le client a montré
   du doigt le 17/09.

   Une grille de deux colonnes règle les deux cas d'un coup : deux par deux
   sur ordinateur, l'un sous l'autre sur téléphone, et toujours de la même
   largeur. Ces règles arrivent APRÈS celle d'origine et la remplacent — on
   ne touche pas à la ligne d'origine, pour que le retour en arrière soit un
   simple effacement de ce bloc.
   ------------------------------------------------------------------------ */
.hero-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:28px 0;
  align-items:stretch;
}
.hero-actions .btn{
  /* Sans ça, chaque bouton garde sa largeur de texte et flotte à gauche de
     sa case : la grille serait régulière mais les boutons, non. */
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:7px;
}
@media(max-width:560px){
  .hero-actions{grid-template-columns:1fr}
}

/* Le bouton du forum, qui doit attirer l'œil.

   « Le bouton de forum qui fait comme une petite animation pour attirer
   l'attention » (client, 17/09). Une pulsation lente et large, pas un
   clignotement : sur une page qu'on lit, un mouvement rapide fatigue et finit
   par être ignoré comme une publicité.

   Elle s'arrête au survol et pendant le clic — on n'anime pas ce que la
   personne est en train de viser. */
.btn-forum{position:relative;overflow:visible}
.btn-forum::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  border:2px solid #1f7a63;
  opacity:0;
  pointer-events:none;
  animation:ada-appel 2.8s ease-out infinite;
}
.btn-forum:hover::after,
.btn-forum:focus-visible::after,
.btn-forum:active::after{animation-play-state:paused;opacity:0}
@keyframes ada-appel{
  0%   {transform:scale(.97); opacity:0}
  18%  {opacity:.55}
  70%  {transform:scale(1.09); opacity:0}
  100% {transform:scale(1.09); opacity:0}
}
/* Une pastille verte discrète : elle dit « c'est là que ça se passe » même
   quand l'animation est coupée. */
.btn-forum .btn-point{
  width:8px;height:8px;border-radius:50%;background:#1f7a63;
  display:inline-block;flex:0 0 auto;
}

/* Quelqu'un qui a demandé moins d'animations n'en reçoit aucune. Ce n'est pas
   une préférence esthétique : les mouvements répétés déclenchent des malaises
   chez certaines personnes, et le réglage existe pour ça. */
@media(prefers-reduced-motion:reduce){
  .btn-forum::after{animation:none;opacity:0}
}

/* Le bouton de la chaîne WhatsApp, dans le pied de page.

   Le vert officiel de WhatsApp (#25D366) porte le texte blanc à 2,0 de
   contraste : illisible. On garde donc le vert comme SIGNE — le logo — et on
   assombrit la surface qui porte du texte. La marque reste reconnaissable, le
   texte se lit. */
.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#0f7a3d;color:#fff;border:0;
  padding:10px 16px;border-radius:10px;font-weight:750;text-decoration:none;
  margin-top:8px;
}
.btn-wa:hover{background:#0b5c2e;color:#fff;text-decoration:none}
.btn-wa svg{color:#25D366}
.public-footer .footer-grid a.btn-wa{color:#fff}

/* Le pied de page passe de trois à quatre colonnes : sans ça, la chaîne
   WhatsApp tombait seule sur une deuxième ligne, décalée à gauche — la même
   maladresse que les quatre boutons de l'accueil. Sous 700 px la règle
   existante repasse tout en une colonne, rien à ajouter. */
.public-footer .footer-grid{grid-template-columns:1.7fr 1fr 1fr 1.2fr}
@media(max-width:980px){
  .public-footer .footer-grid{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------------------------------
   LE BANDEAU DÉFILANT DES QUESTIONS DU FORUM (client, 19/09)

   « Un texte qui défile en haut de la page… si la personne met sa souris
   ou clique, elle sera transférée sur le forum. »

   Le défilement s'ARRÊTE au survol et au clavier. Sans cette pause on ne
   peut pas viser la question qui nous intéresse : un lien qui fuit sous
   le curseur n'est pas un lien, c'est un piège.
   ------------------------------------------------------------------ */
.forum-ticker{
  display:flex;align-items:center;gap:0;
  background:linear-gradient(90deg,#567b1b,#6f9c22 55%,#567b1b);
  color:#ecfeff;border-bottom:1px solid rgba(255,255,255,.18);
  overflow:hidden;position:relative
}
.forum-ticker-tag{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:7px 14px;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  background:rgba(0,0,0,.22);color:#fff;white-space:nowrap;z-index:2
}
.forum-ticker-tag:hover{background:rgba(0,0,0,.34);color:#fff}
.forum-ticker-piste{
  flex:1 1 auto;display:flex;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 36px),transparent)
}
.forum-ticker-suite{
  display:flex;align-items:center;flex:0 0 auto;
  animation:forum-ticker-defile 58s linear infinite;
  will-change:transform
}
@keyframes forum-ticker-defile{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* Survol, clavier : tout s'immobilise, les deux copies ensemble. */
.forum-ticker:hover .forum-ticker-suite,
.forum-ticker:focus-within .forum-ticker-suite{animation-play-state:paused}
.forum-ticker-item{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 20px 7px 0;margin-left:20px;
  font-size:13px;color:#ecfeff;white-space:nowrap;line-height:1.3
}
.forum-ticker-item:hover,.forum-ticker-item:focus-visible{
  color:#fff;text-decoration:underline;text-underline-offset:3px
}
.forum-ticker-puce{color:#cde9a6;font-size:9px;line-height:1}
.forum-ticker-rep{
  margin-left:8px;padding:1px 8px;border-radius:999px;
  background:rgba(255,255,255,.17);font-size:11px;font-weight:700
}
.forum-ticker-tout{
  flex:0 0 auto;padding:7px 14px;font-size:12.5px;font-weight:800;
  background:rgba(0,0,0,.22);color:#fff;white-space:nowrap;z-index:2
}
.forum-ticker-tout:hover{background:rgba(0,0,0,.34);color:#fff}
@media(max-width:700px){
  /* Sur téléphone on garde le défilement mais on rend la place à la question :
     l'étiquette de gauche suffit, « Voir le forum » ferait doublon. */
  .forum-ticker-tout{display:none}
  .forum-ticker-tag{padding:7px 10px;font-size:11.5px}
  .forum-ticker-item{font-size:12.5px;margin-left:16px}
}
/* Quelqu'un qui a demandé moins d'animations à son système ne subit pas la
   nôtre : la liste devient un simple défilement à la main. */
@media(prefers-reduced-motion:reduce){
  .forum-ticker-suite{animation:none}
  .forum-ticker-suite[aria-hidden="true"]{display:none}
  .forum-ticker-piste{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media print{.forum-ticker{display:none!important}}


/* Le bouton du canal Telegram dans le pied de page.
   Le bleu de marque #229ED9 sous du blanc ne donne que 3,02:1 — sous la barre
   des 4,5:1. On assombrit donc la surface (#1c6d94, mesuré 5,73:1) et on laisse le
   bleu de marque au logo, qui n'a pas de texte a porter. */
.btn-tg{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#1c6d94;color:#fff;border:0;
  padding:10px 16px;border-radius:10px;font-weight:750;text-decoration:none;
  margin-top:8px;
}
.btn-tg:hover{background:#155370;color:#fff;text-decoration:none}
.btn-tg svg{color:#8fd3f4}
.public-footer .footer-grid a.btn-tg{color:#fff}

/* Le logo de l'association dans l'en-tete, le pied de page et le menu de
   gestion. « On garde le même logo pour tous les sites » (client, 23/09).
   Hauteur bornee : le fichier fourni est large (520x267), sans contrainte il
   ecraserait la barre de navigation. */
.brand-logo{height:44px;width:auto;display:block;object-fit:contain}
.public-footer .brand-logo{height:40px;background:#fff;border-radius:8px;padding:4px 6px}
.sidebar-brand .brand-logo{height:34px;background:#fff;border-radius:7px;padding:3px 5px}
@media(max-width:700px){ .brand-logo{height:36px} }

/* Le bandeau d'avis Avisbiz de l'accueil. Les regles d'origine ont disparu
   quand la feuille a ete regeneree pour CampGo : on les remet ici. */
.reviews-band{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;
  background:linear-gradient(135deg,#f0fdf4,#e6efd9);border:1px solid #cfe0b8;
  border-radius:20px;padding:26px 30px;margin:0 0 10px}
.reviews-band-txt{max-width:430px}
.reviews-band-txt h2{font-size:1.55rem;margin:8px 0 6px}
.reviews-band-txt p{margin:0}
.reviews-band-widget{flex:none}
@media(max-width:700px){ .reviews-band{padding:20px;gap:18px} }

/* La carte d'adherent, sur telephone : « association.campgo.fr » et
   « Partager - Voyager - S'entraider » se chevauchaient dans le bas de carte,
   tous deux sur une seule ligne (client, capture du 24/09). On les empile et
   on les centre en dessous de 520 px. */
@media(max-width:520px){
  .card-bottom{flex-direction:column;align-items:center;gap:4px;text-align:center}
  .card-bottom span,.card-bottom strong{white-space:normal;line-height:1.35}
  .card-bottom strong{font-size:.82rem}
}