// Pages articles du guide funéraire

function ArticleLayout({ setRoute, kicker, title, subtitle, img, imgAlt, bannerImg, children, relatedId }) {
  const articles = window.FDL_DATA.GUIDE_ARTICLES;
  const related = articles.filter(a => a.id !== relatedId).slice(0, 3);

  return (
    <main>
      <section className="px-8 pt-20 md:pt-28 pb-16 relative overflow-hidden page-hero-banner" style={{ '--banner-bg-img': 'url(assets/protocolo-ceremonia-2.jpg)' }}>
        {bannerImg && (
          <>
            <div className="absolute inset-0 z-0">
              <img src={bannerImg} alt="" className="w-full h-full object-cover" style={{ opacity: 0.28, filter: 'saturate(0.55)' }} />
              <div className="absolute inset-0" style={{ background: 'linear-gradient(to bottom, color-mix(in srgb, var(--surface) 35%, transparent), color-mix(in srgb, var(--surface) 8%, transparent), var(--surface))' }} />
            </div>
          </>
        )}
        <div className="max-w-4xl mx-auto relative z-10">
          <nav className="flex items-center gap-2 mb-8 text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)' }}>
            <button onClick={() => setRoute('home')} className="hover:opacity-70">Accueil</button>
            <Icon name="chevron_right" className="text-[10px]" />
            <button onClick={() => setRoute('guide')} className="hover:opacity-70">Guide et protocole</button>
            <Icon name="chevron_right" className="text-[10px]" />
            <span style={{ color: 'var(--primary)' }}>{kicker}</span>
          </nav>
          <p className="uppercase tracking-widest text-[11px] mb-5" style={{ color: 'var(--primary)' }}>{kicker}</p>
          <h1 className="font-serif text-4xl md:text-6xl tracking-tight leading-[1.05] mb-4" style={{ color: 'var(--on-surface)' }}>{title}</h1>
          {subtitle && <p className="text-base md:text-lg max-w-2xl leading-relaxed mt-4" style={{ color: 'var(--on-surface-variant)' }}>{subtitle}</p>}
        </div>
      </section>

      {img && (
        <div className="w-full max-h-[480px] overflow-hidden" style={{ background: 'var(--surface-container)' }}>
          <img src={img} alt={imgAlt || title} className="w-full h-full object-cover" style={{ maxHeight: '480px' }} />
        </div>
      )}

      <section className="px-8 py-16 md:py-24">
        <div className="max-w-3xl mx-auto prose-article">{children}</div>
      </section>

      <section className="px-8 py-16 md:py-20" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-7xl mx-auto">
          <p className="uppercase tracking-widest text-[11px] mb-8" style={{ color: 'var(--primary)' }}>Continuer la lecture</p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {related.map(art => (
              <button key={art.id} onClick={() => setRoute('article-' + art.id)} className="text-left p-6 transition-opacity hover:opacity-70" style={{ background: 'var(--surface-container-lowest)' }}>
                <p className="uppercase tracking-widest text-[10px] mb-3" style={{ color: 'var(--primary)' }}>{art.kicker}</p>
                <h3 className="font-serif text-xl mb-2 leading-snug" style={{ color: 'var(--on-surface)' }}>{art.title}</h3>
                <p className="text-xs leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>{art.summary}</p>
                <span className="inline-flex items-center gap-2 mt-4 text-[10px] uppercase tracking-widest font-medium" style={{ color: 'var(--primary)' }}>
                  Lire <Icon name="arrow_forward" className="text-xs" />
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Nos compositions de fleurs funéraires */}
      <section className="py-24 md:py-32 px-8" style={{ background: 'var(--surface-container-lowest)' }}>
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row md:justify-between md:items-end mb-14 md:mb-18 gap-6">
            <div>
              <p className="uppercase tracking-widest text-[11px] mb-4" style={{ color: 'var(--primary)' }}>Collection signature</p>
              <h2 className="font-serif text-4xl md:text-5xl italic leading-tight" style={{ color: 'var(--on-surface)' }}>Nos compositions de fleurs funéraires</h2>
              <p className="max-w-md leading-relaxed mt-4 text-sm md:text-base" style={{ color: 'var(--on-surface-variant)' }}>
                Couronnes, gerbes et bouquets confectionnés à la main dans notre atelier marseillais — livrés le jour même dans tout le Grand Marseille.
              </p>
            </div>
            <button onClick={() => setRoute('boutique')} className="self-start md:self-auto uppercase tracking-widest text-[11px] underline underline-offset-8 hover:opacity-70 transition-opacity flex-shrink-0" style={{ color: 'var(--primary)' }}>
              Toute la collection →
            </button>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12">
            {window.FDL_DATA.PRODUCTS.slice(0, 3).map(p => (
              <article key={p.id} className="group cursor-pointer" onClick={() => setRoute('boutique')}>
                <div className="aspect-[4/5] mb-8 overflow-hidden" style={{ background: 'var(--surface-container-low)' }}>
                  <img src={p.img} alt={p.name} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" />
                </div>
                <div className="flex flex-col">
                  <p className="uppercase tracking-widest text-[10px] mb-2" style={{ color: 'var(--primary)' }}>{p.category}</p>
                  <h3 className="font-serif text-xl md:text-2xl mb-2" style={{ color: 'var(--on-surface)' }}>{p.name}</h3>
                  <p className="text-sm mb-8" style={{ color: 'var(--on-surface-variant)' }}>{p.tagline}</p>
                  <div className="flex justify-between items-center">
                    <span className="font-serif text-lg" style={{ color: 'var(--on-surface)' }}>{p.price.toFixed(2).replace('.', ',')} €</span>
                    <span className="uppercase tracking-widest text-[10px] font-medium group-hover:opacity-70 transition-opacity" style={{ color: 'var(--shop)', borderBottom: '1px solid color-mix(in srgb, var(--shop) 40%, transparent)', paddingBottom: '2px' }}>
                      Envoyer cet hommage
                    </span>
                  </div>
                </div>
              </article>
            ))}
          </div>
          <div className="mt-12 flex justify-center">
            <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-2 px-10 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--shop)', color: '#fff' }}>
              Commander maintenant <Icon name="arrow_forward" className="text-sm" />
            </button>
          </div>
        </div>
      </section>

      <section className="px-8 py-16" style={{ background: 'var(--surface-container-low)' }}>
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="font-serif text-3xl mb-4" style={{ color: 'var(--on-surface)' }}>Besoin de fleurs funéraires à <span className="italic">Marseille</span> ?</h2>
          <p className="text-sm leading-relaxed mb-8" style={{ color: 'var(--on-surface-variant)' }}>Notre atelier prépare et livre couronnes, compositions et bouquets funéraires le jour même dans tout le Grand Marseille.</p>
          <div className="flex flex-wrap gap-4 justify-center">
            <button onClick={() => setRoute('boutique')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90" style={{ background: 'var(--shop)', color: '#fff' }}>
              Voir les créations <Icon name="arrow_forward" className="text-sm" />
            </button>
            <button onClick={() => setRoute('contact')} className="inline-flex items-center gap-2 px-8 py-4 text-[11px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70" style={{ border: '1px solid var(--primary)', color: 'var(--primary)' }}>
              Nous contacter
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

const articleStyles = `
  .prose-article h2 { font-family: 'Noto Serif', serif; font-size: 1.75rem; line-height: 1.15; margin-top: 2.5rem; margin-bottom: 1rem; color: var(--on-surface); }
  .prose-article h3 { font-family: 'Noto Serif', serif; font-size: 1.25rem; line-height: 1.3; margin-top: 2rem; margin-bottom: 0.75rem; color: var(--on-surface); font-style: italic; }
  .prose-article p { font-size: 1rem; line-height: 1.8; margin-bottom: 1.25rem; color: var(--on-surface-variant); }
  .prose-article strong { color: var(--on-surface); font-weight: 600; }
  .prose-article ul { list-style: none; padding: 0; margin: 1.5rem 0; }
  .prose-article ul li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.9375rem; line-height: 1.7; color: var(--on-surface-variant); }
  .prose-article ul li::before { content: ''; display: block; width: 1rem; height: 1px; background: var(--primary); margin-top: 0.75rem; flex-shrink: 0; }
  .prose-article .callout { background: var(--surface-container-low); padding: 1.5rem 2rem; margin: 2rem 0; border-left: 3px solid var(--primary); }
  .prose-article .callout p { margin-bottom: 0; }
  .prose-article figure { margin: 2.5rem 0; }
  .prose-article figure img { margin: 0 0 0.75rem 0; width: 100%; }
  .prose-article figcaption { font-size: 0.78rem; color: var(--on-surface-variant); opacity: 0.7; text-align: center; font-style: italic; }
`;

// ---- Article 1 : Démarches après un décès ----
function ArticleDemarches({ setRoute }) {
  return (
    <>
      <style>{articleStyles}</style>
      <ArticleLayout setRoute={setRoute} kicker="Guide pratique" title="Démarches après un décès" subtitle="Les étapes administratives incontournables à accomplir dans les 24 à 72 heures suivant le décès en France." img={window.ARTICLE_IMAGES?.demarches || null} bannerImg="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1600&q=80&auto=format&fit=crop" imgAlt="Démarches administratives après un décès en France" relatedId="demarches-apres-deces">
        <p>Le décès d'un proche est l'un des moments les plus difficiles de l'existence. Au-delà du deuil, les familles doivent faire face à une série de démarches administratives dans un délai très court. Ce guide vous accompagne pas à pas pour vous permettre de vous concentrer sur l'essentiel : le soutien à votre famille.</p>

        <figure>
          <img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=900&q=80&auto=format&fit=crop" alt="Démarches administratives après un décès" />
          <figcaption>Les démarches administratives doivent être engagées dans les premières 24 heures suivant le décès.</figcaption>
        </figure>

        <h2>Les premières heures : que faire dans les 24 heures ?</h2>
        <p>Dans les premières heures qui suivent le décès, il est essentiel d'agir rapidement sur plusieurs fronts. Si le décès survient à domicile, le médecin doit se déplacer pour constater le décès et établir le <strong>certificat médical de décès</strong>, document indispensable pour toutes les démarches ultérieures.</p>
        <p>Si le décès a lieu à l'hôpital ou en établissement, le centre se charge de prévenir le médecin et de gérer les premiers documents. Dans tous les cas, la famille doit contacter une <strong>entreprise de pompes funèbres</strong> dans les heures qui suivent pour organiser le transport du corps.</p>

        <div className="callout">
          <p><strong>Urgence fleurs funéraires :</strong> Si vous avez besoin d'envoyer des fleurs funéraires au funérarium pendant la gestion des démarches, notre atelier à Marseille est disponible 24h/24. Appelez-nous directement pour une livraison express.</p>
        </div>

        <h2>La déclaration de décès en mairie</h2>
        <p>La déclaration officielle du décès doit être effectuée à la <strong>mairie du lieu où le décès s'est produit</strong>, dans un délai maximum de 24 heures ouvrables. Cette démarche peut être accomplie par un membre de la famille, le directeur des pompes funèbres ou toute personne en mesure d'attester du fait.</p>
        <h3>Documents nécessaires pour la déclaration</h3>
        <ul>
          <li>Le certificat médical de décès</li>
          <li>La pièce d'identité du défunt (CNI, passeport ou titre de séjour)</li>
          <li>Le livret de famille ou l'acte de naissance du défunt</li>
          <li>La pièce d'identité de la personne effectuant la déclaration</li>
        </ul>
        <p>À partir de cette déclaration, la mairie délivre l'<strong>acte de décès</strong>, dont il est conseillé de demander plusieurs copies certifiées pour les démarches ultérieures (banques, assurances, succession, etc.).</p>

        <figure>
          <img src="assets/tramites-flores-blancas.jpg" alt="Fleurs blanches déposées sur une sépulture en hommage au défunt" />
          <figcaption>Les fleurs funéraires font partie intégrante du protocole d'hommage lors des obsèques.</figcaption>
        </figure>

        <h2>Organisation des obsèques</h2>
        <p>Une fois l'acte de décès obtenu, la famille peut commencer à organiser les obsèques. En France, les obsèques doivent avoir lieu dans un délai <strong>minimum de 24 heures et maximum de 6 jours ouvrables</strong> suivant le décès. Ce délai peut être prolongé dans des cas exceptionnels (rapatriement international, par exemple).</p>
        <h3>Choix du type d'obsèques</h3>
        <p>La famille doit choisir entre <strong>inhumation et crémation</strong>, en tenant compte des volontés exprimées par le défunt de son vivant ou dans un contrat de prévoyance funéraire. En l'absence d'instructions, la décision revient aux proches.</p>
        <ul>
          <li>Inhumation : enterrement dans un cimetière municipal ou privé, avec concession temporaire ou perpétuelle</li>
          <li>Crémation : incinération au crématorium, suivie de l'inhumation de l'urne ou de la dispersion des cendres</li>
          <li>Don du corps à la science : option nécessitant d'avoir effectué les démarches de son vivant</li>
        </ul>

        <h2>Démarches administratives ultérieures</h2>
        <p>Une fois les obsèques célébrées, un ensemble de démarches reste à accomplir dans les semaines suivantes. Bien que non urgentes, il est recommandé de les traiter rapidement pour éviter des complications juridiques ou financières.</p>
        <h3>Notifications obligatoires</h3>
        <ul>
          <li><strong>Sécurité sociale et mutuelle :</strong> signaler le décès pour clôturer les droits et demander le capital décès si applicable</li>
          <li><strong>Banque et organismes financiers :</strong> blocage des comptes et gestion de la succession</li>
          <li><strong>Employeur :</strong> si le défunt était en activité, déclarer le décès pour la gestion des droits salariaux</li>
          <li><strong>Bailleur ou notaire :</strong> selon que le défunt était locataire ou propriétaire</li>
          <li><strong>Caisses de retraite et organismes de pension</strong></li>
        </ul>

        <h2>Le rôle du notaire dans la succession</h2>
        <p>L'intervention d'un notaire est obligatoire lorsque le patrimoine du défunt dépasse 5 000 euros ou lorsqu'un bien immobilier est en jeu. Le notaire ouvre le dossier successoral, identifie les héritiers, inventorie les biens et procède à la répartition de la succession conformément à la loi ou au testament.</p>
        <p>À Marseille, vous trouverez des notaires spécialisés en droit successoral auprès de la Chambre des Notaires des Bouches-du-Rhône. Demandez toujours plusieurs devis et conservez tous les documents liés au décès et à la succession.</p>

        <div className="callout">
          <p><strong>Rappel :</strong> Dans ces moments difficiles, vous n'avez pas à tout faire seul. Les pompes funèbres, les notaires et les organismes sociaux sont formés pour vous orienter. N'hésitez pas à demander de l'aide.</p>
        </div>
      </ArticleLayout>
    </>
  );
}

// ---- Article 2 : Inhumation ou crémation ? ----
function ArticleObseques({ setRoute }) {
  return (
    <>
      <style>{articleStyles}</style>
      <ArticleLayout setRoute={setRoute} kicker="Choix funéraire" title="Inhumation ou crémation ?" subtitle="Comprendre les différences pour faire un choix éclairé en accord avec les volontés du défunt." img={window.ARTICLE_IMAGES?.obseques || null} bannerImg="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1600&q=80&auto=format&fit=crop" imgAlt="Inhumation ou crémation à Marseille" relatedId="choisir-obseques">
        <p>L'une des premières décisions qu'une famille doit prendre après le décès d'un proche est de choisir entre <strong>inhumation et crémation</strong>. En France, les deux options sont parfaitement légales et encadrées par la loi. Ce guide vous explique les différences, les coûts et les aspects pratiques de chacune pour vous aider à prendre la meilleure décision.</p>

        <figure>
          <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=900&q=80&auto=format&fit=crop" alt="Cimetière serein en Provence" />
          <figcaption>Les cimetières provençaux offrent des espaces de recueillement dans des environnements naturels apaisants.</figcaption>
        </figure>

        <h2>L'inhumation : la tradition de l'enterrement</h2>
        <p>L'inhumation consiste en l'enterrement du corps dans un cimetière. En France, elle doit avoir lieu dans un cimetière municipal, un cimetière privé agréé ou une propriété privée sous conditions très strictes. C'est la modalité la plus traditionnelle et elle reste la plus pratiquée dans le pays.</p>
        <h3>Avantages de l'inhumation</h3>
        <ul>
          <li>Un lieu physique permanent pour se recueillir et rendre hommage au défunt</li>
          <li>Respecte les traditions religieuses de la majorité des confessions</li>
          <li>Permet l'exhumation si nécessaire à l'avenir</li>
          <li>La tombe peut être personnalisée avec des stèles, des fleurs et des ornements</li>
        </ul>
        <h3>Coûts de l'inhumation à Marseille</h3>
        <p>Le coût de l'inhumation varie selon le type de concession : temporaire (15 ans), longue durée (30 ans) ou perpétuelle. À Marseille, le Cimetière de Saint-Pierre est le plus grand et propose différentes options selon le budget de la famille.</p>

        <h2>La crémation : une option en plein essor</h2>
        <p>La crémation a connu une croissance significative en France ces dernières années. Elle consiste en l'incinération du corps dans un crématorium à haute température, jusqu'à le réduire en cendres. À Marseille, le <strong>Crématorium Saint-Pierre</strong> gère les cérémonies de crémation de toute la région.</p>
        <h3>Avantages de la crémation</h3>
        <ul>
          <li>Généralement moins coûteuse que l'inhumation</li>
          <li>Plus de souplesse pour la famille concernant la destination des cendres</li>
          <li>Ne nécessite pas l'entretien d'une tombe</li>
          <li>Possibilité de disperser les cendres dans un lieu significatif</li>
        </ul>
        <h3>Que faire des cendres ?</h3>
        <p>La législation française autorise plusieurs options : inhumation de l'urne dans un cimetière, dépôt dans un columbarium, dispersion dans le jardin du souvenir du crématorium ou dispersion en pleine mer ou en espace naturel. La dispersion sur une propriété privée ou sur la voie publique est <strong>interdite par la loi</strong>.</p>

        <figure>
          <img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?w=900&q=80&auto=format&fit=crop" alt="Paysage serein pour la réflexion" />
          <figcaption>Le choix entre inhumation et crémation relève à la fois de considérations pratiques et de convictions personnelles ou religieuses.</figcaption>
        </figure>

        <div className="callout">
          <p><strong>Fleurs pour la crémation :</strong> Nous préparons des compositions spécifiquement conçues pour les salles de crémation — bouquets, gerbes légères et ornements floraux adaptés au protocole du Crématorium Saint-Pierre de Marseille.</p>
        </div>

        <h2>Aspects religieux et culturels</h2>
        <p>Le choix entre inhumation et crémation peut être conditionné par la foi ou les traditions culturelles du défunt et de sa famille. Dans la religion catholique, la crémation est autorisée depuis 1963, bien que l'inhumation des cendres soit recommandée. L'islam et le judaïsme orthodoxe <strong>interdisent la crémation</strong> et exigent l'inhumation. Le bouddhisme et l'hindouisme, en revanche, ont une longue tradition de crémation.</p>

        <h2>Et si le défunt n'a pas laissé d'instructions ?</h2>
        <p>En l'absence de testament ou de contrat de prévoyance funéraire, la décision revient au <strong>conjoint survivant</strong> ou, à défaut, aux proches les plus directs. Il est recommandé de dialoguer en famille et de consulter le directeur des pompes funèbres avant de prendre une décision définitive.</p>
      </ArticleLayout>
    </>
  );
}

// ---- Article 3 : Protocole de la cérémonie ----
function ArticleProtocole({ setRoute }) {
  return (
    <>
      <style>{articleStyles}</style>
      <ArticleLayout setRoute={setRoute} kicker="Rites et traditions" title="Protocole de la cérémonie funèbre" subtitle="Organisation, déroulement, discours d'hommage et traditions provençales pour des obsèques dignes." img={window.ARTICLE_IMAGES?.protocole || null} bannerImg="assets/protocolo-ceremonia.jpg" imgAlt="Protocole de la cérémonie funèbre à Marseille" relatedId="protocole-ceremonie">
        <p>La cérémonie funèbre est le moment central du deuil : l'espace où la famille et les proches se réunissent pour rendre un dernier hommage au défunt. Comprendre le protocole et les différentes modalités de cérémonie aide la famille à prendre des décisions sereinement et à préparer un acte qui reflète authentiquement la vie et les valeurs de l'être aimé.</p>

        <figure>
          <img src="assets/protocolo-ceremonia.jpg" alt="Fleurs blanches pour la cérémonie funèbre à Marseille" />
          <figcaption>Les fleurs blanches sont le symbole universel de paix et de recueillement lors des cérémonies funèbres.</figcaption>
        </figure>

        <h2>Types de cérémonie funèbre</h2>
        <p>En France, il existe deux grandes modalités de cérémonie funèbre : la cérémonie religieuse et la cérémonie civile ou laïque. Les deux sont parfaitement valables et peuvent se combiner selon les souhaits de la famille.</p>
        <h3>La cérémonie religieuse</h3>
        <p>La cérémonie religieuse se déroule dans un lieu de culte : église, mosquée, synagogue ou temple, selon la confession du défunt. À Marseille, les principales églises qui accueillent des cérémonies funèbres sont la <strong>Basilique Notre-Dame de la Garde</strong>, l'église Saint-Victor et de nombreuses paroisses dans tous les arrondissements.</p>
        <ul>
          <li>La messe de funérailles catholique dure environ 45 à 60 minutes et comprend des lectures, une musique liturgique et la communion</li>
          <li>Les cérémonies islamiques se déroulent de préférence à la mosquée ou au domicile, avec la prière de la Janaza</li>
          <li>Les cérémonies juives suivent le rite du Levaya, avec la récitation du Kaddish</li>
        </ul>
        <h3>La cérémonie civile ou laïque</h3>
        <p>La cérémonie laïque se déroule généralement dans le salon de recueillement du funérarium ou dans un espace dédié. Sa structure est plus souple et peut être personnalisée avec de la musique, des vidéos, des lectures littéraires et des témoignages de proches.</p>

        <h2>Le déroulement de la cérémonie</h2>
        <ul>
          <li><strong>Accueil des participants :</strong> la famille reçoit les personnes présentes à l'entrée, avec des fleurs et souvent une musique de fond</li>
          <li><strong>Mot de bienvenue :</strong> le maître de cérémonie ou un membre de la famille ouvre la séance</li>
          <li><strong>Lectures et témoignages :</strong> des proches lisent des textes significatifs ou partagent des souvenirs</li>
          <li><strong>Musique :</strong> morceaux choisis par la famille, classiques, populaires ou religieux</li>
          <li><strong>Discours d'hommage ou éloge funèbre</strong></li>
          <li><strong>Moment de recueillement</strong></li>
          <li><strong>Transfert au cimetière ou au crématorium</strong></li>
        </ul>

        <div className="callout">
          <p><strong>Les fleurs dans la cérémonie :</strong> La disposition des fleurs fait partie essentielle du protocole funèbre. Les couronnes sont placées près du cercueil ou à l'entrée de la salle. Les centres floraux sont posés sur le cercueil pendant la cérémonie. Notre atelier coordonne directement avec le funérarium pour garantir une présentation impeccable.</p>
        </div>

        <h2>Le discours d'hommage</h2>
        <p>Le discours d'hommage, aussi appelé éloge funèbre, est l'une des parties les plus émouvantes de la cérémonie. Son objectif est de rappeler la vie du défunt, de souligner ses qualités et de transmettre un message d'amour et de gratitude aux personnes présentes.</p>
        <h3>Conseils pour préparer le discours</h3>
        <ul>
          <li>Commencez par rassembler des souvenirs et anecdotes significatifs : moments partagés, citations célèbres, accomplissements personnels</li>
          <li>Structurez le discours en trois parties : introduction émouvante, développement avec des souvenirs concrets, conclusion apaisante</li>
          <li>La durée idéale se situe entre 5 et 10 minutes</li>
          <li>Répétez le discours à voix haute avant la cérémonie</li>
          <li>N'ayez pas peur d'être ému : l'authenticité est toujours la bienvenue</li>
        </ul>

        <h2>Traditions funéraires en Provence</h2>

        <figure>
          <img src="assets/protocolo-ceremonia-2.jpg" alt="Bougie et fleurs de lavande lors d'une cérémonie funèbre provençale" />
          <figcaption>Les traditions funéraires provençales incluent l'usage de la lavande et de fleurs méditerranéennes de saison.</figcaption>
        </figure>

        <p>La région de Provence possède ses propres traditions funéraires, héritées de siècles d'histoire méditerranéenne. Parmi elles : la <strong>veillée</strong> au domicile familial la nuit précédant l'enterrement, la coutume de déposer des fleurs de lavande et de romarin sur le cercueil, et le partage de pain ou de douceurs entre les participants après la cérémonie.</p>
        <p>À Marseille, il est habituel que le cortège funèbre passe par les lieux les plus significatifs de la vie du défunt avant de se rendre au cimetière ou au crématorium.</p>
      </ArticleLayout>
    </>
  );
}

// ---- Article 4 : Choisir ses fleurs funéraires ----
function ArticleFleurs({ setRoute }) {
  return (
    <>
      <style>{articleStyles}</style>
      <ArticleLayout setRoute={setRoute} kicker="Guide floral" title="Choisir ses fleurs funéraires" subtitle="Couronnes, compositions, bouquets : quel arrangement choisir selon la cérémonie, le lieu et le message à transmettre." img={window.ARTICLE_IMAGES?.fleurs || null} bannerImg="https://images.unsplash.com/photo-1501004318641-b39e6451bec6?w=1600&q=80&auto=format&fit=crop" imgAlt="Fleurs funéraires Marseille - couronnes et compositions" relatedId="fleurs-funeraires-guide">
        <p>Les fleurs funéraires sont bien plus qu'une décoration : elles sont le langage visuel du deuil, une façon d'exprimer l'amour, le respect et la gratitude envers le défunt lorsque les mots ne suffisent pas. Choisir la composition adéquate nécessite de connaître les différentes options et leur signification dans le contexte de la cérémonie.</p>

        <figure>
          <img src="https://images.unsplash.com/photo-1501004318641-b39e6451bec6?w=900&q=80&auto=format&fit=crop" alt="Couronne funéraire de fleurs blanches Marseille" />
          <figcaption>Les couronnes de fleurs blanches sont la composition funéraire la plus demandée à Marseille et en région PACA.</figcaption>
        </figure>

        <h2>La couronne funéraire : le symbole universel</h2>
        <p>La <strong>couronne funéraire</strong> est la composition florale la plus reconnue et la plus utilisée dans les cérémonies funèbres. Sa forme circulaire symbolise l'éternité, le cycle de la vie et l'amour sans fin. Elle est placée généralement près du cercueil pendant la cérémonie, puis transportée au lieu de sépulture.</p>
        <h3>Quand choisir une couronne ?</h3>
        <ul>
          <li>Comme hommage collectif d'un groupe de personnes (famille, collègues, association)</li>
          <li>Pour les cérémonies au funérarium, à l'église ou au crématorium</li>
          <li>Lorsqu'on souhaite une présence visuelle marquante dans la salle de cérémonie</li>
          <li>En signe de respect pour des personnes avec qui les liens n'étaient pas très intimes</li>
        </ul>

        <h2>La composition ou centre funéraire</h2>
        <p>Les <strong>centres et compositions funéraires</strong> sont des arrangements floraux destinés à être posés sur le cercueil pendant la cérémonie. Leur format allongé et horizontal est conçu pour respecter la forme du cercueil et créer une présence florale solennelle et élégante.</p>
        <ul>
          <li>Le <strong>centre sur cercueil</strong> est la composition la plus demandée : fleurs fraîches de saison sur une base végétale</li>
          <li>Le <strong>coussin floral</strong> recouvre entièrement le couvercle du cercueil de fleurs serrées</li>
          <li>La <strong>gerbe couchée</strong> est un bouquet à longues tiges posé en diagonale sur le cercueil</li>
        </ul>

        <div className="callout">
          <p><strong>Livraison directe au funérarium :</strong> Nous coordonnons la livraison de toutes nos compositions directement avec les établissements funéraires de Marseille. Il vous suffit de nous indiquer le nom du funérarium et l'heure de la cérémonie.</p>
        </div>

        <h2>Le bouquet funéraire : le geste personnel</h2>
        <p>Le <strong>bouquet funéraire</strong> est l'option la plus intime et personnelle. Il est offert à la famille en signe d'affection et de soutien, ou déposé sur la tombe lors de l'enterrement. Contrairement à la couronne, le bouquet exprime une relation personnelle et proche avec le défunt.</p>
        <h3>Quand choisir un bouquet ?</h3>
        <ul>
          <li>Pour offrir aux membres directs de la famille comme geste de soutien et de réconfort</li>
          <li>Pour déposer sur la tombe lors de l'inhumation</li>
          <li>Comme accompagnement intime de la part de personnes très proches du défunt</li>
          <li>Pour des enterrements ou cérémonies plus intimistes et familiaux</li>
        </ul>

        <h2>La signification des couleurs</h2>

        <figure>
          <img src="https://images.unsplash.com/photo-1455659817273-f96807779a8a?w=900&q=80&auto=format&fit=crop" alt="Bouquet funéraire couleurs et signification à Marseille" />
          <figcaption>Chaque couleur possède une signification symbolique dans le domaine funèbre : le blanc représente la paix, le mauve la spiritualité.</figcaption>
        </figure>

        <ul>
          <li><strong>Blanc :</strong> pureté, paix, innocence — la couleur la plus universelle du deuil dans la tradition occidentale</li>
          <li><strong>Crème et champagne :</strong> élégance discrète, adaptées à toutes les cérémonies</li>
          <li><strong>Mauve et lavande :</strong> recueillement, spiritualité, lien avec la tradition provençale</li>
          <li><strong>Rose pâle :</strong> tendresse, douceur — particulièrement adapté au décès de personnes jeunes</li>
          <li><strong>Rouge :</strong> amour profond, passion — réservé aux personnes les plus proches</li>
        </ul>

        <h2>Fleurs selon la religion et la culture</h2>
        <p>Dans une ville cosmopolite comme Marseille, il est important de tenir compte des traditions religieuses et culturelles lors du choix des fleurs funéraires. Pour les cérémonies islamiques, on préfère les <strong>fleurs blanches</strong> et on évite les arrangements trop élaborés. Pour les cérémonies juives, les fleurs sont les bienvenues bien que la discrétion soit recommandée. Dans les traditions orientales, le blanc est également la couleur du deuil.</p>
      </ArticleLayout>
    </>
  );
}

// ---- Article 5 : Contrat obsèques et prévoyance ----
function ArticleContrat({ setRoute }) {
  return (
    <>
      <style>{articleStyles}</style>
      <ArticleLayout setRoute={setRoute} kicker="Anticiper" title="Contrat obsèques et prévoyance funéraire" subtitle="Souscrire un contrat de prévoyance : ce que cela couvre, les avantages pour la famille et comment choisir la bonne formule." img={window.ARTICLE_IMAGES?.contrat || null} bannerImg="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1600&q=80&auto=format&fit=crop" imgAlt="Contrat de prévoyance funéraire à Marseille" relatedId="contrat-obseques">
        <p>Le contrat de prévoyance funéraire est l'un des actes les plus responsables qu'une personne puisse accomplir de son vivant. Il permet d'organiser ses propres obsèques à l'avance, en garantissant que ses volontés seront respectées et en épargnant à sa famille une charge administrative et émotionnelle dans un moment déjà très difficile.</p>

        <figure>
          <img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=900&q=80&auto=format&fit=crop" alt="Signature d'un contrat de prévoyance funéraire" />
          <figcaption>Souscrire un contrat de prévoyance funéraire de son vivant est un acte de responsabilité envers sa famille.</figcaption>
        </figure>

        <h2>Qu'est-ce qu'un contrat de prévoyance funéraire ?</h2>
        <p>Un contrat de prévoyance funéraire est un <strong>accord signé de son vivant</strong> avec une entreprise de pompes funèbres, dans lequel on définit en détail les modalités de ses propres obsèques : type de cérémonie, cercueil ou urne, fleurs, musique, lieu de sépulture, etc. Le montant peut être réglé en une seule fois ou par mensualités, et reste bloqué jusqu'au décès.</p>

        <h2>Que couvre un contrat de prévoyance ?</h2>
        <ul>
          <li>Les honoraires de l'entreprise de pompes funèbres</li>
          <li>Le transport du corps et les démarches administratives</li>
          <li>Le cercueil ou l'urne funéraire</li>
          <li>Les fleurs funéraires et la décoration florale de la cérémonie</li>
          <li>La cérémonie religieuse ou civile</li>
          <li>La concession au cimetière ou la case de columbarium</li>
          <li>Les avis de décès et faire-part</li>
        </ul>

        <h2>Avantages du contrat de prévoyance</h2>
        <h3>Pour le titulaire du contrat</h3>
        <ul>
          <li>Garantit que ses volontés seront respectées : type de cérémonie, musique, fleurs, lieu de repos</li>
          <li>Permet de planifier sereinement, sans la pression du moment</li>
          <li>Fixe le prix au moment de la souscription, se protégeant ainsi contre l'inflation</li>
          <li>Procure une tranquillité d'esprit en sachant que tout est organisé</li>
        </ul>
        <h3>Pour la famille</h3>
        <ul>
          <li>Supprime l'incertitude sur les volontés du défunt</li>
          <li>Réduit le stress administratif dans un moment de deuil</li>
          <li>Évite les conflits potentiels entre proches sur les décisions à prendre</li>
          <li>La famille peut se concentrer sur le soutien émotionnel mutuel</li>
        </ul>

        <div className="callout">
          <p><strong>Les fleurs dans le contrat :</strong> De nombreux contrats de prévoyance incluent une enveloppe pour les fleurs funéraires. Vous pouvez spécifier le type de composition souhaité : couronne, centre sur cercueil, bouquets, etc. Notre atelier à Marseille travaille en collaboration avec les principales entreprises de pompes funèbres de la ville.</p>
        </div>

        <h2>Comment choisir le bon contrat ?</h2>

        <figure>
          <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?w=900&q=80&auto=format&fit=crop" alt="Conseil et comparaison de contrats de prévoyance funéraire à Marseille" />
          <figcaption>Comparez au moins trois offres avant de signer un contrat de prévoyance funéraire.</figcaption>
        </figure>

        <p>À Marseille et en région PACA, de nombreuses entreprises proposent des contrats de prévoyance funéraire. Avant de signer, il est recommandé de comparer au moins trois offres en faisant attention aux points suivants :</p>
        <ul>
          <li>La solidité financière de l'entreprise : les fonds doivent être déposés dans un organisme garanti</li>
          <li>La transférabilité du contrat : que se passe-t-il en cas de décès dans une autre ville ou un autre pays ?</li>
          <li>La possibilité de modifier le contrat au fil du temps</li>
          <li>Les conditions de remboursement si la famille souhaite changer d'entreprise</li>
          <li>La clarté du détail des prestations incluses</li>
        </ul>

        <h2>Cadre légal en France</h2>
        <p>En France, les contrats de prévoyance funéraire sont régis par la <strong>loi Sueur de 2004</strong>, qui oblige les entreprises funéraires à déposer les fonds reçus auprès d'organismes financiers habilités (banques ou assureurs). Cette législation protège le consommateur et garantit que l'argent sera disponible le moment venu.</p>
      </ArticleLayout>
    </>
  );
}

// ---- Article 6 : Les cimetières de Marseille ----
function ArticleCimetiere({ setRoute }) {
  return (
    <>
      <style>{articleStyles}</style>
      <ArticleLayout setRoute={setRoute} kicker="Annuaire local" title="Les cimetières de Marseille" subtitle="Horaires, concessions, jardin du souvenir : tout ce que vous devez savoir sur les principaux cimetières de Marseille." img={window.ARTICLE_IMAGES?.cimetiere || null} bannerImg="assets/cimetiere-flores.jpg" imgAlt="Fleurs funéraires déposées dans un cimetière de Marseille" relatedId="cimetiere-marseille">
        <p>Marseille dispose d'un réseau de cimetières municipaux répartis dans toute la ville, gérés par les <strong>Pompes Funèbres Municipales de Marseille</strong>. Connaître leurs caractéristiques, horaires et modalités de concession est fondamental pour prendre les meilleures décisions au moment du deuil.</p>

        <figure>
          <img src="assets/cimetiere-flores.jpg" alt="Fleurs blanches déposées sur un cercueil lors d'une cérémonie funèbre" />
          <figcaption>Les fleurs funéraires accompagnent chaque étape de la cérémonie, du funérarium jusqu'à la sépulture.</figcaption>
        </figure>

        <h2>Le Cimetière de Saint-Pierre : le principal de Marseille</h2>
        <p>Le <strong>Cimetière de Saint-Pierre</strong>, situé dans le 5ème arrondissement, est le plus grand et le plus important de Marseille. Avec plus de 200 000 sépultures et une superficie de plus de 60 hectares, il est l'un des plus grands cimetières de France. Inauguré en 1855, il abrite les mausolées de nombreuses familles marseillaises historiques.</p>
        <h3>Services disponibles à Saint-Pierre</h3>
        <ul>
          <li>Inhumation en pleine terre, en chapelle ou en caveau</li>
          <li>Columbarium pour urnes funéraires</li>
          <li>Jardin du souvenir pour la dispersion des cendres</li>
          <li>Service d'entretien des tombes</li>
          <li>Crématorium municipal adjacent</li>
        </ul>

        <h2>Types de concessions funéraires à Marseille</h2>
        <p>Une concession funéraire est le droit d'utiliser une parcelle du cimetière pour l'inhumation. À Marseille, la mairie propose différentes modalités :</p>
        <ul>
          <li><strong>Concession temporaire (15 ans) :</strong> la plus économique, renouvelable par périodes successives</li>
          <li><strong>Concession longue durée (30 ans) :</strong> équilibre entre coût et pérennité</li>
          <li><strong>Concession perpétuelle :</strong> la plus chère, mais garantit la pérennité indéfinie de la sépulture</li>
        </ul>
        <p>Il est fondamental de renouveler la concession avant son échéance. En cas de non-renouvellement, la mairie peut récupérer la parcelle et transférer les restes à l'ossuaire.</p>

        <div className="callout">
          <p><strong>Livraison de fleurs dans les cimetières de Marseille :</strong> Notre service de livraison couvre tous les cimetières de Marseille et des communes environnantes. Nous pouvons livrer directement sur la sépulture le jour de l'inhumation ou pour toute date commémorative.</p>
        </div>

        <h2>Le Crématorium Saint-Pierre</h2>
        <p>Le <strong>Crématorium Saint-Pierre</strong>, adjacent au cimetière du même nom, est le seul crématorium municipal de Marseille. Géré par les Pompes Funèbres Municipales, il dispose de deux salles de cérémonie pouvant accueillir respectivement 80 et 150 personnes, ainsi que d'un jardin du souvenir pour la dispersion des cendres.</p>
        <h3>Horaires du Crématorium Saint-Pierre</h3>
        <ul>
          <li>Lundi au vendredi : 8h00 – 19h00</li>
          <li>Samedi : 8h00 – 17h00</li>
          <li>Dimanche et jours fériés : service de garde</li>
        </ul>

        <h2>Les autres cimetières de Marseille</h2>

        <figure>
          <img src="assets/cimetiere-cementerio.jpg" alt="Vue d'un cimetière à Marseille" />
          <figcaption>Marseille compte plusieurs cimetières municipaux répartis dans les différents arrondissements de la ville.</figcaption>
        </figure>

        <ul>
          <li><strong>Cimetière de Saint-Charles</strong> (1er arr.) : le plus ancien de la ville, avec des sépultures historiques</li>
          <li><strong>Cimetière de la Capelette</strong> (10ème arr.) : cimetière de taille moyenne desservant les arrondissements sud</li>
          <li><strong>Cimetière de Saint-Jérome</strong> (13ème arr.) : cimetière des quartiers nord de la ville</li>
          <li><strong>Cimetière des Aygalades</strong> (15ème arr.) : cimetière des quartiers nord</li>
        </ul>

        <h2>L'entretien des tombes</h2>
        <p>L'entretien des tombes est la responsabilité de la famille. À Marseille, les Pompes Funèbres Municipales proposent un <strong>service d'entretien</strong> comprenant le nettoyage de la stèle, le renouvellement des fleurs et l'enlèvement des fleurs fanées. Pour les familles ne pouvant se déplacer fréquemment, ce service est particulièrement utile.</p>
        <p>Vous pouvez également confier l'entretien floral de la tombe à notre atelier : nous préparons des bouquets de fleurs fraîches pour toute date commémorative (Toussaint, anniversaire du décès, anniversaire de naissance) et les livrons directement au cimetière.</p>
      </ArticleLayout>
    </>
  );
}

const ARTICLE_COMPONENTS = {
  'article-demarches-apres-deces': ArticleDemarches,
  'article-choisir-obseques': ArticleObseques,
  'article-protocole-ceremonie': ArticleProtocole,
  'article-fleurs-funeraires-guide': ArticleFleurs,
  'article-contrat-obseques': ArticleContrat,
  'article-cimetiere-marseille': ArticleCimetiere,
};

window.ARTICLE_IMAGES = window.ARTICLE_IMAGES || {};

Object.assign(window, { ARTICLE_COMPONENTS });
