/* ============================================================
   LE MÉMORIAL — Au Revoir Compagnon
   Maquettes Phase 1 — deviendra css/memorial.less
   Palette site : terracotta #d65c47 / vert sapin #416150
                  crème #f7f3f0 / beige #f2e8de / sable #f3ede8
   Typo émotionnelle : PlayfairDisplay (self-hosted /fonts)
   ============================================================ */

@font-face {
    font-family: "PlayfairDisplay";
    src: url("/fonts/PlayfairDisplay-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PlayfairDisplay";
    src: url("/fonts/PlayfairDisplay-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --mem-terracotta: #d65c47;
    --mem-terracotta-deep: #b34a37;
    --mem-rose: #bf6252;
    --mem-green: #416150;
    --mem-green-deep: #2e4639;
    --mem-cream: #f7f3f0;
    --mem-beige: #f2e8de;
    --mem-sand: #f3ede8;
    --mem-night: #1f2e29;
    --mem-night-deep: #141f1b;
    --mem-gold: #e6b365;
    --mem-gold-soft: #f6dfae;
    --mem-ink: #242424;
    --mem-ink-soft: #77706b;
    --mem-line: #e7ddd3;
    --mem-serif: "PlayfairDisplay", "PlayfairFallback", Georgia, "Times New Roman", serif;
    --mem-sans: "Poppins", sans-serif;
    --mem-shadow: 0 12px 34px rgba(63, 45, 35, 0.12);
    --mem-shadow-soft: 0 6px 18px rgba(63, 45, 35, 0.08);
    --mem-radius: 18px;
}

/* ---------- helpers communs ---------- */

.mem-serif { font-family: var(--mem-serif); }

.mem-eyebrow {
    font-family: var(--mem-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mem-rose);
    margin-bottom: 14px;
}

.mem-title {
    font-family: var(--mem-serif);
    font-weight: 400;
    color: var(--mem-ink);
    font-size: 40px;
    line-height: 1.15;
    margin-bottom: 16px;
}

.mem-title em {
    font-style: italic;
    color: var(--mem-terracotta);
}

.mem-sub {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
    color: var(--mem-ink-soft);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.mem-center { text-align: center; }

.btn-mem {
    font-family: var(--mem-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-mem:hover { transform: translateY(-2px); }
.btn-mem:active { transform: translateY(0); }

.btn-mem-terracotta {
    background: var(--mem-terracotta);
    color: #fff;
    box-shadow: 0 10px 24px rgba(214, 92, 71, 0.35);
}
.btn-mem-terracotta:hover { background: var(--mem-terracotta-deep); color: #fff; }

.btn-mem-ghost {
    background: transparent;
    color: var(--mem-green);
    box-shadow: inset 0 0 0 2px rgba(65, 97, 80, 0.35);
}
.btn-mem-ghost:hover { box-shadow: inset 0 0 0 2px var(--mem-green); }

.btn-mem-white {
    background: #fff;
    color: var(--mem-green);
    box-shadow: var(--mem-shadow-soft);
}

/* petite patte décorative entre les dates */
.mem-patte {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mem-gold);
    margin: 0 12px;
    vertical-align: middle;
    position: relative;
}

/* ============================================================
   BOUGIE (CSS pur) — même anatomie que la bougie de l'image de partage :
   cire dégradée + ombrage latéral, rebord fondu, coulure, mèche,
   flamme en 3 couches et halo lumineux.
   ============================================================ */

.bougie {
    position: relative;
    display: inline-block;
    width: 30px;
}

/* Corps de cire : dégradé vertical + ombrage sur les flancs + reflet central. */
.bougie-cire {
    display: block;
    position: relative;
    width: 30px;
    height: 46px;
    border-radius: 3px 3px 9px 9px;
    background:
        linear-gradient(90deg,
            rgba(120, 96, 60, 0.26) 0%,
            rgba(255, 255, 255, 0.16) 26%,
            rgba(255, 255, 255, 0.34) 42%,
            rgba(255, 255, 255, 0.10) 62%,
            rgba(120, 96, 60, 0.30) 100%),
        linear-gradient(180deg, #fdf8ec 0%, #f6ecd8 52%, #e8d8ba 100%);
    box-shadow:
        inset 0 -7px 12px rgba(174, 140, 84, 0.30),
        0 6px 14px rgba(40, 28, 14, 0.20);
}
/* Rebord fondu (ellipse claire) au sommet de la cire. */
.bougie-cire:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, #fffdf6 0%, #f7edd6 55%, #e6d3b0 100%);
}
/* Coulure de cire sur le flanc gauche. */
.bougie-cire:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 6px;
    height: 20px;
    border-radius: 60% 60% 50% 50%;
    background: linear-gradient(180deg, rgba(255, 253, 246, 0.95) 0%, rgba(255, 253, 246, 0) 100%);
}

.bougie-meche {
    position: absolute;
    top: -9px;
    left: 50%;
    width: 2px;
    height: 9px;
    background: linear-gradient(180deg, #2e2013 0%, #6b5136 100%);
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 2;
}

/* Flamme : couche externe orangée, cœur ambré, pointe blanche. */
.bougie-flamme {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 17px;
    height: 34px;
    margin-bottom: 4px;
    background:
        radial-gradient(ellipse at 50% 74%, #fff8e2 0%, #ffd98a 26%, #f6a04c 55%, #e9762a 76%, rgba(233, 118, 42, 0) 100%);
    border-radius: 50% 50% 46% 54% / 68% 68% 32% 32%;
    transform-origin: 50% 92%;
    transform: translateX(-50%);
    animation: mem-vaciller 2.6s ease-in-out infinite;
    will-change: transform;
    z-index: 3;
}
/* Cœur clair de la flamme. */
.bougie-flamme:before {
    content: "";
    position: absolute;
    inset: 38% 27% 6% 27%;
    background: radial-gradient(ellipse at 50% 78%, #fff 0%, #fff6dc 46%, rgba(255, 246, 220, 0) 100%);
    border-radius: inherit;
}
/* Base bleutée, juste au-dessus de la mèche. */
.bougie-flamme:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 7px;
    height: 8px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 60%, rgba(140, 190, 235, 0.75) 0%, rgba(140, 190, 235, 0) 70%);
    border-radius: 50%;
}

/* Halo lumineux projeté par la flamme. */
.bougie-halo {
    position: absolute;
    /* Centré sur la flamme (et non au-dessus) : sinon les halos fusionnent en une tache. */
    bottom: calc(100% - 24px);
    left: 50%;
    width: 92px;
    height: 92px;
    transform: translateX(-50%);
    background: radial-gradient(circle,
        rgba(255, 205, 125, 0.34) 0%,
        rgba(255, 188, 108, 0.13) 38%,
        rgba(255, 180, 100, 0) 72%);
    border-radius: 50%;
    animation: mem-halo 2.6s ease-in-out infinite;
    will-change: transform, opacity;
    pointer-events: none;
    z-index: 1;
}

@keyframes mem-vaciller {
    0%   { transform: translateX(-50%) rotate(-1.6deg) scale(1, 1); }
    18%  { transform: translateX(-51%) rotate(1.8deg) scale(0.97, 1.06); }
    37%  { transform: translateX(-49.5%) rotate(-1.1deg) scale(1.03, 0.96); }
    58%  { transform: translateX(-50.5%) rotate(1.3deg) scale(0.98, 1.04); }
    79%  { transform: translateX(-50%) rotate(-0.7deg) scale(1.02, 0.98); }
    100% { transform: translateX(-50%) rotate(-1.6deg) scale(1, 1); }
}
@keyframes mem-halo {
    0%, 100% { opacity: 0.78; transform: translateX(-50%) scale(0.97); }
    42%      { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* Accessibilité : on fige les flammes si l'utilisateur limite les animations. */
@media (prefers-reduced-motion: reduce) {
    .bougie-flamme, .bougie-halo, .mini-flamme { animation: none !important; }
}

/* rangée de bougies décorative (hauteurs variées = plus naturel) */
.bougies-rangee {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 30px;
    padding-top: 46px; /* réserve pour les flammes et halos qui dépassent */
}
.bougies-rangee .bougie:nth-child(1) .bougie-cire { height: 36px; }
.bougies-rangee .bougie:nth-child(2) .bougie-cire { height: 58px; }
.bougies-rangee .bougie:nth-child(3) .bougie-cire { height: 45px; }
.bougies-rangee .bougie:nth-child(1) .bougie-flamme,
.bougies-rangee .bougie:nth-child(1) .bougie-halo { animation-delay: -0.9s; }
.bougies-rangee .bougie:nth-child(3) .bougie-flamme,
.bougies-rangee .bougie:nth-child(3) .bougie-halo { animation-delay: -1.7s; }

/* ============================================================
   GALERIE  /memorial/
   ============================================================ */

.mem-hero {
    background:
        radial-gradient(720px 300px at 12% -10%, rgba(230, 179, 101, 0.16) 0%, rgba(230, 179, 101, 0) 60%),
        radial-gradient(680px 320px at 88% 0%, rgba(214, 92, 71, 0.10) 0%, rgba(214, 92, 71, 0) 62%),
        linear-gradient(180deg, var(--mem-sand) 0%, var(--mem-cream) 100%);
    /* Pas de padding haut : le fil d'ariane apporte déjà ses 40px, comme sur le reste du site. */
    padding: 0 0 40px 0;
    position: relative;
    overflow: hidden;
}
.mem-hero .mem-title { font-size: 48px; }

.mem-hero-etoiles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 12% 30%, rgba(214, 92, 71, 0.35) 40%, transparent 60%),
        radial-gradient(2px 2px at 88% 22%, rgba(230, 179, 101, 0.5) 40%, transparent 60%),
        radial-gradient(1.6px 1.6px at 74% 64%, rgba(65, 97, 80, 0.35) 40%, transparent 60%),
        radial-gradient(1.6px 1.6px at 26% 74%, rgba(230, 179, 101, 0.45) 40%, transparent 60%),
        radial-gradient(2px 2px at 46% 14%, rgba(191, 98, 82, 0.3) 40%, transparent 60%);
}

.mem-stats {
    font-family: var(--mem-sans);
    font-weight: 300;
    color: var(--mem-ink-soft);
    font-size: 14px;
    margin-top: 18px;
}
.mem-stats strong { color: var(--mem-rose); font-weight: 600; }

/* recherche */
.mem-recherche {
    max-width: 560px;
    margin: 34px auto 0 auto;
    position: relative;
}
.mem-recherche input {
    width: 100%;
    border: 1px solid var(--mem-line);
    background: #fff;
    border-radius: 999px;
    padding: 16px 56px 16px 26px;
    font-family: var(--mem-sans);
    font-size: 16px;
    color: var(--mem-ink);
    box-shadow: var(--mem-shadow-soft);
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.mem-recherche input:focus {
    border-color: rgba(214, 92, 71, 0.5);
    box-shadow: 0 6px 22px rgba(214, 92, 71, 0.16);
}
.mem-recherche input::placeholder { color: #b4aca4; }
.mem-recherche button {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    width: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--mem-terracotta);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mem-recherche button svg { width: 18px; height: 18px; }

/* filtres espèces */
.mem-filtres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}
.mem-chip {
    font-family: var(--mem-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--mem-green);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(65, 97, 80, 0.18);
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
    transition: all 0.16s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.mem-chip:hover { border-color: var(--mem-green); background: #fff; }
.mem-chip.actif {
    background: var(--mem-green);
    border-color: var(--mem-green);
    color: #fff;
}

/* grille de cartes */
.mem-galerie {
    padding: 0 0 30px 0;
}
.mem-grille {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 26px;
}

.mem-carte {
    background: #fff;
    border-radius: var(--mem-radius);
    box-shadow: var(--mem-shadow-soft);
    padding: 14px 14px 22px 14px;
    text-align: center;
    position: relative;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.mem-carte:hover {
    transform: translateY(-6px);
    box-shadow: var(--mem-shadow);
}
.mem-carte-lien {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

/* photo en arche — signature visuelle du Mémorial */
.mem-arche {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
    border-radius: 999px 999px 14px 14px;
    background: var(--mem-beige);
}
.mem-carte .mem-arche {
    box-shadow: inset 0 0 0 1px rgba(63, 45, 35, 0.06);
}

.mem-carte-nom {
    font-family: var(--mem-serif);
    font-size: 24px;
    color: var(--mem-ink);
    margin: 16px 0 2px 0;
    line-height: 1.2;
}
.mem-carte-dates {
    font-family: var(--mem-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--mem-ink-soft);
    margin-bottom: 10px;
}
.mem-carte-epitaphe {
    font-family: var(--mem-serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mem-rose);
    margin: 0 6px 14px 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.mem-carte-bougies {
    font-family: var(--mem-sans);
    font-size: 13px;
    color: var(--mem-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mem-carte-bougies .mini-flamme {
    width: 9px;
    height: 14px;
    background: radial-gradient(circle at 50% 75%, #fff3cf 0%, #ffce7a 45%, #f0913f 80%, rgba(240, 145, 63, 0) 100%);
    border-radius: 50% 50% 46% 54% / 62% 62% 38% 38%;
    display: inline-block;
    animation: mem-vaciller 2.1s ease-in-out infinite;
    transform-origin: 50% 90%;
    will-change: transform;
}
.mem-carte:nth-child(2n) .mini-flamme { animation-delay: -0.8s; }
.mem-carte:nth-child(3n) .mini-flamme { animation-delay: -1.4s; }

/* carte CTA au fil de la grille */
.mem-carte-cta {
    background: linear-gradient(160deg, var(--mem-green) 0%, var(--mem-green-deep) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 30px 22px;
    color: #fff;
}
.mem-carte-cta p {
    font-family: var(--mem-serif);
    font-size: 21px;
    line-height: 1.35;
    color: #fff;
    margin: 0;
}
.mem-carte-cta .bougie-cire { height: 58px !important; }
.mem-carte-cta .btn-mem { position: relative; z-index: 3; }

/* bandeau CTA bas de galerie */
.mem-bandeau {
    background:
        radial-gradient(560px 260px at 85% 20%, rgba(230, 179, 101, 0.18) 0%, rgba(230, 179, 101, 0) 60%),
        linear-gradient(160deg, var(--mem-green) 0%, var(--mem-green-deep) 100%);
    color: #fff;
    padding: 70px 0 80px 0;
    position: relative;
    overflow: hidden;
}
.mem-bandeau .mem-title { color: #fff; font-size: 34px; }
.mem-bandeau .mem-sub { color: rgba(255, 255, 255, 0.82); }
.mem-bandeau-int {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.mem-bandeau-txt { max-width: 540px; }
.mem-bandeau-txt .mem-sub { margin-left: 0; }
.mem-bandeau .mem-eyebrow { color: var(--mem-gold-soft); }

/* ============================================================
   PAGE HOMMAGE — VARIANTE A « Jardin des souvenirs »
   ============================================================ */

.hommage-a-hero {
    background:
        radial-gradient(700px 340px at 50% -10%, rgba(230, 179, 101, 0.20) 0%, rgba(230, 179, 101, 0) 65%),
        linear-gradient(180deg, var(--mem-sand) 0%, var(--mem-cream) 100%);
    padding: 30px 0 40px 0;
    position: relative;
    overflow: hidden;
}

.hommage-portrait {
    width: min(340px, 78vw);
    margin: 8px auto 0 auto;
    position: relative;
}
.hommage-portrait .mem-arche {
    aspect-ratio: 4 / 4.9;
    border: 10px solid #fff;
    box-shadow: var(--mem-shadow);
}
/* rameau décoratif */
.hommage-rameau {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
    color: var(--mem-green);
    opacity: 0.85;
}

.hommage-nom {
    font-family: var(--mem-serif);
    font-weight: 400;
    font-size: 52px;
    line-height: 1.1;
    color: var(--mem-ink);
    margin: 30px 0 6px 0;
}
.hommage-dates {
    font-family: var(--mem-sans);
    font-weight: 500;
    letter-spacing: 0.2em;
    font-size: 15px;
    color: var(--mem-ink-soft);
    margin-bottom: 6px;
}
.hommage-race {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 14px;
    color: var(--mem-ink-soft);
    margin-bottom: 22px;
}
.hommage-epitaphe {
    font-family: var(--mem-serif);
    font-style: italic;
    font-size: 24px;
    line-height: 1.5;
    color: var(--mem-rose);
    max-width: 560px;
    margin: 0 auto;
}

/* texte d'hommage */
.hommage-texte {
    max-width: 660px;
    margin: 0 auto;
    padding: 55px 0 30px 0;
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.85;
    color: #4a443f;
}
.hommage-texte p { margin-bottom: 22px; }
.hommage-texte p:first-child:first-letter {
    font-family: var(--mem-serif);
    font-size: 52px;
    line-height: 0.9;
    float: left;
    margin: 6px 12px 0 0;
    color: var(--mem-terracotta);
}
.hommage-signature {
    font-family: var(--mem-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--mem-ink-soft);
    text-align: right;
}

/* section bougies (fond beige entre deux vagues) */
.hommage-bougies {
    background: var(--mem-beige);
    padding: 60px 0 74px 0;
    text-align: center;
    position: relative;
}
.hommage-bougies .mem-title { font-size: 30px; }
.bougies-compteur {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 17px;
    color: var(--mem-ink-soft);
    margin: 26px 0 26px 0;
}
.bougies-compteur strong {
    font-family: var(--mem-serif);
    font-weight: 400;
    font-size: 34px;
    color: var(--mem-terracotta);
    display: block;
    line-height: 1.1;
}
.bougies-noms {
    font-family: var(--mem-sans);
    font-size: 13px;
    color: var(--mem-ink-soft);
    margin-top: 18px;
}
.bougies-noms span { color: var(--mem-rose); font-weight: 500; }

/* burst à l'allumage */
@keyframes mem-burst {
    0%   { transform: scale(0.4); opacity: 0; }
    45%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.bougie-allumee { animation: mem-burst 0.5s ease-out; }

/* mur de condoléances */
.hommage-condoleances { padding: 58px 0 40px 0; }
.condoleances-liste {
    list-style: none;
    padding: 0;
    margin: 34px 0 0 0;
    display: grid;
    gap: 18px;
}
.condoleance {
    background: #fff;
    border-radius: var(--mem-radius);
    box-shadow: var(--mem-shadow-soft);
    padding: 24px 28px 20px 28px;
    position: relative;
}
.condoleance:before {
    content: "\201C";
    font-family: var(--mem-serif);
    font-size: 54px;
    line-height: 1;
    color: rgba(214, 92, 71, 0.25);
    position: absolute;
    top: 12px;
    left: 18px;
}
.condoleance-txt {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 15.5px;
    line-height: 1.7;
    color: #4a443f;
    margin: 0 0 12px 26px;
}
.condoleance-meta {
    font-family: var(--mem-sans);
    font-size: 13px;
    color: var(--mem-ink-soft);
    margin: 0 0 0 26px;
}
.condoleance-meta strong { color: var(--mem-rose); font-weight: 600; }

/* formulaire message */
.condoleance-form {
    background: #fff;
    border-radius: var(--mem-radius);
    box-shadow: var(--mem-shadow-soft);
    border: 1px dashed rgba(191, 98, 82, 0.35);
    padding: 28px;
    margin-top: 26px;
}
.condoleance-form h3 {
    font-family: var(--mem-serif);
    font-weight: 400;
    font-size: 22px;
    color: var(--mem-ink);
    margin-bottom: 16px;
}

.mem-champ { margin-bottom: 16px; }
.mem-champ label {
    display: block;
    font-family: var(--mem-sans);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--mem-ink);
    margin-bottom: 7px;
}
.mem-champ label small {
    font-weight: 300;
    color: var(--mem-ink-soft);
}
.mem-champ input[type="text"],
.mem-champ input[type="date"],
.mem-champ select,
.mem-champ textarea {
    width: 100%;
    border: 1px solid var(--mem-line);
    background: var(--mem-cream);
    border-radius: 12px;
    padding: 13px 16px;
    font-family: var(--mem-sans);
    font-size: 15px;
    color: var(--mem-ink);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mem-champ input:focus,
.mem-champ select:focus,
.mem-champ textarea:focus {
    border-color: rgba(214, 92, 71, 0.55);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(214, 92, 71, 0.10);
}
.mem-champ textarea { min-height: 110px; resize: vertical; }
.mem-aide {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 12.5px;
    color: var(--mem-ink-soft);
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* partage */
.hommage-partage {
    padding: 26px 0 70px 0;
    text-align: center;
}
.partage-liste {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.partage-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--mem-shadow-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mem-green);
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.16s ease, color 0.16s ease;
}
.partage-btn:hover { transform: translateY(-3px); color: var(--mem-terracotta); }
.partage-btn svg { width: 20px; height: 20px; }
.partage-note {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 13px;
    color: var(--mem-ink-soft);
    margin-top: 14px;
}

/* ============================================================
   PAGE HOMMAGE — VARIANTE B « Veillée étoilée »
   ============================================================ */

.hommage-b-hero {
    /* Ciel étoilé photographique ; les dégradés restent dessous en repli. */
    background-color: var(--mem-night-deep);
    /* La photo de ciel (1731x909) est large et peu haute : en « cover » sur un hero très haut,
       elle serait agrandie ~3x en HiDPI et paraîtrait floue. On la cale donc sur la LARGEUR
       (aucun agrandissement vertical), ancrée en bas là où se trouve sa lueur, et on fond
       son bord supérieur dans le dégradé nocturne. Les étoiles nettes viennent du CSS par-dessus. */
    background-image:
        radial-gradient(900px 460px at 50% 118%, rgba(230, 179, 101, 0.18) 0%, rgba(230, 179, 101, 0) 60%),
        url("/assets/memorial/ciel-nuit-900.jpg");
    /* Fond uni EXACTEMENT de la couleur vers laquelle le haut de l'image a été fondu
       (#141f1b) : la jonction est alors invisible quelle que soit la hauteur du hero. */
    background-size: auto, 100% auto;
    background-position: center, center bottom;
    background-repeat: no-repeat;
    color: #fff;
    padding: 66px 0 86px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* ciel étoilé en 3 couches */
.hommage-b-hero .etoiles,
.hommage-b-hero .etoiles-2,
.hommage-b-hero .etoiles-3 {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hommage-b-hero .etoiles {
    background-image:
        radial-gradient(1.5px 1.5px at 8% 22%, rgba(255, 255, 255, 0.9) 45%, transparent 60%),
        radial-gradient(1px 1px at 22% 64%, rgba(255, 255, 255, 0.6) 45%, transparent 60%),
        radial-gradient(1.5px 1.5px at 37% 12%, rgba(255, 244, 214, 0.9) 45%, transparent 60%),
        radial-gradient(1px 1px at 52% 38%, rgba(255, 255, 255, 0.55) 45%, transparent 60%),
        radial-gradient(1.7px 1.7px at 68% 8%, rgba(255, 244, 214, 0.95) 45%, transparent 60%),
        radial-gradient(1px 1px at 81% 46%, rgba(255, 255, 255, 0.6) 45%, transparent 60%),
        radial-gradient(1.5px 1.5px at 93% 18%, rgba(255, 255, 255, 0.85) 45%, transparent 60%),
        radial-gradient(1px 1px at 14% 86%, rgba(255, 255, 255, 0.45) 45%, transparent 60%),
        radial-gradient(1.4px 1.4px at 88% 78%, rgba(255, 244, 214, 0.7) 45%, transparent 60%);
    animation: mem-scintiller 4.6s ease-in-out infinite;
}
.hommage-b-hero .etoiles-2 {
    background-image:
        radial-gradient(1px 1px at 28% 30%, rgba(255, 255, 255, 0.5) 45%, transparent 60%),
        radial-gradient(1.3px 1.3px at 45% 74%, rgba(255, 244, 214, 0.65) 45%, transparent 60%),
        radial-gradient(1px 1px at 62% 56%, rgba(255, 255, 255, 0.5) 45%, transparent 60%),
        radial-gradient(1.2px 1.2px at 76% 28%, rgba(255, 255, 255, 0.7) 45%, transparent 60%),
        radial-gradient(1px 1px at 5% 52%, rgba(255, 255, 255, 0.4) 45%, transparent 60%),
        radial-gradient(1.2px 1.2px at 95% 60%, rgba(255, 244, 214, 0.55) 45%, transparent 60%);
    animation: mem-scintiller 4.6s ease-in-out -2.3s infinite;
}
@keyframes mem-scintiller {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* portrait auréolé */
.hommage-b-portrait {
    position: relative;
    width: min(300px, 70vw);
    margin: 6px auto 0 auto;
    z-index: 2;
}
.hommage-b-portrait img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid rgba(246, 223, 174, 0.9);
    box-shadow:
        0 0 0 1px rgba(246, 223, 174, 0.35),
        0 0 42px rgba(230, 179, 101, 0.5),
        0 0 110px rgba(230, 179, 101, 0.28),
        0 22px 44px rgba(0, 0, 0, 0.45);
}
.hommage-b-portrait:after {
    content: "";
    position: absolute;
    inset: -26px;
    border-radius: 50%;
    border: 1px solid rgba(246, 223, 174, 0.28);
    pointer-events: none;
}

.hommage-b-hero .hommage-nom {
    color: #fff;
    font-style: italic;
    font-size: 54px;
    margin-top: 36px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.hommage-b-hero .hommage-dates { color: var(--mem-gold-soft); }
.hommage-b-hero .hommage-race { color: rgba(255, 255, 255, 0.62); }
.hommage-b-hero .hommage-epitaphe { color: rgba(255, 255, 255, 0.9); }

/* bougies dans le hero nocturne */
.hommage-b-bougies {
    margin-top: 44px;
    position: relative;
    z-index: 2;
}
.hommage-b-bougies .bougies-compteur { color: rgba(255, 255, 255, 0.78); }
.hommage-b-bougies .bougies-compteur strong { color: var(--mem-gold-soft); }
.hommage-b-bougies .bougies-noms { color: rgba(255, 255, 255, 0.55); }
.hommage-b-bougies .bougies-noms span { color: var(--mem-gold-soft); }
.btn-bougie-nuit {
    background: linear-gradient(180deg, #f2c079 0%, var(--mem-gold) 100%);
    color: #3c2c14;
    box-shadow: 0 12px 30px rgba(230, 179, 101, 0.35);
}
.btn-bougie-nuit:hover { background: linear-gradient(180deg, #f6cd90 0%, #edbc72 100%); color: #3c2c14; }

/* vague de transition nuit -> jour */
.hommage-b-vague {
    height: 40px;
    background-image: url(/assets/img/sep-white.svg);
    background-size: cover;
    background-position: top center;
    position: relative;
    margin-top: -39px;
    z-index: 3;
}

/* ============================================================
   CRÉATION — étapes
   ============================================================ */

.mem-etapes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 10px 0 40px 0;
    font-family: var(--mem-sans);
}
.mem-etape {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mem-ink-soft);
    font-size: 14px;
    font-weight: 500;
}
.mem-etape-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--mem-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}
.mem-etape.actif { color: var(--mem-ink); }
.mem-etape.actif .mem-etape-num {
    background: var(--mem-terracotta);
    color: #fff;
    box-shadow: 0 6px 16px rgba(214, 92, 71, 0.35);
}
.mem-etape.fait .mem-etape-num {
    background: var(--mem-green);
    color: #fff;
    box-shadow: none;
}
.mem-etape-sep {
    width: 54px;
    height: 2px;
    background: var(--mem-line);
    margin: 0 14px;
}

/* choix de l'animal */
.choix-grille {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 22px;
}
.choix-carte {
    background: #fff;
    border-radius: var(--mem-radius);
    box-shadow: var(--mem-shadow-soft);
    border: 2px solid transparent;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.choix-carte:hover { transform: translateY(-4px); box-shadow: var(--mem-shadow); }
.choix-carte.selection { border-color: var(--mem-terracotta); }
.choix-carte.selection:after {
    content: "✓";
    position: absolute;
    top: -11px;
    right: -11px;
    width: 30px;
    height: 30px;
    background: var(--mem-terracotta);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(214, 92, 71, 0.4);
}
.choix-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 14px;
    background: var(--mem-beige);
}
.choix-nom {
    font-family: var(--mem-serif);
    font-size: 21px;
    margin: 12px 0 3px 0;
    color: var(--mem-ink);
}
.choix-detail {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 13px;
    color: var(--mem-ink-soft);
    margin-bottom: 10px;
}
.badge-woopets {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;   /* un badge sur deux lignes casse l'alignement des cartes */
    font-family: var(--mem-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--mem-green);
    background: rgba(65, 97, 80, 0.10);
    border-radius: 999px;
    padding: 4px 12px;
}
.badge-woopets:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mem-green);
}
.badge-souvenir {
    color: #8a6d3b;
    background: rgba(230, 179, 101, 0.18);
}
.badge-souvenir:before { background: var(--mem-gold); }

.choix-carte-manuel {
    border: 2px dashed rgba(191, 98, 82, 0.4);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 280px;
}
.choix-carte-manuel:hover { border-color: var(--mem-terracotta); background: #fff; }
.choix-plus {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--mem-beige);
    color: var(--mem-terracotta);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.choix-carte-manuel .choix-nom { font-size: 18px; margin: 0; }
.choix-carte-manuel .choix-detail { margin: 0; }

.sync-note {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 13px;
    color: var(--mem-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}
.sync-note a { color: var(--mem-green); font-weight: 500; }
.sync-pastille {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf7d;
    box-shadow: 0 0 0 4px rgba(76, 175, 125, 0.18);
}

/* formulaire de création (étape 2) */
.creation-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 36px;
    align-items: start;
}
.creation-apercu {
    position: sticky;
    top: 24px;
    background: #fff;
    border-radius: var(--mem-radius);
    box-shadow: var(--mem-shadow-soft);
    padding: 14px 14px 20px 14px;
    text-align: center;
}
.creation-apercu .mem-arche { aspect-ratio: 4 / 4.6; }
.creation-apercu-nom {
    font-family: var(--mem-serif);
    font-size: 24px;
    margin: 14px 0 2px 0;
}
.creation-apercu-note {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 12px;
    color: var(--mem-ink-soft);
}
.creation-photo-actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mini-btn {
    font-family: var(--mem-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mem-green);
    background: rgba(65, 97, 80, 0.08);
    border: 0;
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    text-decoration: none;
}
.mini-btn:hover { background: rgba(65, 97, 80, 0.16); }

.creation-form {
    background: #fff;
    border-radius: var(--mem-radius);
    box-shadow: var(--mem-shadow-soft);
    padding: 30px;
}
.creation-form h2 {
    font-family: var(--mem-serif);
    font-weight: 400;
    font-size: 26px;
    margin-bottom: 6px;
}
.creation-form .form-intro {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 14.5px;
    color: var(--mem-ink-soft);
    margin-bottom: 26px;
}
.champ-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mem-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--mem-cream);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 22px 0;
}
.mem-consent input { margin-top: 3px; accent-color: var(--mem-terracotta); }
.mem-consent label {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 13.5px;
    line-height: 1.55;
    color: #4a443f;
}
.creation-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}
.lien-discret {
    font-family: var(--mem-sans);
    font-size: 14px;
    color: var(--mem-ink-soft);
    text-decoration: none;
}
.lien-discret:hover { color: var(--mem-ink); text-decoration: underline; }

.note-moderation {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 12.5px;
    color: var(--mem-ink-soft);
    text-align: right;
    margin-top: 10px;
}

/* ============================================================
   MES HOMMAGES (espace membre)
   ============================================================ */

.compte-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.compte-bonjour {
    font-family: var(--mem-serif);
    font-size: 34px;
    margin-bottom: 4px;
}
.compte-sous {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 14px;
    color: var(--mem-ink-soft);
}
.compte-section-titre {
    font-family: var(--mem-serif);
    font-weight: 400;
    font-size: 24px;
    margin: 40px 0 6px 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.compte-section-titre small {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 13px;
    color: var(--mem-ink-soft);
}

.animaux-liste {
    list-style: none;
    padding: 0;
    margin: 18px 0 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.animal-ligne {
    background: #fff;
    border-radius: var(--mem-radius);
    box-shadow: var(--mem-shadow-soft);
    padding: 14px;
    display: flex;
    gap: 16px;
    align-items: center;
}
.animal-ligne img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 14px;
    background: var(--mem-beige);
}
.animal-infos { flex: 1; min-width: 0; }
.animal-nom {
    font-family: var(--mem-serif);
    font-size: 20px;
    margin: 0 0 2px 0;
}
.animal-detail {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 12.5px;
    color: var(--mem-ink-soft);
    margin: 0 0 7px 0;
}

.hommages-table {
    list-style: none;
    padding: 0;
    margin: 18px 0 0 0;
    display: grid;
    gap: 14px;
}
.hommage-ligne {
    background: #fff;
    border-radius: var(--mem-radius);
    box-shadow: var(--mem-shadow-soft);
    padding: 16px 20px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.hommage-ligne img {
    width: 62px;
    height: 74px;
    object-fit: cover;
    border-radius: 999px 999px 10px 10px;
    background: var(--mem-beige);
}
.hommage-ligne-infos { flex: 1; min-width: 170px; }
.hommage-ligne-nom {
    font-family: var(--mem-serif);
    font-size: 21px;
    margin: 0;
}
.hommage-ligne-detail {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 12.5px;
    color: var(--mem-ink-soft);
}
.hommage-ligne-stats {
    display: flex;
    gap: 18px;
    font-family: var(--mem-sans);
    font-size: 13px;
    color: var(--mem-ink-soft);
    align-items: center;
}
.hommage-ligne-actions { display: flex; gap: 8px; }

.statut {
    font-family: var(--mem-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 5px 12px;
}
.statut-publie { color: #2e6e4e; background: rgba(76, 175, 125, 0.16); }
.statut-attente { color: #8a6d3b; background: rgba(230, 179, 101, 0.22); }

/* ============================================================
   CONNEXION (SSO Woopets AI)
   ============================================================ */

.connexion-fond {
    background:
        radial-gradient(640px 300px at 85% 10%, rgba(214, 92, 71, 0.08) 0%, rgba(214, 92, 71, 0) 60%),
        radial-gradient(560px 280px at 10% 90%, rgba(230, 179, 101, 0.14) 0%, rgba(230, 179, 101, 0) 60%),
        var(--mem-cream);
    padding: 60px 0 90px 0;
}
.connexion-carte {
    max-width: 470px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--mem-shadow);
    padding: 42px 40px 36px 40px;
    text-align: center;
}
.connexion-carte .mem-title { font-size: 30px; }
.connexion-carte .mem-sub { font-size: 15px; }

.btn-sso {
    width: 100%;
    margin-top: 26px;
    background: #101b17;
    color: #fff;
    font-size: 16.5px;
    padding: 16px 24px;
    box-shadow: 0 14px 30px rgba(16, 27, 23, 0.28);
}
.btn-sso:hover { background: #1d2e27; color: #fff; }
.sso-etincelle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe9bd 0%, var(--mem-gold) 55%, #c98f3d 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4a3413;
    font-size: 13px;
    font-weight: 700;
}

.connexion-rassurance {
    list-style: none;
    padding: 0;
    margin: 30px 0 0 0;
    text-align: left;
    display: grid;
    gap: 13px;
}
.connexion-rassurance li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.55;
    color: #4a443f;
}
.rassurance-coche {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(65, 97, 80, 0.12);
    color: var(--mem-green);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.connexion-legal {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 12px;
    color: var(--mem-ink-soft);
    margin-top: 26px;
    line-height: 1.6;
}
.connexion-legal a { color: var(--mem-ink-soft); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
    .mem-title { font-size: 32px; }
    .mem-hero .mem-title { font-size: 36px; }
    .hommage-nom { font-size: 40px; }
    .hommage-b-hero .hommage-nom { font-size: 42px; }
    .hommage-epitaphe { font-size: 20px; }
    .mem-grille { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .mem-carte { padding: 10px 10px 16px 10px; }
    .mem-carte-nom { font-size: 20px; }
    .mem-carte-epitaphe { font-size: 13.5px; }
    .mem-bandeau-int { flex-direction: column; text-align: center; }
    .mem-bandeau-txt .mem-sub { margin-left: auto; }
    .creation-layout { grid-template-columns: 1fr; }
    .creation-apercu { position: static; max-width: 320px; margin: 0 auto; }
    .champ-duo { grid-template-columns: 1fr; }
    .mem-etape span.mem-etape-txt { display: none; }
    .mem-etape.actif span.mem-etape-txt { display: inline; }
    .mem-etape-sep { width: 26px; margin: 0 8px; }
    .hommage-ligne-stats { width: 100%; }
    .connexion-carte { padding: 32px 22px 28px 22px; }
}

@media (min-width: 768px) {
    .condoleances-liste { grid-template-columns: 1fr 1fr; }
    .condoleance-form { grid-column: 1 / -1; }
}


/* ============================================================
   EXTENSIONS FRONT (données réelles — hors maquette)
   ============================================================ */
.mem-flash {
    background: #eaf5ee;
    border: 1px solid #bfe0cc;
    color: #2e6e4e;
    border-radius: 14px;
    padding: 14px 18px;
    margin: 18px 0;
    font-family: var(--mem-sans);
    font-size: 14px;
}
.mem-flash-warn { background: #fbf1dd; border-color: #ecd9ac; color: #8a6d3b; }
.animal-noimg, .hommage-noimg, .mem-arche-empty, .choix-photo-empty, .creation-apercu-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mem-beige);
    color: #c9b8a6;
    font-size: 30px;
}
.animal-noimg { width: 74px; height: 74px; border-radius: 14px; flex: 0 0 auto; }
.hommage-noimg { width: 62px; height: 74px; border-radius: 999px 999px 10px 10px; flex: 0 0 auto; }
.mem-arche-empty { width: 100%; aspect-ratio: 4 / 4.6; border-radius: 999px 999px 14px 14px; }
.choix-photo-empty { width: 100%; aspect-ratio: 1; border-radius: 14px; }
.mem-error-field { color: #b3261e; font-size: 12.5px; font-family: var(--mem-sans); margin-top: 6px; }
.mem-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.condoleance-pending { opacity: .7; }

.mem-inline-form { text-align: center; margin: 0; }
.mem-inline-form button { margin: 0 auto; }

/* ============================================================
   BOUTON OFFICIEL WOOPETS AI (fond blanc obligatoire : le logo porte du #1a1a1a)
   ============================================================ */
.btn-sso-officiel {
    font-family: var(--mem-sans);
    width: 100%;
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 58px;
    box-sizing: border-box;
    padding: 0 18px;
    background: #fff;
    border: 1.5px solid #cce7e3;
    border-radius: 999px;
    color: #1b555c;
    font-weight: 700;
    font-size: 15.5px;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(27, 85, 92, 0.10);
    transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-sso-officiel:hover {
    transform: translateY(-2px);
    border-color: #48b5a8;
    box-shadow: 0 6px 20px rgba(27, 85, 92, 0.18);
    color: #1b555c;
}
.btn-sso-officiel .wai-logo { display: inline-flex; align-items: center; gap: 5px; }
.btn-sso-officiel .wai-logo svg { display: block; }
.btn-sso-officiel .wai-badge {
    padding: 2px 6px;
    background: #1b555c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 5px;
    line-height: 1;
}

/* ============================================================
   CLS — fallback aux métriques proches de PlayfairDisplay
   Évite le saut de mise en page pendant le chargement de la police.
   ============================================================ */
@font-face {
    font-family: "PlayfairFallback";
    src: local("Georgia"), local("Times New Roman"), local("Times");
    size-adjust: 108%;
    ascent-override: 100%;
    descent-override: 26%;
    line-gap-override: 0%;
    font-display: swap;
}

/* Fil d'ariane sur le hero nocturne (page hommage variante Veillée) */
/* Aligné à gauche comme sur le reste du site : .ariane ol est en flex sans justify-content,
   donc flex-start partout — on ne surcharge pas. */
.ariane-nuit { position: relative; z-index: 3; padding-top: 6px; margin-bottom: 18px; text-align: left; }
.ariane-nuit, .ariane-nuit a, .ariane-nuit a:hover, .ariane-nuit a:focus { color: rgba(255, 255, 255, 0.62); }
.ariane-nuit a:hover { color: rgba(255, 255, 255, 0.9); }

/* Accès membre depuis la galerie */
.mem-acces-membre { margin-top: 22px; }
.mem-acces-membre .btn-mem { gap: 8px; background: rgba(255, 255, 255, 0.7); }

/* Statuts membre supplémentaires */
.statut-depublie { color: #4d6589; background: rgba(77, 101, 137, 0.14); }
.mini-btn-fort { background: var(--mem-terracotta); color: #fff; }
.mini-btn-fort:hover { background: var(--mem-terracotta-deep); }
.hommage-ligne-actions form { display: inline; }
.hommage-ligne-actions button.mini-btn { font-family: var(--mem-sans); border: 0; cursor: pointer; }
/* Carte d'un animal déjà honoré (clic = édition) */
.choix-carte-existant { border-color: rgba(230, 179, 101, 0.55); }

/* ============================================================
   UPLOAD PHOTO — progression, états, erreurs
   ============================================================ */
.apercu-photo-zone { position: relative; }
.upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(31, 46, 41, 0.78);
    border-radius: 999px 999px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    color: #fff;
}
.upload-overlay[hidden] { display: none; }
.upload-etat {
    font-family: var(--mem-sans);
    font-size: 13.5px;
    font-weight: 500;
    margin: 0;
    text-align: center;
}
.upload-barre {
    width: 78%;
    height: 6px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    overflow: hidden;
}
.upload-barre-jauge {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--mem-gold) 0%, #f6dfae 100%);
    border-radius: 999px;
    transition: width .2s ease;
}
.upload-spinner, .btn-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mem-rotation .8s linear infinite;
}
.btn-spinner {
    width: 15px;
    height: 15px;
    border-width: 2px;
    margin-right: 8px;
    vertical-align: -2px;
}
.btn-spinner[hidden] { display: none; }
@keyframes mem-rotation { to { transform: rotate(360deg); } }

.upload-aide {
    font-family: var(--mem-sans);
    font-weight: 300;
    font-size: 12px;
    color: var(--mem-ink-soft);
    margin: 10px 0 0 0;
}
.upload-ok {
    font-family: var(--mem-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: #2e6e4e;
    margin: 6px 0 0 0;
}

/* ============================================================
   FORMULAIRE — champs obligatoires, dates rapides, bouton occupé
   ============================================================ */
.champ-requis { color: var(--mem-terracotta); font-weight: 700; margin-left: 2px; }
.mem-champ input.champ-vide, .mem-champ textarea.champ-vide { border-color: rgba(214, 92, 71, 0.45); }
.dates-rapides { display: flex; gap: 8px; margin: 8px 0 0 0; }
.dates-rapides .mini-btn { border: 0; cursor: pointer; font-family: var(--mem-sans); }
.btn-mem-inactif, .btn-mem:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none !important;
}
.btn-occupe { cursor: progress; }

/* Écrans larges : version 1600 px du ciel étoilé. */
@media (min-width: 901px) {
    .hommage-b-hero {
        background-image:
            radial-gradient(900px 460px at 50% 118%, rgba(230, 179, 101, 0.18) 0%, rgba(230, 179, 101, 0) 60%),
            url("/assets/memorial/ciel-nuit.jpg");
    }
}

/* ============================================================
   BOUGIE PHOTOGRAPHIQUE (page hommage) — la flamme est figée sur la photo,
   on lui rend la vie avec un halo animé en CSS derrière elle.
   ============================================================ */
.bougie-photo-zone {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 10px;
}
.bougie-photo {
    display: block;
    width: 120px;
    height: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}
.bougie-photo-halo {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 260px;
    height: 260px;
    transform: translateX(-50%);
    background: radial-gradient(circle,
        rgba(255, 202, 122, 0.30) 0%,
        rgba(255, 186, 105, 0.12) 38%,
        rgba(255, 180, 100, 0) 72%);
    border-radius: 50%;
    animation: mem-halo 3.4s ease-in-out infinite;
    will-change: transform, opacity;
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 767px) {
    .bougie-photo { width: 96px; }
    .bougie-photo-halo { width: 210px; height: 210px; }
}

/* Illustration d'état vide de la galerie */
.mem-illu-vide {
    width: 280px;
    max-width: 70vw;
    height: auto;
    opacity: 0.9;
}

/* Messages d'erreur sur le hero nocturne : le rouge de base y est illisible. */
.hommage-b-hero .mem-error-field {
    display: inline-block;
    color: #ffdcd2;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 220, 210, 0.22);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13.5px;
}

/* Bouton d'édition pour le propriétaire de l'hommage */
.hommage-proprio {
    position: relative;
    z-index: 3;
    margin: 0 0 18px 0;
    text-align: right;
}
.hommage-proprio a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mem-sans);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    padding: 7px 16px;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.hommage-proprio a:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
@media (max-width: 767px) {
    .hommage-proprio { text-align: center; }
}