/* ========================================================= CSE Site – base globale Verdana + styles communs En-tête recommandé: ========================================================= */ /* ---------- Reset léger & héritage police ---------- */ html { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 14px; /* taille par défaut du site */ } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; color: #0e2a29; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Utilitaires textes Verdana (titres/petits blocs) */ .text-12 { font-size: 12px !important; } .text-14 { font-size: 14px !important; } .title-12, .h-12 { font-size: 12px !important; font-weight: 800; letter-spacing: .1px; } .title-14, .h-14 { font-size: 14px !important; font-weight: 800; letter-spacing: .1px; } /* Si tu veux forcer tous les h1..h6 en Verdana: */ h1, h2, h3, h4, h5, h6 { font-family: inherit; } /* ---------- Variables couleurs (peut se surcharger) ---------- */ :root{ --cse-teal: #0a7c7c; /* vert principal */ --cse-teal-ink: #0b5141; --cse-teal-soft: #e9f6f2; --cse-border: #e6ecea; --cse-muted: #596a78; } /* ---------- Fond “hero” plein écran optionnel ---------- Place sur la classe .has-page-bg et règle --page-bg: ------------------------------------------------------- */ :root{ --page-pos-x:65%; --page-pos-y:45%; } .has-page-bg::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image: var(--page-bg, none); background-size: cover; background-position: var(--page-pos-x) var(--page-pos-y); background-repeat: no-repeat; transform: translateZ(0); } @media (max-width:1024px){ :root{ --page-pos-x:55%; --page-pos-y:38%; } } @media (max-width:640px){ :root{ --page-pos-x:50%; --page-pos-y:30%; } } /* ---------- Conteneur central ---------- */ .container{ max-width: 1100px; margin: 0 auto; padding: 0 14px; } /* ---------- “Hero” discret en haut de page ---------- */ .hero--plain, .hero--plain::before, .hero--plain::after{ background:transparent!important; background-image:none!important; box-shadow:none!important; } .hero--plain::before,.hero--plain::after{ content:none!important; } .hero--plain{ color:#fff; padding:14px 0 6px!important; min-height:0!important; } .hero--plain .chip{ display:inline-block; background:#e6fff4; color:#147d64; border-radius:999px; padding:6px 10px; font-weight:600; margin-bottom:6px } .hero--plain h1{ font-size: clamp(28px, 6vw, 44px); line-height:1.05; margin:0 0 6px; text-shadow:0 2px 10px rgba(0,0,0,.35) } .hero--plain p{ opacity:.95; max-width:860px; margin:0; text-shadow:0 2px 10px rgba(0,0,0,.35) } /* ---------- Cartes & éléments UI génériques ---------- */ .card{ background:#fff; border:1px solid var(--cse-border); border-radius:16px; padding:14px; } .muted{ color: var(--cse-muted); font-size: 13px; } .btn{ display:inline-block; background:#0f8f6f; color:#fff; padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:800; border:0; cursor:pointer; } .btn:hover{ filter: brightness(0.98); } .btn.ghost{ background: var(--cse-teal-soft); color: var(--cse-teal-ink); } /* ---------- Onglets ---------- */ .tabs{ background:#fff; border:1px solid var(--cse-border); border-radius:14px; padding:8px; display:flex; gap:8px; align-items:center; justify-content:center; } .tab{ padding:8px 12px; border-radius:10px; border:1px solid #cfe3e0; background:#f7fbfa; cursor:pointer; font-weight:700; } .tab.active{ background: var(--cse-teal); color:#fff; border-color: var(--cse-teal); } /* ---------- Grilles réutilisables ---------- */ .grid-2 { display:grid; grid-template-columns: 320px 1fr; gap:18px; margin-top:18px; } @media (max-width:960px){ .grid-2{ grid-template-columns:1fr; } } .grid-cards{ display:grid; grid-template-columns: 1fr; gap:14px; margin-top:12px; } @media(min-width:760px){ .grid-cards{ grid-template-columns: repeat(3, 1fr); } } .thumb, .media{ width:100%; height:260px; object-fit:cover; background:#000; border-radius:14px; } /* ---------- Table des matières / colonne gauche ---------- */ .toc h3{ margin:6px 0 10px; } .toc .actions{ display:flex; gap:8px; margin-bottom:8px; } .toc a{ color:#0e2a29; text-decoration:none; } .toc a:hover{ color:#0f8f6f; } .toc ul{ margin:0 0 0 1.2rem; padding:0; } .toc li{ margin:.25rem 0; } .toc .active{ font-weight:800; color:#0f8f6f; } .searchbar{ display:flex; gap:8px; margin-top:6px; } .searchbar input{ flex:1; padding:8px 10px; border:1px solid var(--cse-border); border-radius:10px; } /* ---------- Groupes / listes d’articles ---------- */ .group{ border:1px solid var(--cse-border); border-radius:14px; background:#fff; } .group .head{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--cse-border); } .badge{ width:38px; height:38px; border-radius:999px; background: var(--cse-teal-soft); color: var(--cse-teal-ink); display:grid; place-items:center; font-weight:800; } .group .list{ padding:8px 12px 12px; } .hidden{ display:none !important; } /* ---------- Post/article ---------- */ .post{ border:1px solid var(--cse-border); border-radius:12px; padding:10px 12px; margin:8px 0; background:#fbfefe; } .post .top{ display:flex; justify-content:space-between; gap:10px; align-items:center; } .post .title{ font-weight:800; } .actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background: var(--cse-teal-soft); color: var(--cse-teal-ink); font-size:12px; font-weight:800; border:0; cursor:pointer; } .pill[disabled]{ opacity:.55; cursor:default; } .link{ color:#0f8f6f; text-decoration:none; font-weight:800; } .link:hover{ text-decoration:underline; } .content{ display:none; margin-top:8px; } .post.open .content{ display:block; } /* ---------- Médias & pièces jointes ---------- */ .media-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .thumb-sm{ width:90px; height:70px; border-radius:8px; overflow:hidden; background:#f3f7f6; display:flex; align-items:center; justify-content:center; } .thumb-sm img{ max-width:100%; max-height:100%; } /* ---------- Formulaire de commentaire ---------- */ .cform{ margin-top:8px; border-top:1px dashed var(--cse-border); padding-top:8px; } .cform input, .cform textarea{ width:100%; padding:8px 10px; border:1px solid var(--cse-border); border-radius:10px; } .cform textarea{ min-height:90px; } /* ---------- Badges ---------- */ .tag-new{ display:inline-block; background:#16a34a; color:#fff; font-size:10px; font-weight:900; padding:2px 6px; border-radius:999px; } /* ===== Fond global monCSE (par défaut sur TOUTES les pages) ===== */ :root{ /* Image par défaut + position ; surcharge possible via --page-bg */ --page-bg: url('/dolibarr/custom/csefront/img/ca-village.jpg'); --page-pos-x: 65%; --page-pos-y: 45%; } body::before{ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--page-bg); /* <-- prend la valeur par défaut ci-dessus */ background-size: cover; background-position: var(--page-pos-x) var(--page-pos-y); background-repeat: no-repeat; transform: translateZ(0); } /* Désactiver le fond sur une page spécifique : ajouter class="no-page-bg" au */ body.no-page-bg::before{ content: none; } /* ===== Brand/header ===== */ .topbar, header .topbar-inner, .mainmenu { display:flex; align-items:center; gap:12px; } .brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; } .brand-logo{ height:40px; width:auto; display:block; } @media (min-width:1200px){ .brand-logo{ height:48px; } } .brand-text{ font-weight:900; letter-spacing:.2px; color: var(--cse-teal); } /* Masque l'ancien point/clignote/placeholder s'il reste */ .topbar .blink, .topbar .cursor, .topbar .pulse, .topbar .notif-dot, .topbar .dot, .topbar .sep-dot, .topbar .placeholder-logo { display:none !important; } /* Sélecteur de secours : si une grosse image a été ajoutée AVANT le header, on la cache */ body > img.logo-alone { display:none !important; } /* mets la classe "logo-alone" sur l'ancienne image si besoin */ /* --- Carte partenaires : miniature de logo compacte --- */ .p-thumb{ height: 120px; /* ↓ change cette valeur pour +/- petit (ex. 90, 140…) */ display:flex; align-items:center; justify-content:center; padding: 8px; /* un peu d’air autour du logo */ border:1px solid #e8efed; border-radius:12px; background:#fff; /* fond blanc derrière les logos transparents */ overflow:hidden; } /* Le logo garde son ratio et s’inscrit dans le cadre */ .p-thumb img{ max-width:100%; max-height:100%; object-fit: contain; /* contain = idéal pour des logos */ display:block; }