create-snapify-app 0.0.0-stage → 1.1.0

package/template/themes/ai-canvas/src/styles.css

@@ -0,0 +1,317 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+/*
+ * Thème SidiBou. Les couleurs et polices viennent de l'identité visuelle du site (variables --px-*) ;
+ * les options du thème sont appliquées par Layout.tsx (variables --sb-* et classe sb-no-motion).
+ */
+:root {
+  --sb-btn-radius: 9999px;
+  --sb-card-radius: 1.25rem;
+}
+
+/* Custom interactive button styles as specified in brief B4 */
+.btn-primary-snapify {
+  background: var(--px-gradient);
+  color: #FFFFFF;
+  font-weight: 600;
+  border-radius: var(--sb-btn-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.75rem;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 4px 14px 0 color-mix(in srgb, var(--px-primary) 25%, transparent);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.btn-primary-snapify:hover {
+  background: var(--px-primary-light);
+  color: var(--px-navy);
+  box-shadow: 0 6px 20px 0 color-mix(in srgb, var(--px-primary-light) 35%, transparent);
+}
+
+.btn-primary-snapify:hover .btn-arrow {
+  transform: translateX(4px);
+}
+
+.btn-secondary-snapify {
+  background: #FFFFFF;
+  color: var(--px-navy);
+  font-weight: 600;
+  border-radius: var(--sb-btn-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.75rem;
+  border: 1.5px solid var(--px-navy);
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.btn-secondary-snapify:hover {
+  background: var(--px-navy);
+  color: #FFFFFF;
+}
+
+.btn-arrow {
+  transition: transform 0.25s ease;
+  display: inline-block;
+}
+
+/* Card hover effect matching Apple / modern standard */
+.card-snapify {
+  background: #FFFFFF;
+  border: 1px solid var(--px-border);
+  border-radius: var(--sb-card-radius);
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
+}
+
+.card-snapify:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--px-navy) 8.0%, transparent);
+  border-color: #D0D7E2;
+}
+
+@keyframes pxMarquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+@keyframes pxFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes pxShine {
+  0% { transform: translateX(-120%) skewX(-20deg); }
+  60%, 100% { transform: translateX(260%) skewX(-20deg); }
+}
+
+@keyframes pxGradientPan {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes pxBlob {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, -40px) scale(1.08); }
+  66% { transform: translate(-20px, 20px) scale(0.95); }
+}
+
+@keyframes pxWordIn {
+  from { opacity: 0; transform: translateY(0.4em); filter: blur(4px); }
+  to { opacity: 1; transform: translateY(0); filter: blur(0); }
+}
+
+@keyframes pxDash {
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes pxProgress {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.px-marquee { animation: pxMarquee 32s linear infinite; }
+.px-marquee:hover { animation-play-state: paused; }
+.px-float { animation: pxFloat 6s ease-in-out infinite; }
+.px-float-delay { animation: pxFloat 7s ease-in-out 1.5s infinite; }
+.px-blob { animation: pxBlob 18s ease-in-out infinite; }
+.px-word-in { animation: pxWordIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.px-progress { transform-origin: left; animation: pxProgress linear forwards; }
+
+.px-gradient-pan {
+  background-size: 200% 200%;
+  animation: pxGradientPan 10s ease infinite;
+}
+
+.px-shine {
+  position: relative;
+  overflow: hidden;
+}
+.px-shine::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 35%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
+  animation: pxShine 4.5s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.px-grid-bg {
+  background-image:
+    linear-gradient(to right, color-mix(in srgb, var(--px-navy) 4.5%, transparent) 1px, transparent 1px),
+    linear-gradient(to bottom, color-mix(in srgb, var(--px-navy) 4.5%, transparent) 1px, transparent 1px);
+  background-size: 56px 56px;
+  mask-image: radial-gradient(ellipse at 30% 20%, black 30%, transparent 75%);
+}
+
+.px-reveal {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.px-reveal.is-visible {
+  opacity: 1;
+  transform: none;
+}
+.px-reveal[data-anim='fade'] { transform: none; }
+.px-reveal[data-anim='zoom'] { transform: scale(0.94); }
+.px-reveal[data-anim='slide-left'] { transform: translateX(-48px); }
+.px-reveal[data-anim='slide-right'] { transform: translateX(48px); }
+.px-reveal.is-visible[data-anim] { transform: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .px-marquee, .px-float, .px-float-delay, .px-blob, .px-gradient-pan, .px-shine::after, .px-word-in, .px-drift {
+    animation: none !important;
+  }
+  .px-reveal { opacity: 1; transform: none; transition: none; }
+}
+
+/* Section backgrounds: decor layers sit behind content */
+.px-section {
+  position: relative;
+  overflow: hidden;
+  overflow: clip;
+  isolation: isolate;
+}
+.px-section > :not(.px-decor) {
+  position: relative;
+  z-index: 1;
+}
+.px-decor {
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
+}
+.px-dots {
+  background-image: radial-gradient(color-mix(in srgb, var(--px-navy) 20.0%, transparent) 1.1px, transparent 1.2px);
+  background-size: 22px 22px;
+}
+.px-dots-teal {
+  background-image: radial-gradient(color-mix(in srgb, var(--px-primary-dark) 22%, transparent) 1.2px, transparent 1.4px);
+  background-size: 26px 26px;
+}
+.px-diagonal {
+  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--px-accent) 5%, transparent) 0 1px, transparent 1px 16px);
+}
+.px-rings {
+  background-image: repeating-radial-gradient(circle at center, transparent 0 38px, color-mix(in srgb, var(--px-primary-dark) 10%, transparent) 38px 39px);
+}
+.px-fade-mask {
+  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
+  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
+}
+.px-fade-right {
+  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 70%);
+  mask-image: linear-gradient(to left, #000 10%, transparent 70%);
+}
+.px-fade-left {
+  -webkit-mask-image: linear-gradient(to right, #000 10%, transparent 70%);
+  mask-image: linear-gradient(to right, #000 10%, transparent 70%);
+}
+@keyframes pxDrift {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  50% { transform: translate3d(30px, -20px, 0); }
+}
+.px-drift {
+  animation: pxDrift 16s ease-in-out infinite;
+}
+
+/* Handwritten annotations (Caveat) */
+.font-hand {
+  font-family: 'Caveat', cursive;
+  font-weight: 500;
+}
+
+/* Polaroid-style photo frame with tape */
+.px-polaroid {
+  background: #fff;
+  padding: 10px 10px 0;
+  border: 1px solid var(--px-border);
+  box-shadow: 0 18px 35px -18px color-mix(in srgb, var(--px-navy) 35.0%, transparent);
+  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
+}
+.px-polaroid:hover {
+  transform: rotate(0deg) translateY(-6px) scale(1.02) !important;
+  box-shadow: 0 30px 50px -20px color-mix(in srgb, var(--px-navy) 45.0%, transparent);
+  z-index: 10;
+}
+.px-tape {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  width: 92px;
+  height: 26px;
+  transform: translateX(-50%) rotate(-3deg);
+  background: linear-gradient(105deg, color-mix(in srgb, var(--px-primary) 28%, transparent), color-mix(in srgb, var(--px-accent) 22%, transparent));
+  border-left: 1px dashed rgba(255, 255, 255, 0.6);
+  border-right: 1px dashed rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(1px);
+  box-shadow: 0 2px 5px color-mix(in srgb, var(--px-navy) 12.0%, transparent);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--px-surface);
+}
+::-webkit-scrollbar-thumb {
+  background: #CBD5E1;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #94A3B8;
+}
+
+/* Contenu riche issu de l'éditeur du backoffice */
+.cms-prose { color: #334155; font-size: 1.0625rem; line-height: 1.8; }
+.cms-prose > * + * { margin-top: 1.1em; }
+.cms-prose h2 { color: var(--px-navy); font-size: 1.75rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin-top: 2em; }
+.cms-prose h3 { color: var(--px-navy); font-size: 1.375rem; line-height: 1.35; font-weight: 600; margin-top: 1.7em; }
+.cms-prose h4 { color: var(--px-navy); font-size: 1.125rem; font-weight: 600; margin-top: 1.5em; }
+.cms-prose a { color: var(--px-primary-dark); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
+.cms-prose strong { color: var(--px-navy); font-weight: 600; }
+.cms-prose ul { list-style: disc; padding-left: 1.4em; }
+.cms-prose ol { list-style: decimal; padding-left: 1.4em; }
+.cms-prose li + li { margin-top: 0.4em; }
+.cms-prose li::marker { color: var(--px-primary-dark); }
+.cms-prose blockquote { border-left: 3px solid var(--px-primary); padding: 0.25em 0 0.25em 1.2em; color: var(--px-navy); font-style: italic; }
+.cms-prose img { border-radius: 1rem; margin: 2em auto; }
+.cms-prose hr { border: 0; border-top: 1px solid var(--px-border); margin: 2.5em 0; }
+.cms-prose code { background: #f1f5f9; padding: 0.15em 0.4em; border-radius: 0.375rem; font-size: 0.9em; }
+.cms-prose [style*="text-align: center"] { text-align: center; }
+.cms-prose [style*="text-align: right"] { text-align: right; }
+
+.cms-prose-dark { color: rgb(255 255 255 / 0.75); }
+.cms-prose-dark h2, .cms-prose-dark h3, .cms-prose-dark h4, .cms-prose-dark strong, .cms-prose-dark blockquote { color: #fff; }
+.cms-prose-dark a { color: var(--px-primary-light); }
+.cms-prose-large { font-size: 1.1875rem; }
+.cms-prose h2:first-child, .cms-prose h3:first-child, .cms-prose p:first-child { margin-top: 0; }
+
+@keyframes pxMarqueeFast { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+.px-marquee-slow { animation-duration: 48s; }
+.px-marquee-fast { animation-duration: 18s; }
+
+
+/* Option « Animations » désactivée */
+.sb-no-motion .px-marquee, .sb-no-motion .px-float, .sb-no-motion .px-float-delay, .sb-no-motion .px-blob,
+.sb-no-motion .px-gradient-pan, .sb-no-motion .px-shine::after, .sb-no-motion .px-word-in, .sb-no-motion .px-drift {
+  animation: none !important;
+}
+.sb-no-motion .px-reveal { opacity: 1; transform: none; transition: none; }

package/template/themes/dogga/snapify.theme.json

@@ -0,0 +1,55 @@
+{
+  "id": "novalabs.dogga",
+  "name": "Dogga",
+  "version": "1.0.0",
+  "description": "Thème éditorial inspiré du site antique de Dougga : grands titres à empattements, palette pierre et terre cuite, images en arche et sections aérées. Élégant, sobre et professionnel ; prend en charge les 25 blocs du constructeur.",
+  "author": { "name": "NOVALABS WEB DESIGN", "email": "contact@novalabs.tn", "url": "https://novalabs.tn" },
+  "pricing": "free",
+  "category": "Corporate",
+  "engines": { "snapify": "^1.1.0" },
+  "entries": { "public": "src/index.tsx" },
+  "screenshot": "screenshot.jpg",
+  "settings": [
+    {
+      "key": "palette", "type": "select", "group": "Couleurs", "label": "Palette", "default": "stone",
+      "help": "« Identité visuelle » reprend les couleurs choisies dans Apparence > Identité visuelle.",
+      "options": [
+        { "value": "stone", "label": "Pierre (ivoire chaud)" },
+        { "value": "white", "label": "Blanc galerie" },
+        { "value": "brand", "label": "Identité visuelle du site" }
+      ]
+    },
+    {
+      "key": "accent", "type": "select", "group": "Couleurs", "label": "Couleur d’accent", "default": "terracotta",
+      "options": [
+        { "value": "terracotta", "label": "Terre cuite" },
+        { "value": "olive", "label": "Olivier" },
+        { "value": "indigo", "label": "Bleu nuit" },
+        { "value": "brand", "label": "Couleur principale du site" }
+      ]
+    },
+    {
+      "key": "typography", "type": "select", "group": "Typographie", "label": "Style des titres", "default": "editorial",
+      "options": [
+        { "value": "editorial", "label": "Éditorial (titres à empattements)" },
+        { "value": "modern", "label": "Moderne (sans empattements)" },
+        { "value": "brand", "label": "Polices de l’identité visuelle" }
+      ]
+    },
+    {
+      "key": "corners", "type": "select", "group": "Style", "label": "Angles", "default": "soft",
+      "options": [
+        { "value": "sharp", "label": "Nets" },
+        { "value": "soft", "label": "Adoucis" },
+        { "value": "round", "label": "Arrondis" }
+      ]
+    },
+    { "key": "arches", "type": "boolean", "group": "Style", "label": "Images en arche", "help": "Signature du thème : les visuels principaux prennent la forme d’une arche antique.", "default": true },
+    { "key": "animations", "type": "boolean", "group": "Style", "label": "Animations", "help": "Apparition des sections, défilements et compteurs.", "default": true },
+    { "key": "topBar", "type": "boolean", "group": "En-tête", "label": "Bandeau d’informations", "help": "Fine barre au-dessus de l’en-tête : slogan, téléphone et e-mail (ordinateur).", "default": true },
+    { "key": "stickyHeader", "type": "boolean", "group": "En-tête", "label": "En-tête fixe", "default": true },
+    { "key": "headerPhone", "type": "boolean", "group": "En-tête", "label": "Téléphone dans l’en-tête", "default": true },
+    { "key": "footerWordmark", "type": "boolean", "group": "Pied de page", "label": "Grand nom du site", "help": "Nom du site en très grand caractère au bas de chaque page.", "default": true },
+    { "key": "mobileBar", "type": "boolean", "group": "Mobile", "label": "Barre d’actions mobile", "help": "Boutons fixés en bas de l’écran sur mobile (réglables dans Boutons flottants).", "default": true }
+  ]
+}

package/template/themes/dogga/src/Brand.tsx

@@ -0,0 +1,41 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React from 'react';
+import { useSnapify } from '@snapify/sdk/theme';
+import { cx } from './kit';
+
+/** Logo du site, ou à défaut monogramme en arche suivi du nom et de la signature. */
+export function Brand({ dark, onClick }: { dark?: boolean; onClick: () => void }) {
+  const { site, info } = useSnapify();
+  const logo = dark ? site.branding.logoDarkUrl || '' : site.branding.logoUrl;
+  const name = (site.branding.siteName || info.name).replace(/®$/, '');
+  return (
+    <button type="button" onClick={onClick} className="group flex shrink-0 items-center gap-3 text-left" aria-label={`${name} — accueil`}>
+      {logo ? (
+        <img src={logo} alt={name} className="h-10 w-auto max-w-[190px] object-contain" />
+      ) : (
+        <>
+          <span
+            className={cx(
+              'dg-display flex h-11 w-9 items-end justify-center rounded-t-full pb-1.5 text-[1.45rem] leading-none transition-colors',
+              dark ? 'bg-[#f5f0e8] text-(--dg-ink)' : 'bg-(--dg-ink) text-(--dg-paper) group-hover:bg-(--dg-accent)'
+            )}
+            aria-hidden="true"
+          >
+            {name.charAt(0).toUpperCase()}
+          </span>
+          <span className="flex flex-col">
+            <span className={cx('dg-display text-[1.6rem] leading-none', dark ? 'text-[#f5f0e8]' : 'text-(--dg-ink)')}>{name}</span>
+            {site.branding.tagline ? (
+              <span className={cx('mt-1 text-[10px] font-semibold uppercase tracking-[0.2em]', dark ? 'text-[#f5f0e8]/55' : 'text-(--dg-muted)')}>{site.branding.tagline}</span>
+            ) : null}
+          </span>
+        </>
+      )}
+    </button>
+  );
+}

package/template/themes/dogga/src/Footer.tsx

@@ -0,0 +1,202 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useState } from 'react';
+import { ArrowRight, ArrowUp, ArrowUpRight, Mail, MapPin, Phone } from 'lucide-react';
+import type { ThemeChromeProps } from '@snapify/sdk/theme';
+import { useSnapify } from '@snapify/sdk/theme';
+import { followLink, IS_PREVIEW, useMenus, useOptions } from './site';
+import { Brand } from './Brand';
+import { cx } from './kit';
+
+const LEGAL = ['/mentions-legales/', '/politique-de-confidentialite/', '/cookies/'];
+
+function Newsletter() {
+  const [email, setEmail] = useState('');
+  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
+  const [busy, setBusy] = useState(false);
+  return (
+    <form
+      className="w-full max-w-md"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        if (IS_PREVIEW || busy) return;
+        setBusy(true);
+        setMsg(null);
+        const r = await fetch('/api/public/newsletter/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }) }).catch(() => null);
+        const j = await r?.json().catch(() => ({}));
+        setBusy(false);
+        if (r?.ok) {
+          setEmail('');
+          setMsg({ ok: true, text: j?.pending ? 'Vérifiez votre boîte mail pour confirmer votre inscription.' : 'Inscription enregistrée, merci !' });
+        } else setMsg({ ok: false, text: j?.error || 'Inscription impossible pour le moment.' });
+      }}
+    >
+      <label htmlFor="dg-news" className="mb-3 block text-[11px] font-semibold uppercase tracking-[0.22em] text-[#f5f0e8]/55">
+        Lettre d’information
+      </label>
+      <div className="flex items-center gap-2 border-b border-white/25 pb-2 focus-within:border-white">
+        <input
+          id="dg-news"
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="Votre adresse e-mail"
+          className="min-w-0 flex-1 bg-transparent py-2 text-base text-white placeholder:text-white/40 focus:outline-none"
+        />
+        <button type="submit" disabled={busy} className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-(--dg-accent) text-(--dg-on-accent) transition-transform hover:scale-105 disabled:opacity-60" aria-label="S’inscrire">
+          <ArrowRight className="h-4 w-4" />
+        </button>
+      </div>
+      {msg ? <p className={cx('mt-2 text-xs', msg.ok ? 'text-[#f5f0e8]/75' : 'text-rose-300')}>{msg.text}</p> : null}
+    </form>
+  );
+}
+
+export function Footer({ navigate, openCookies }: ThemeChromeProps) {
+  const { info, site } = useSnapify();
+  const o = useOptions();
+  const { primary, footer, cta } = useMenus();
+  const go = (path: string, newTab?: boolean) => followLink(path, navigate, newTab);
+
+  const menuById = (id: string) => site.menus?.find((m) => m.id === id)?.items || [];
+  const colMenus = [
+    { id: 'footer-col-1', title: site.menus?.find((m) => m.id === 'footer-col-1')?.label || 'Navigation', links: menuById('footer-col-1') },
+    { id: 'footer-col-2', title: site.menus?.find((m) => m.id === 'footer-col-2')?.label || 'Explorer', links: menuById('footer-col-2') },
+  ].filter((c) => c.links.length);
+  const groups = colMenus.length ? [] : primary.filter((i) => i.children?.length).slice(0, 2);
+  const pages = colMenus.length
+    ? []
+    : [...primary.filter((i) => !i.children?.length && !i.highlight), ...footer.filter((i) => !LEGAL.includes(i.path) && !primary.some((p) => p.path === i.path))];
+  const legal = footer.filter((i) => LEGAL.includes(i.path));
+  const legalLinks = legal.length
+    ? legal
+    : [
+        { id: 'ml', label: 'Mentions légales', path: '/mentions-legales/' },
+        { id: 'pc', label: 'Politique de confidentialité', path: '/politique-de-confidentialite/' },
+      ];
+  const name = (site.branding.siteName || info.name).replace(/®$/, '');
+
+  return (
+    <footer className="dg-dark relative overflow-hidden bg-(--dg-ink) pb-24 text-(--dg-fg) lg:pb-0">
+      <div className="mx-auto max-w-7xl px-5 sm:px-8">
+        <div className="flex flex-col gap-10 border-b border-white/10 py-16 lg:flex-row lg:items-end lg:justify-between lg:py-20">
+          <div className="max-w-2xl space-y-6">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-(--dg-accent-text)">{info.baseline || 'Parlons de votre projet'}</div>
+            <p className="dg-display text-4xl sm:text-5xl lg:text-6xl">{info.slogan || name}</p>
+            <button type="button" onClick={() => go(cta.path)} className="dg-btn dg-btn-primary dg-btn-lg">
+              {cta.label}
+              <ArrowRight className="dg-btn-arrow h-4 w-4" />
+            </button>
+          </div>
+          {site.newsletterEnabled ? <Newsletter /> : null}
+        </div>
+
+        <div className="grid grid-cols-1 gap-12 py-14 sm:grid-cols-2 lg:grid-cols-12 lg:gap-8">
+          <div className="space-y-6 lg:col-span-4">
+            <Brand dark onClick={() => go('/')} />
+            <ul className="space-y-3 text-sm text-(--dg-fg-2)">
+              <li>
+                <a href={`tel:${info.phoneClean}`} className="inline-flex items-center gap-3 transition-colors hover:text-white">
+                  <Phone className="h-4 w-4 text-(--dg-accent-text)" />
+                  {info.phone}
+                </a>
+              </li>
+              <li>
+                <a href={`mailto:${info.contactEmail}`} className="inline-flex items-center gap-3 transition-colors hover:text-white">
+                  <Mail className="h-4 w-4 text-(--dg-accent-text)" />
+                  {info.contactEmail}
+                </a>
+              </li>
+              {info.address ? (
+                <li className="flex items-start gap-3">
+                  <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-(--dg-accent-text)" />
+                  {info.address}
+                </li>
+              ) : null}
+            </ul>
+          </div>
+
+          {colMenus.map((g) => (
+            <div key={g.id} className="space-y-5 lg:col-span-3">
+              <div className="text-[11px] leading-5 font-semibold uppercase tracking-[0.22em] text-[#f5f0e8]/55">{g.title}</div>
+              <ul className="space-y-3">
+                {g.links.map((c) => (
+                  <li key={c.id}>
+                    <button type="button" onClick={() => go(c.path, c.openInNewTab)} className="text-left text-sm text-(--dg-fg-2) transition-colors hover:text-white">
+                      {c.label}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+
+          {groups.map((g) => (
+            <div key={g.id} className="space-y-5 lg:col-span-3">
+              <button type="button" onClick={() => go(g.path)} className="block text-[11px] leading-5 font-semibold uppercase tracking-[0.22em] text-[#f5f0e8]/55 transition-colors hover:text-white">
+                {g.label}
+              </button>
+              <ul className="space-y-3">
+                {g.children!.map((c) => (
+                  <li key={c.id}>
+                    <button type="button" onClick={() => go(c.path, c.openInNewTab)} className="text-left text-sm text-(--dg-fg-2) transition-colors hover:text-white">
+                      {c.label}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+
+          {pages.length ? (
+            <div className={cx('space-y-5', groups.length >= 2 ? 'lg:col-span-2' : 'lg:col-span-3')}>
+              <div className="text-[11px] leading-5 font-semibold uppercase tracking-[0.22em] text-[#f5f0e8]/55">Navigation</div>
+              <ul className="space-y-3">
+                {pages.map((p) => (
+                  <li key={p.id}>
+                    <button type="button" onClick={() => go(p.path, p.openInNewTab)} className={cx('group inline-flex items-center gap-1 text-left text-sm transition-colors hover:text-white', p.highlight ? 'text-(--dg-accent-text)' : 'text-(--dg-fg-2)')}>
+                      {p.label}
+                      {p.highlight ? <ArrowUpRight className="h-3.5 w-3.5" /> : null}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {o.footerWordmark ? (
+        <div className="pointer-events-none -mb-[0.12em] overflow-hidden text-center" aria-hidden="true">
+          <div className="dg-wordmark">{name}</div>
+        </div>
+      ) : null}
+
+      <div className="relative border-t border-white/10">
+        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-5 py-6 text-xs text-(--dg-fg-2) sm:px-8 lg:flex-row">
+          <span>
+            © {new Date().getFullYear()} {info.legalName || name}. Tous droits réservés.
+          </span>
+          <div className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
+            {legalLinks.map((l) => (
+              <button key={l.id} type="button" onClick={() => go(l.path)} className="transition-colors hover:text-white">
+                {l.label}
+              </button>
+            ))}
+            <button type="button" onClick={openCookies} className="transition-colors hover:text-white">
+              Gérer mes cookies
+            </button>
+            <button type="button" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="ml-2 flex h-9 w-9 items-center justify-center rounded-full border border-white/15 text-white transition-colors hover:bg-white hover:text-(--dg-ink)" aria-label="Revenir en haut">
+              <ArrowUp className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}