create-snapify-app 0.0.0-stage → 1.1.0

package/template/community/hamdiayari/akhbar/src/styles.css

@@ -0,0 +1,566 @@
+/*
+ * Akhbar — thème presse pour Snapify · © 2026 Hamdi Ayari
+ *
+ * Les options (fond, accent, typographie, angles) sont posées par Layout.tsx sous forme
+ * d'attributs data-ak-* sur <html> ; tout le thème lit les variables --ak-*. Les jetons --px-*
+ * des modules et les variables --akn-theme-* du module Akhbar Actualités en découlent.
+ */
+
+/* ------------------------------------------------------------------ Palettes */
+
+:root {
+  --ak-paper: #f7f5f0;
+  --ak-paper-2: #edeae2;
+  --ak-card: #ffffff;
+  --ak-ink: #121212;
+  --ak-ink-2: #2a2a2a;
+  --ak-text: #2f2f2f;
+  --ak-muted: #6a6862;
+  --ak-line: #dcd8ce;
+  --ak-on-dark: #f7f5f0;
+
+  --ak-accent: #c8102e;
+  --ak-on-accent: #ffffff;
+
+  --ak-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
+  --ak-font-body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --ak-font-prose: 'Source Serif 4', Georgia, 'Times New Roman', serif;
+  --ak-display-weight: 700;
+  --ak-display-tracking: -0.015em;
+  --ak-display-leading: 1.08;
+
+  --ak-r: 0px;
+  --ak-r-lg: 0px;
+  --ak-r-btn: 0px;
+}
+
+:root[data-ak-palette='white'] {
+  --ak-paper: #ffffff;
+  --ak-paper-2: #f3f3f1;
+  --ak-line: #e4e4e0;
+}
+:root[data-ak-palette='brand'] {
+  --ak-paper: var(--px-surface);
+  --ak-paper-2: var(--px-surface-2);
+  --ak-ink: var(--px-navy);
+  --ak-ink-2: var(--px-navy-2);
+  --ak-text: var(--px-text);
+  --ak-muted: var(--px-muted);
+  --ak-line: var(--px-border);
+}
+
+:root[data-ak-accent='blue'] { --ak-accent: #0b4f9c; }
+:root[data-ak-accent='green'] { --ak-accent: #4d6b1f; }
+:root[data-ak-accent='brand'] { --ak-accent: var(--px-primary); }
+
+:root[data-ak-type='editorial'] {
+  --ak-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
+  --ak-font-prose: 'Newsreader', Georgia, 'Times New Roman', serif;
+  --ak-display-weight: 600;
+  --ak-display-tracking: -0.01em;
+}
+:root[data-ak-type='modern'] {
+  --ak-font-display: Inter, system-ui, sans-serif;
+  --ak-font-prose: Inter, system-ui, sans-serif;
+  --ak-display-weight: 800;
+  --ak-display-tracking: -0.03em;
+  --ak-display-leading: 1.05;
+}
+:root[data-ak-type='brand'] {
+  --ak-font-display: var(--px-font-heading), var(--px-font-body), Georgia, serif;
+  --ak-font-body: var(--px-font-body), system-ui, sans-serif;
+  --ak-font-prose: var(--px-font-body), system-ui, sans-serif;
+  --ak-display-weight: 700;
+}
+
+:root[data-ak-corners='soft'] { --ak-r: 8px; --ak-r-lg: 12px; --ak-r-btn: 6px; }
+
+/*
+ * Jetons des modules : déclarés sur body pour s'imposer aux valeurs de l'identité visuelle
+ * posées sur <html>, y compris dans les fenêtres ouvertes par les modules.
+ */
+html.ak-html body {
+  --px-primary: var(--ak-accent);
+  --px-primary-dark: color-mix(in oklab, var(--ak-accent) 82%, black);
+  --px-primary-light: color-mix(in oklab, var(--ak-accent) 88%, white);
+  --px-navy: var(--ak-ink);
+  --px-navy-2: var(--ak-ink-2);
+  --px-surface: var(--ak-paper-2);
+  --px-surface-2: color-mix(in oklab, var(--ak-paper-2) 70%, var(--ak-accent) 6%);
+  --px-text: var(--ak-text);
+  --px-muted: var(--ak-muted);
+  --px-border: var(--ak-line);
+  --px-border-soft: color-mix(in oklab, var(--ak-line) 60%, white);
+
+  /* Module Akhbar Actualités */
+  --akn-theme-accent: var(--ak-accent);
+  --akn-theme-ink: var(--ak-ink);
+  --akn-theme-text: var(--ak-text);
+  --akn-theme-muted: var(--ak-muted);
+  --akn-theme-line: var(--ak-line);
+  --akn-theme-paper: var(--ak-card);
+  --akn-theme-soft: var(--ak-paper-2);
+  --akn-theme-serif: var(--ak-font-display);
+  --akn-theme-sans: var(--ak-font-body);
+}
+html.ak-html:not([data-ak-type='brand']) body {
+  --px-font-body: 'Inter';
+  --px-font-heading: 'Playfair Display';
+}
+html.ak-html[data-ak-type='editorial'] body { --px-font-heading: 'Newsreader'; }
+html.ak-html[data-ak-type='modern'] body { --px-font-heading: 'Inter'; }
+
+/* Couleurs sémantiques : claires par défaut, inversées dans les sections sombres. */
+:root,
+.ak-light {
+  --ak-fg: var(--ak-ink);
+  --ak-fg-2: var(--ak-muted);
+  --ak-rule: var(--ak-line);
+  --ak-surface: var(--ak-card);
+  --ak-accent-text: color-mix(in oklab, var(--ak-accent) 92%, black);
+  --ak-btn-bg: var(--ak-ink);
+  --ak-btn-fg: var(--ak-on-dark);
+}
+:root[data-ak-accent='brand'],
+:root[data-ak-accent='brand'] .ak-light {
+  --ak-accent-text: var(--px-primary-dark);
+}
+.ak-dark {
+  --ak-fg: var(--ak-on-dark);
+  --ak-fg-2: color-mix(in oklab, var(--ak-on-dark) 68%, transparent);
+  --ak-rule: color-mix(in oklab, #ffffff 16%, transparent);
+  --ak-surface: color-mix(in oklab, #ffffff 6%, transparent);
+  --ak-accent-text: color-mix(in oklab, var(--ak-accent) 45%, white);
+  --ak-btn-bg: var(--ak-accent);
+  --ak-btn-fg: var(--ak-on-accent);
+}
+.ak-brand {
+  --ak-fg: var(--ak-on-accent);
+  --ak-fg-2: color-mix(in oklab, var(--ak-on-accent) 82%, transparent);
+  --ak-accent-text: var(--ak-on-accent);
+  --ak-btn-bg: var(--ak-on-accent);
+  --ak-btn-fg: var(--ak-accent);
+}
+
+/* ------------------------------------------------------------------ Base */
+
+html.ak-html,
+html.ak-html body {
+  background: var(--ak-paper);
+}
+.ak-root {
+  font-family: var(--ak-font-body);
+  color: var(--ak-fg);
+  background: var(--ak-paper);
+  min-height: 100vh;
+}
+.ak-root > .min-h-screen {
+  background: transparent;
+  color: inherit;
+}
+/* Spécificité nulle : les titres des modules (classes scopées) gardent leur police. */
+:where(.ak-root) :where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--ak-font-body);
+}
+.ak-root ::selection {
+  background: color-mix(in oklab, var(--ak-accent) 22%, transparent);
+}
+.ak-display,
+.ak-root .ak-display {
+  font-family: var(--ak-font-display);
+  font-weight: var(--ak-display-weight);
+  letter-spacing: var(--ak-display-tracking);
+  line-height: var(--ak-display-leading);
+  text-wrap: balance;
+}
+.ak-em {
+  font-style: italic;
+  color: var(--ak-accent-text);
+}
+:root[data-ak-type='modern'] .ak-em {
+  font-style: normal;
+}
+.ak-num {
+  font-family: var(--ak-font-display);
+  font-weight: var(--ak-display-weight);
+  letter-spacing: var(--ak-display-tracking);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+/* Surtitre de presse : capitales, couleur d'accent, filet court. */
+.ak-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: var(--ak-accent-text);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.ak-kicker::before {
+  content: '';
+  width: 1.5rem;
+  height: 2px;
+  background: currentColor;
+}
+
+/* ------------------------------------------------------------------ Boutons et liens */
+
+.ak-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  padding: 0.85rem 1.5rem;
+  border-radius: var(--ak-r-btn);
+  border: 1px solid transparent;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
+}
+.ak-btn:active { transform: translateY(1px); }
+.ak-btn-lg { padding: 1rem 1.9rem; font-size: 0.86rem; }
+.ak-btn-arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-btn:hover .ak-btn-arrow, .ak-link:hover .ak-btn-arrow { transform: translateX(4px); }
+
+.ak-btn-primary { background: var(--ak-btn-bg); color: var(--ak-btn-fg); }
+.ak-btn-primary:hover { background: var(--ak-accent); color: var(--ak-on-accent); }
+.ak-dark .ak-btn-primary:hover, .ak-brand .ak-btn-primary:hover { background: #fff; color: var(--ak-ink); }
+.ak-btn-outline {
+  color: var(--ak-fg);
+  border-color: var(--ak-fg);
+  background: transparent;
+}
+.ak-btn-outline:hover { background: var(--ak-fg); color: var(--ak-paper); }
+.ak-dark .ak-btn-outline:hover { color: var(--ak-ink); background: #fff; }
+.ak-btn-dark { background: var(--ak-ink); color: var(--ak-on-dark); }
+.ak-btn-dark:hover { background: var(--ak-accent); color: var(--ak-on-accent); }
+.ak-btn-accent { background: var(--ak-accent); color: var(--ak-on-accent); }
+.ak-btn-accent:hover { background: var(--ak-ink); color: var(--ak-on-dark); }
+.ak-btn-light { background: #fff; color: var(--ak-ink); }
+.ak-btn-light:hover { background: var(--ak-paper-2); }
+.ak-btn-glass {
+  background: color-mix(in oklab, #fff 14%, transparent);
+  color: #fff;
+  border-color: color-mix(in oklab, #fff 35%, transparent);
+}
+.ak-btn-glass:hover { background: color-mix(in oklab, #fff 24%, transparent); }
+
+.ak-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--ak-fg);
+  padding-bottom: 0.15rem;
+  background-image: linear-gradient(var(--ak-accent), var(--ak-accent));
+  background-size: 100% 2px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition: color 0.2s;
+  cursor: pointer;
+}
+.ak-link:hover { color: var(--ak-accent-text); }
+
+/* ------------------------------------------------------------------ Surfaces */
+
+.ak-card {
+  background: var(--ak-surface);
+  border: 1px solid var(--ak-rule);
+  border-radius: var(--ak-r-lg);
+}
+.ak-card-hover {
+  transition: border-color 0.25s, box-shadow 0.25s;
+}
+.ak-card-hover:hover {
+  border-color: var(--ak-fg);
+  box-shadow: 6px 6px 0 -1px color-mix(in oklab, var(--ak-accent) 85%, transparent);
+}
+/* Signature : filet décalé couleur d'accent. */
+.ak-shape {
+  overflow: visible;
+  box-shadow: 14px 14px 0 -2px var(--ak-accent);
+}
+.ak-bg-soft { background: linear-gradient(180deg, var(--ak-paper) 0%, var(--ak-paper-2) 100%); }
+.ak-input {
+  width: 100%;
+  border-radius: var(--ak-r);
+  border: 1px solid var(--ak-rule);
+  background: var(--ak-card);
+  padding: 0.8rem 0.95rem;
+  font-size: 0.9rem;
+  color: var(--ak-ink);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.ak-input::placeholder { color: color-mix(in oklab, var(--ak-muted) 70%, transparent); }
+.ak-input:focus {
+  outline: none;
+  border-color: var(--ak-ink);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ak-accent) 18%, transparent);
+}
+
+/* ------------------------------------------------------------------ Sections et décors */
+
+.ak-section {
+  position: relative;
+  overflow: clip;
+  isolation: isolate;
+}
+.ak-section > :not(.ak-decor) { position: relative; z-index: 1; }
+.ak-decor { position: absolute; pointer-events: none; z-index: 0; }
+.ak-dots {
+  background-image: radial-gradient(color-mix(in oklab, var(--ak-fg) 18%, transparent) 1px, transparent 1.2px);
+  background-size: 20px 20px;
+  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 75%);
+  mask-image: linear-gradient(to left, #000 10%, transparent 75%);
+}
+.ak-grid {
+  background-image:
+    linear-gradient(to right, color-mix(in oklab, var(--ak-fg) 7%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in oklab, var(--ak-fg) 7%, transparent) 1px, transparent 1px);
+  background-size: 72px 72px;
+  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
+  mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
+}
+/* Colonnes de journal : filets verticaux réguliers. */
+.ak-waves {
+  background-image: repeating-linear-gradient(90deg, color-mix(in oklab, var(--ak-fg) 14%, transparent) 0 1px, transparent 1px 56px);
+  -webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 70%);
+  mask-image: radial-gradient(circle at center, #000 25%, transparent 70%);
+}
+.ak-hatch {
+  background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ak-fg) 7%, transparent) 0 1px, transparent 1px 12px);
+  -webkit-mask-image: linear-gradient(to right, #000 5%, transparent 80%);
+  mask-image: linear-gradient(to right, #000 5%, transparent 80%);
+}
+
+/* ------------------------------------------------------------------ Contenu riche */
+
+.ak-prose { color: var(--ak-text); font-family: var(--ak-font-prose); font-size: 1.15rem; line-height: 1.8; }
+.ak-dark .ak-prose { color: var(--ak-fg-2); }
+.ak-prose > * + * { margin-top: 1.1em; }
+.ak-prose :is(h2, h3, h4) { color: var(--ak-fg); font-family: var(--ak-font-display); font-weight: var(--ak-display-weight); letter-spacing: var(--ak-display-tracking); }
+.ak-prose h2 { font-size: 1.85rem; line-height: 1.18; margin-top: 1.7em; }
+.ak-prose h3 { font-size: 1.4rem; line-height: 1.3; margin-top: 1.6em; }
+.ak-prose h4 { font-size: 1.15rem; margin-top: 1.5em; }
+.ak-prose a { color: var(--ak-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
+.ak-prose strong { color: var(--ak-fg); font-weight: 700; }
+.ak-prose ul { list-style: none; padding-left: 0; }
+.ak-prose ul > li { position: relative; padding-left: 1.4em; }
+.ak-prose ul > li::before {
+  content: '';
+  position: absolute;
+  left: 0.2em;
+  top: 0.72em;
+  width: 0.42em;
+  height: 0.42em;
+  background: var(--ak-accent);
+}
+.ak-prose ol { list-style: decimal; padding-left: 1.4em; }
+.ak-prose ol > li::marker { color: var(--ak-accent-text); font-weight: 700; }
+.ak-prose li + li { margin-top: 0.45em; }
+.ak-prose blockquote {
+  margin: 1.8em 0;
+  padding: 0.4em 0 0.4em 1.3em;
+  font-family: var(--ak-font-display);
+  font-size: 1.6rem;
+  font-style: italic;
+  line-height: 1.35;
+  color: var(--ak-fg);
+  border-left: 4px solid var(--ak-accent);
+}
+.ak-prose img { margin: 2em auto; border-radius: var(--ak-r-lg); }
+.ak-prose hr { border: 0; border-top: 1px solid var(--ak-rule); margin: 2.6em 0; }
+.ak-prose code { background: var(--ak-paper-2); padding: 0.15em 0.4em; font-size: 0.88em; }
+.ak-prose [style*='text-align: center'] { text-align: center; }
+.ak-prose [style*='text-align: right'] { text-align: right; }
+.ak-prose > :first-child { margin-top: 0; }
+.ak-prose-lg { font-size: 1.25rem; }
+/* Lettrine sur le premier paragraphe d'un article. */
+.ak-article .ak-prose > p:first-child::first-letter {
+  float: left;
+  margin: 0.08em 0.12em 0 0;
+  color: var(--ak-accent);
+  font-family: var(--ak-font-display);
+  font-size: 3.6em;
+  font-weight: 700;
+  line-height: 0.82;
+}
+
+/* ------------------------------------------------------------------ Animations */
+
+.ak-reveal {
+  opacity: 0;
+  transform: translateY(22px);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ak-reveal[data-anim='fade'] { transform: none; }
+.ak-reveal[data-anim='zoom'] { transform: scale(0.96); }
+.ak-reveal[data-anim='slide-left'] { transform: translateX(-40px); }
+.ak-reveal[data-anim='slide-right'] { transform: translateX(40px); }
+.ak-reveal.is-visible { opacity: 1; transform: none; }
+
+@keyframes akMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+@keyframes akWordIn {
+  from { opacity: 0; transform: translateY(0.3em); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes akFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+@keyframes akPulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ak-accent) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
+@keyframes akProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+@keyframes akKenBurns { from { transform: scale(1.06); } to { transform: scale(1); } }
+
+.ak-marquee { animation: akMarquee 45s linear infinite; }
+.ak-marquee-slow { animation-duration: 70s; }
+.ak-marquee-fast { animation-duration: 25s; }
+.ak-marquee:hover { animation-play-state: paused; }
+.ak-word-in { animation: akWordIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.ak-float { animation: akFloat 7s ease-in-out infinite; }
+.ak-float-late { animation: akFloat 8s ease-in-out 1.6s infinite; }
+.ak-live { animation: akPulse 1.6s ease-out infinite; }
+.ak-progress { transform-origin: left; animation: akProgress linear forwards; }
+.ak-kenburns { animation: akKenBurns 7s ease-out both; }
+
+:root[data-ak-motion='off'] :is(.ak-marquee, .ak-word-in, .ak-float, .ak-float-late, .ak-live, .ak-kenburns, .ak-ticker-track) { animation: none !important; }
+:root[data-ak-motion='off'] .ak-progress { animation-name: none; }
+@media (prefers-reduced-motion: reduce) {
+  :is(.ak-marquee, .ak-word-in, .ak-float, .ak-float-late, .ak-live, .ak-kenburns, .ak-ticker-track) { animation: none !important; }
+  .ak-reveal { opacity: 1; transform: none; transition: none; }
+}
+
+/* ------------------------------------------------------------------ Manchette */
+
+.ak-masthead-title {
+  font-family: var(--ak-font-display);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 0.95;
+  color: var(--ak-ink);
+}
+:root[data-ak-type='modern'] .ak-masthead-title { font-weight: 900; letter-spacing: -0.045em; }
+.ak-double-rule {
+  border-bottom: 4px double var(--ak-ink);
+}
+.ak-nav-link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 0.85rem;
+  color: var(--ak-ink);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  transition: color 0.15s;
+}
+.ak-nav-link:hover { color: var(--ak-accent-text); }
+.ak-nav-link[aria-current='page']::after {
+  content: '';
+  position: absolute;
+  inset: auto 0.85rem 0 0.85rem;
+  height: 3px;
+  background: var(--ak-accent);
+}
+
+/* Bandeau « Urgent » (données du module Akhbar Urgent) */
+.ak-ticker {
+  display: flex;
+  align-items: stretch;
+  min-height: 2.5rem;
+  overflow: hidden;
+  background: var(--ak-card);
+  border-bottom: 1px solid var(--ak-line);
+}
+.ak-ticker-label {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 1rem;
+  color: var(--ak-on-accent);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  background: var(--ak-accent);
+}
+.ak-ticker-label::after {
+  content: '';
+  position: absolute;
+  right: -0.7rem;
+  top: 0;
+  bottom: 0;
+  width: 0.7rem;
+  background: var(--ak-accent);
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+.ak-ticker-viewport {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 3rem), transparent);
+  mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 3rem), transparent);
+}
+.ak-ticker-track {
+  display: flex;
+  width: max-content;
+  height: 100%;
+  align-items: center;
+  animation: akMarquee var(--ak-ticker-duration, 60s) linear infinite;
+}
+.ak-ticker:hover .ak-ticker-track { animation-play-state: paused; }
+.ak-ticker-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0 1.6rem;
+  color: var(--ak-ink);
+  font-size: 0.86rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.ak-ticker-item time {
+  color: var(--ak-accent-text);
+  font-size: 0.75rem;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+}
+.ak-ticker-item + .ak-ticker-item { border-left: 1px solid var(--ak-line); }
+.ak-ticker-item a:hover { text-decoration: underline; }
+
+/* Barre de progression de lecture */
+.ak-read-progress {
+  position: fixed;
+  inset: 0 0 auto 0;
+  z-index: 70;
+  height: 3px;
+  background: var(--ak-accent);
+  transform-origin: left;
+  pointer-events: none;
+}
+
+/* ------------------------------------------------------------------ Divers */
+
+.ak-scroll-x { scrollbar-width: none; }
+.ak-scroll-x::-webkit-scrollbar { display: none; }
+.ak-details > summary { list-style: none; }
+.ak-details > summary::-webkit-details-marker { display: none; }
+.ak-search {
+  width: 100%;
+  height: 2.75rem;
+  border: 1px solid var(--ak-line);
+  background: var(--ak-card);
+  padding: 0 1rem 0 2.75rem;
+  font-size: 0.9rem;
+  color: var(--ak-ink);
+}

package/template/community/hamdiayari/akhbar-actualites/README.md

@@ -0,0 +1,28 @@
+# Akhbar Actualités
+
+Transforme les articles du site en une véritable une de journal.
+
+## Widgets (bloc « Module » de l’éditeur de pages)
+
+- **À la une** — un grand article et ses compléments (mosaïque, deux colonnes ou couverture plein écran), filtrable par rubrique.
+- **Dernières actualités** — grille, liste avec vignettes ou titres seuls ; « Ignorer les premiers articles » évite les doublons sous « À la une ».
+- **Rubrique** — section consacrée à une étiquette (Politique, Économie, Sport…).
+- **Les plus lus** — classement sur 24 h, 7 ou 30 jours.
+- **Rubriques** — toutes les étiquettes avec leur nombre d’articles.
+
+La rubrique d’un article est sa **première étiquette**.
+
+## Pages
+
+- `/actualites/` : toutes les actualités, recherche (`?q=`) et pagination.
+- `/rubrique/<nom>/` : articles d’une rubrique.
+
+## Audience
+
+Une lecture est comptée par visiteur et par article toutes les 30 minutes, robots exclus. Seuls des totaux journaliers par article sont conservés (90 jours) ; aucune adresse IP n’est enregistrée. Page **Audience** dans l’administration.
+
+## Compatibilité
+
+Fonctionne avec tous les thèmes ; le thème **Akhbar** en ajuste la typographie et les couleurs. La loupe de recherche apparaît dans l’en-tête des thèmes qui affichent les actions de modules.
+
+© 2026 Hamdi Ayari