/* ════════════════════════════════════════════════════════════════════════ CS.CSS — Croyances et Société ──────────────────────────────────────────────────────────────────────── Feuille de styles personnalisée, chargée après Tailwind CDN. Ne contient QUE ce que Tailwind ne peut pas gérer directement : - typographie (font-family hors config) - animations @keyframes - composants publicitaires (.ad-*) - utilitaires scrollbar - styles impression (@media print) - repli no-JS (.noscript-wall) - masquage Alpine x-cloak (anti-flash) SPIP production : • Auto-héberger ce fichier dans squelettes/css/ ou dist/ • Référencer dans inc-head.html : • Si vous utilisez un bundler (Vite, esbuild…) : importer dans le point d'entrée JS — les styles print et @keyframes seront inclus dans le bundle CSS généré. ════════════════════════════════════════════════════════════════════════ */ /* ── Alpine x-cloak — masque les éléments avant initialisation Alpine ── */ /* Évite le flash où x-show="false" affiche brièvement l'élément */ [x-cloak] { display: none !important; } /* ── Scroll offset — compense la hauteur du header sticky ───────────── Le header cumule : rangée principale (64px) + nav rubriques (~48px) ≈ 112 px sur desktop, 64 px sur mobile. scroll-padding-top sur décale le point d'arrivée de TOUS les défilements par ancre (#section) sur la page. scroll-behavior: smooth active l'animation sur tous les liens internes. ────────────────────────────────────────────────────────────────────── */ html { /* scroll-padding-top supprimé : le décalage est géré exclusivement par scroll-mt-28 (Tailwind) sur chaque section cible. Les deux propriétés étaient additives (120px + 112px = 232px) → trop bas. */ scroll-behavior: smooth; } /* ── 0. REPLI SANS JAVASCRIPT ───────────────────────────────────────── Ce bloc est aussi dans un

dans inc-head.html pour les navigateurs qui ne chargent pas les <link> externes sans JS. La double déclaration est intentionnelle. ────────────────────────────────────────────────────────────────────── */ .noscript-wall { display: none; /* masqué par défaut (JS actif) */ position: fixed; inset: 0; z-index: 99999; background: #f9f5f0; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; padding: 2rem; text-align: center; } /* ── 1. TYPOGRAPHIE ─────────────────────────────────────────────────── Inter pour le corps, Playfair Display pour les titres. La config Tailwind déclare les familles, mais les balises h1-h6 ont besoin d'une règle CSS explicite pour fonctionner sans purge. ────────────────────────────────────────────────────────────────────── */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Georgia, serif; } /* ── 2. ANIMATIONS ──────────────────────────────────────────────────── slideDown : utilisé sur les menus déroulants et panneaux. ────────────────────────────────────────────────────────────────────── */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-down { animation: slideDown 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fadeIn 0.25s ease-out; } /* ── 3. UNITÉS PUBLICITAIRES IN-FEED ────────────────────────────────── Classes partagées par toutes les pages (sommaire, rubrique, article). La couleur de fond (#eaecf0) signale visuellement la publicité. ────────────────────────────────────────────────────────────────────── */ .ad-infeed { border-top: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db; background-color: #e3e1e0; } .ad-infeed-card { position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: box-shadow 0.2s ease; cursor: pointer; } .ad-infeed-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } /* Badge "Annonce" — petit label discret conforme aux règles AdSense */ .ad-badge { display: inline-block; font-size: 9px; letter-spacing: 0.08em; color: #9ca3af; border: 1px solid #cfcccb; border-radius: 3px; padding: 1px 5px; line-height: 1.5; } /* ── 4. SCROLLBAR INVISIBLE ─────────────────────────────────────────── Utilisée sur la nav secondaire (overflow-x-auto) et la liste des onglets de sous-rubriques. ────────────────────────────────────────────────────────────────────── */ .scrollbar-none::-webkit-scrollbar { display: none; } .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; } /* ── 5. PROSE — ajustements du plugin Tailwind Typography ───────────── Surcharge légère pour les articles longs (couleur des liens, espacement des titres h2 dans le corps de texte). ────────────────────────────────────────────────────────────────────── */ .prose a { color: #182030; /* marine */ text-decoration: underline; } .prose a:hover { color: #3b4c6b; } .prose mark { background-color: #fef9c3; /* yellow-100 */ color: #854d0e; /* yellow-800 */ padding: 0 2px; border-radius: 2px; } /* ── 6. PAYWALL — masquage progressif ──────────────────────────────── Le dégradé est déclaré en inline dans article.html mais on fournit ici la classe utilitaire réutilisable. ────────────────────────────────────────────────────────────────────── */ .paywall-fade { background: linear-gradient( to bottom, transparent 0%, rgba(255, 255, 255, 0.85) 40%, #ffffff 100% ); } /* ── 7. DESCRIPTIF OFFRES D'ABONNEMENT ─────────────────────────────── Utilisé dans : présentation des offres (#DESCRIPTIF* de spip_abonnements_offres) Pages : compte.html (tab abonnement), liste des offres ────────────────────────────────────────────────────────────────────── */ .cs-descriptif-offre ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; /* ≈ space-y-2.5 */ } .cs-descriptif-offre li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: #374151; /* text-gray-700 */ } .cs-descriptif-offre li::before { content: ''; display: inline-block; flex-shrink: 0; width: 1rem; height: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2316a34a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } /* ── 8. STYLES IMPRESSION ───────────────────────────────────────────── Optimisés pour impression papier A4 des articles académiques. • Masquage du chrome (header, footer, nav, pubs, panneaux) • Typographie 11pt / interligne 1.7 • URLs affichées après les liens externes • Pied de page automatique via ::after sur <article> ────────────────────────────────────────────────────────────────────── */ @media print { @page { size: A4 portrait; margin: 2.5cm 2.8cm 2.5cm 2.8cm; } @page :first { margin-top: 2cm; } /* ── Base ── */ html, body { font-size: 11pt !important; line-height: 1.7 !important; color: #000 !important; background: #fff !important; } /* ── Masquer le chrome ── */ body > header, body > footer, nav, div.fixed, .ad-infeed, .paywall-gate, #cs-header-root, footer, section[x-show*="!$store.cs.isAbonne"] { display: none !important; } /* ── Supprimer les effets visuels ── */ *, *::before, *::after { background-color: transparent !important; box-shadow: none !important; text-shadow: none !important; border-color: #ddd !important; } /* ── Titres ── */ h1 { font-size: 20pt !important; line-height: 1.25 !important; margin-bottom: 10pt !important; page-break-after: avoid; } h2 { font-size: 15pt !important; margin-top: 16pt !important; margin-bottom: 6pt !important; page-break-after: avoid; } h3, h4 { font-size: 12pt !important; margin-top: 12pt !important; page-break-after: avoid; } /* ── Corps ── */ p.text-xl { font-style: italic; font-size: 12pt !important; color: #333 !important; margin-bottom: 14pt !important; } .prose p, article p { font-size: 11pt !important; orphans: 3; widows: 3; margin-bottom: 8pt !important; } blockquote { border-left: 3pt solid #ccc !important; padding-left: 12pt !important; margin: 12pt 0 !important; font-style: italic; color: #333 !important; } img { max-width: 100% !important; page-break-inside: avoid; } /* ── Liens : afficher l'URL après les liens externes ── */ a[href^="http"]::after { content: " [" attr(href) "]"; font-size: 8pt !important; color: #666 !important; word-break: break-all; } a[href^="#"]::after, a[href^="javascript"]::after { content: none; } /* ── Éviter les coupures malheureuses ── */ article { page-break-before: avoid; } figure, table, blockquote { page-break-inside: avoid; } h1, h2, h3 { page-break-after: avoid; } /* ── Pied de page automatique ── */ article::after { content: "Croyances et Société — croyances-et-societe.fr"; display: block; margin-top: 24pt; padding-top: 8pt; border-top: 1pt solid #ccc; font-size: 8pt; color: #666; text-align: center; } } /* fin @media print */