/* ==========================================================
   En Mémoire — feuille de style principale
   Palette : tons doux, chaleureux, apaisants (pas de contraste dur)
   ========================================================== */

:root {
    --em-bg: #FAF5EF;             /* fond principal — ivoire chaud, jour */
    --em-surface: #F1E7DD;        /* fond secondaire / cartes — beige rosé */
    --em-surface-alt: #EDE1D4;    /* sections */
    --em-text: #3E3439;           /* texte principal — brun-mauve profond */
    --em-text-soft: #7C6F76;      /* texte secondaire */
    --em-accent: #8C7A93;         /* boutons — mauve doux (recueillement) */
    --em-accent-dark: #6D5A76;    /* bouton survol — mauve profond */
    --em-honey: #C99568;          /* accent doré-terracotta (amour, lumière du souvenir) */
    --em-primary: #9A87A3;        /* icônes, touches décoratives — lilas */
    --em-secondary: #A3AD8C;      /* couleur secondaire — vert sauge (cycle de la vie) */
    --em-rose-warm: #BE8B79;      /* touche terracotta rosée — chaleur, tendresse */
    --em-border: #E4D6C7;
    --em-radius: 14px;
}

[data-theme="dark"] {
    --em-bg: #1F1A28;             /* fond principal — violet-brun profond, nuit */
    --em-surface: #322A3C;        /* cartes / blocs */
    --em-surface-alt: #29222F;    /* sections */
    --em-text: #F4ECE3;           /* texte principal — ivoire chaud */
    --em-text-soft: #C9BEC4;      /* texte secondaire */
    --em-accent: #B49BC2;         /* boutons — mauve lumineux */
    --em-accent-dark: #D3BEE0;    /* liens / accents */
    --em-honey: #E0A876;          /* doré-terracotta lumineux — flamme de bougie */
    --em-primary: #B49BC2;
    --em-secondary: #9DAE8A;
    --em-rose-warm: #D19E8B;
    --em-border: #473C52;
}

html { height: 100%; overflow-x: hidden; }
body {
    overflow-x: hidden;
    background: var(--em-bg);
    color: var(--em-text);
    font-family: 'Karla', sans-serif;
    line-height: 1.65;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Pied de page toujours en bas de page : sur une page courte il reste collé
       en bas de l'écran, sur une page longue il suit le contenu normalement. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
body > main {
    flex: 1 0 auto;
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--em-border);
    color: var(--em-text-soft);
    border-radius: 999px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:hover { color: var(--em-text); border-color: var(--em-text-soft); }
[data-theme="dark"] .theme-toggle {
    border-color: rgba(245,237,238,0.35);
    color: var(--em-text);
}
[data-theme="dark"] .theme-toggle:hover { border-color: rgba(245,237,238,0.6); }

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0 4px;
}
.lang-switch__link {
    color: var(--em-text-soft);
    text-decoration: none;
    padding: 2px 3px;
}
.lang-switch__link:hover { color: var(--em-text); }
.lang-switch__link.is-active { color: var(--em-text); text-decoration: underline; }
.lang-switch__sep { color: var(--em-border); }
.site-navbar--overlay .lang-switch__link { color: rgba(255,255,255,0.75); }
.site-navbar--overlay .lang-switch__link.is-active,
.site-navbar--overlay .lang-switch__link:hover { color: #fff; }
.site-navbar--overlay .lang-switch__sep { color: rgba(255,255,255,0.4); }

h1, h2, h3, .font-voice {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    color: var(--em-text);
}

a {
    color: var(--em-accent-dark);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* --- Menu déroulant (navbar) --- */
.navbar-nav .dropdown-menu {
    background-color: var(--em-bg);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius);
    box-shadow: 0 8px 24px rgba(62, 52, 57, 0.12);
    padding: 0.5rem;
}
.navbar-nav .dropdown-item {
    color: var(--em-text);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
    background-color: var(--em-surface);
    color: var(--em-accent-dark);
}

/* --- Navigation --- */
.site-navbar {
    background: var(--em-bg);
    border-bottom: 1px solid var(--em-border);
    padding: 0.9rem 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-navbar--overlay {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: transparent;
    border-bottom-color: transparent;
}
/* Le voile (scrim) du hero est très clair juste sous la barre de nav
   (pour ne pas assombrir l'image) : sans ça, l'icône jour/nuit et le
   bouton "Installer" (blancs) peuvent se fondre dans une image/vidéo
   claire. On ajoute donc un dégradé sombre dédié, seulement derrière
   la barre de nav, qui disparaît dès qu'elle devient solide au scroll. */
.site-navbar--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 100px;
    background: linear-gradient(180deg, rgba(20,14,15,0.55) 0%, rgba(20,14,15,0) 100%);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s ease;
}
.site-navbar--overlay.is-scrolled::before {
    opacity: 0;
}
.site-navbar--overlay .navbar-brand,
.site-navbar--overlay .nav-link {
    color: #fff;
}
.site-navbar--overlay .nav-link:hover { color: #E3C79A; }
.site-navbar--overlay .theme-toggle {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}
.site-navbar--overlay .theme-toggle svg {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
.site-navbar--overlay .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}
.site-navbar--overlay.is-scrolled {
    background: var(--em-bg);
    border-bottom-color: var(--em-border);
    box-shadow: 0 4px 18px -8px rgba(43,37,35,0.16);
}
.site-navbar--overlay.is-scrolled .navbar-brand,
.site-navbar--overlay.is-scrolled .nav-link {
    color: var(--em-text);
}
.site-navbar--overlay.is-scrolled .nav-link { color: var(--em-text-soft); }
.site-navbar--overlay.is-scrolled .nav-link:hover { color: var(--em-accent-dark); }
.site-navbar--overlay.is-scrolled .theme-toggle {
    border-color: var(--em-border);
    color: var(--em-text-soft);
}
.site-navbar--overlay.is-scrolled .navbar-toggler-icon {
    filter: none;
}
/* Mode sombre : l'icône par défaut de Bootstrap est foncée et devient invisible
   sur un fond sombre, quelle que soit la variante de navbar (fixe, transparente,
   ou transparente-devenue-solide au scroll). On l'inverse systématiquement. */
[data-theme="dark"] .navbar-toggler-icon,
[data-theme="dark"] .site-navbar--overlay.is-scrolled .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}
.navbar-brand {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--em-text);
}

/* --- Logo : nom + slogan, bloc cliquable unique avec fond blanc transparent ---
   Le fond blanc semi-transparent garantit la lisibilité du nom/slogan quelle que
   soit la navbar (claire, transparente sur image, ou mode sombre). */
.navbar-brand--logo {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    line-height: 1.15;
    padding: 0.35rem 0.85rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px -4px rgba(43,37,35,0.18);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.navbar-brand--logo:hover {
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
    text-decoration: none;
}
.navbar-brand--logo .navbar-brand__icon {
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.navbar-brand--logo .navbar-brand__text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
.navbar-brand--logo .navbar-brand__name {
    font-size: 1.25rem;
    font-weight: 500;
    color: #3E3439; /* fixe : le fond du logo est toujours clair, quel que soit le thème */
}
.navbar-brand--logo .navbar-brand__slogan {
    font-family: 'Karla', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    color: #7C6F76;
    white-space: nowrap;
}
/* La navbar transparente (survolant une image/vidéo) et le mode sombre gardent
   le même fond blanc : c'est ce qui assure le contraste dans les deux cas. */
.site-navbar--overlay .navbar-brand--logo,
[data-theme="dark"] .navbar-brand--logo {
    background: rgba(255,255,255,0.85);
}
.site-navbar--overlay .navbar-brand--logo .navbar-brand__name,
.site-navbar--overlay.is-scrolled .navbar-brand--logo .navbar-brand__name,
[data-theme="dark"] .navbar-brand--logo .navbar-brand__name {
    color: #3E3439;
}
/* Le slogan en nowrap ne doit jamais forcer la barre de nav à dépasser la largeur
   de l'écran (sinon le bouton hamburger, poussé hors du viewport, semble "ne pas
   être à droite" sur les téléphones dont la largeur est proche de 390-430px).
   On le fait donc rétrécir/repasser sur plusieurs lignes dès 575.98px, et pas
   seulement en dessous de 420px comme avant. */
@media (max-width: 575.98px) {
    .navbar-brand--logo .navbar-brand__slogan { font-size: 0.52rem; white-space: normal; line-height: 1.1; }
}
/* Filet de sécurité : même si un futur contenu (slogan plus long, traduction...)
   est trop large, le bloc logo doit pouvoir se compresser plutôt que forcer un
   débordement horizontal de toute la barre de navigation. */
.navbar-brand--logo { min-width: 0; }
.navbar-brand--logo .navbar-brand__text { min-width: 0; }
.nav-link {
    color: var(--em-text-soft);
    font-weight: 500;
}
.nav-link:hover { color: var(--em-accent-dark); }

.btn-primary-soft {
    background: var(--em-accent);
    color: #fff;
    border: none;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-weight: 500;
}
.btn-primary-soft:hover {
    background: var(--em-accent-dark);
    color: #fff;
}

.btn-install {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--em-accent);
    border: 1px solid var(--em-accent);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-weight: 500;
}
.btn-install:hover { background: var(--em-accent); color: #fff; }
.site-navbar--overlay .btn-install { color: #fff; border-color: rgba(255,255,255,0.6); text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.site-navbar--overlay .btn-install svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)); }
.site-navbar--overlay .btn-install:hover { background: rgba(255,255,255,0.15); }
.site-navbar--overlay.is-scrolled .btn-install { color: var(--em-accent); border-color: var(--em-accent); }
.site-navbar--overlay.is-scrolled .btn-install:hover { background: var(--em-accent); color: #fff; }

/* Menu mobile : zone tactile confortable */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
}
.navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--em-surface);
        border: 1px solid var(--em-border);
        border-radius: var(--em-radius);
        margin-top: 0.75rem;
        padding: 1rem;
        /* Sur les pages à nav fixe (accueil, constellation), le menu déroulé ne
           doit jamais pouvoir dépasser le bas de l'écran : la nav étant en
           position: fixed, le scroll de la page ne la fait pas bouger, donc un
           menu trop grand rendait les derniers liens inatteignables sur mobile.
           On le limite à la hauteur d'écran disponible et on le rend scrollable
           en interne. 100dvh tient compte des barres d'interface du navigateur
           mobile quand c'est supporté ; sinon on retombe sur 100vh. */
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    @supports (height: 100dvh) {
        .navbar-collapse {
            max-height: calc(100dvh - 90px);
        }
    }
    .navbar-nav .nav-item { padding: 0.35rem 0; }
    .site-navbar--overlay .navbar-collapse .nav-link { color: var(--em-text-soft); }
    .site-navbar--overlay .navbar-collapse .nav-link:hover { color: var(--em-accent-dark); }
    /* Une fois le menu ouvert, il a toujours un fond clair uni (--em-surface) — même sur les
       pages à nav transparente (accueil, constellation) où le sélecteur FR/EN est blanc par
       défaut pour flotter sur la photo de fond. Sans cette correction, il reste blanc sur fond
       clair une fois le menu déroulé, donc quasiment invisible. */
    .site-navbar--overlay .navbar-collapse .lang-switch__link { color: var(--em-text-soft); }
    .site-navbar--overlay .navbar-collapse .lang-switch__link.is-active,
    .site-navbar--overlay .navbar-collapse .lang-switch__link:hover { color: var(--em-text); }
    .site-navbar--overlay .navbar-collapse .lang-switch__sep { color: var(--em-border); }
    /* Le sélecteur est petit et discret par nature (0.8rem) : sur mobile, où l'espace est
       plus généreux dans le menu déroulé qu'à côté du logo, on l'agrandit un peu pour qu'il
       reste facile à lire et à toucher. */
    .lang-switch { font-size: 0.95rem; padding: 0.35rem 0; }
    .lang-switch__link { padding: 4px 6px; }
}

/* --- Cartes / conteneurs --- */
.card-soft {
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius);
    padding: 1.75rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-soft:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -12px rgba(43,37,35,0.14);
}
[data-theme="dark"] .card-soft:hover {
    box-shadow: 0 12px 28px -12px rgba(0,0,0,0.4);
}

/* --- Hero page d'accueil : vidéo en boucle (autoplay + loop) --- */
.hero-scrub {
    position: relative;
    height: 88vh;
    margin-top: -1px;
}
.hero-scrub__pin {
    position: relative;
    height: 88vh;
    min-height: 88vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.hero-scrub__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hero-scrub__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none; /* affichée uniquement si la vidéo n'est pas utilisée (JS off / reduced motion) */
}
.hero-scrub__mobile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none; /* affichée uniquement sur mobile, voir media query plus bas */
}
.hero-scrub.no-scrub .hero-scrub__video { display: none; }
.hero-scrub.no-scrub .hero-scrub__fallback { display: block; }
.hero-scrub.no-scrub {
    height: 88vh; /* pas besoin de distance de scrub si on retombe sur une image fixe */
}
.hero-scrub.no-scrub .hero-scrub__pin {
    position: relative;
    height: 88vh;
    min-height: 88vh;
}

/* Hauteur du hero adaptée à chaque taille d'écran : sur tablette et mobile,
   88vh laisse trop peu de place au texte (barres d'adresse/navigation du
   navigateur qui rognent la hauteur réelle), on réduit donc progressivement. */
@media (max-width: 991.98px) {
    .hero-scrub,
    .hero-scrub__pin,
    .hero-scrub.no-scrub,
    .hero-scrub.no-scrub .hero-scrub__pin {
        height: 78vh;
        min-height: 78vh;
    }
    /* Sur écran étroit (portrait), le recadrage "cover" rogne surtout les côtés :
       le chien est positionné vers la gauche du cadre d'origine, on décale donc
       le point de recadrage pour qu'il reste bien visible et centré à l'écran. */
    .hero-scrub__video,
    .hero-scrub__fallback {
        object-position: 28% center;
    }
}
@media (max-width: 767.98px) {
    .hero-scrub,
    .hero-scrub__pin,
    .hero-scrub.no-scrub,
    .hero-scrub.no-scrub .hero-scrub__pin {
        height: 100vh;
        min-height: 560px;
    }
    /* 100dvh tient compte des barres d'interface mobiles quand le navigateur le supporte */
    @supports (height: 100dvh) {
        .hero-scrub,
        .hero-scrub__pin,
        .hero-scrub.no-scrub,
        .hero-scrub.no-scrub .hero-scrub__pin {
            height: 100dvh;
        }
    }
    /* Sur mobile : image fixe chien + chat à la place de la vidéo */
    .hero-scrub__video,
    .hero-scrub__fallback {
        display: none;
    }
    .hero-scrub__mobile-img {
        display: block;
        object-position: center 30%;
    }
}
@media (max-width: 767.98px) and (orientation: landscape) {
    .hero-scrub,
    .hero-scrub__pin,
    .hero-scrub.no-scrub,
    .hero-scrub.no-scrub .hero-scrub__pin {
        height: 100vh;
        min-height: 320px;
    }
}
.hero-parallax__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,14,15,0.15) 0%, rgba(20,14,15,0.35) 55%, rgba(20,14,15,0.78) 100%);
}
.hero-parallax__content {
    position: relative;
    z-index: 2;
    color: #FBF3F1;
    padding: 3.5rem 0 4.5rem;
    width: 100%;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E3C79A;
    margin-bottom: 1.1rem;
}
.hero-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: #E3C79A;
    display: inline-block;
}
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--em-accent-dark);
    margin-bottom: 0.9rem;
}
.section-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--em-accent-dark);
    display: inline-block;
}
.hero-parallax__content h1 {
    color: #fff;
    font-size: clamp(2.1rem, 4.5vw, 3.4rem);
    max-width: 780px;
    line-height: 1.18;
}
.hero-parallax__content p {
    color: #EADFDC;
    max-width: 540px;
    font-size: 1.08rem;
}
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    z-index: 2;
    color: #FBF3F1;
    opacity: 0.85;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: hero-scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes hero-scroll-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue { animation: none; }
}

/* --- Respirations visuelles en parallax (sections intermédiaires) --- */
.parallax-break {
    position: relative;
    min-height: 46vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 1rem 0;
}
.parallax-break__bg {
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    bottom: -60px;
    background-size: cover;
    background-position: center;
    will-change: transform;
}
.parallax-break__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,14,15,0.35) 0%, rgba(20,14,15,0.5) 100%);
}
.parallax-break__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 620px;
    padding: 0 1.25rem;
}
.parallax-break__content p.font-voice {
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.5;
    color: #fff;
    margin: 0;
}
.feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(140,122,147,0.14);
    color: var(--em-accent-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
}
.feature-icon svg { width: 22px; height: 22px; }
[data-theme="dark"] .feature-icon { background: rgba(180,155,194,0.18); color: var(--em-accent); }

.hero-parallax__content .hero-fade {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-fade-in 0.8s ease forwards;
}
.hero-parallax__content .hero-fade:nth-child(1) { animation-delay: 0.1s; }
.hero-parallax__content .hero-fade:nth-child(2) { animation-delay: 0.25s; }
.hero-parallax__content .hero-fade:nth-child(3) { animation-delay: 0.4s; }
.hero-parallax__content .hero-fade:nth-child(4) { animation-delay: 0.55s; }
@keyframes hero-fade-in {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-parallax__content .hero-fade { animation: none; opacity: 1; transform: none; }
}

/* Cascade légère des cartes dans une même rangée */
.row.g-4 > div:nth-child(1) .reveal, .row.g-4 > div:nth-child(1).reveal { transition-delay: 0s; }
.row.g-4 > div:nth-child(2) .reveal, .row.g-4 > div:nth-child(2).reveal { transition-delay: 0.08s; }
.row.g-4 > div:nth-child(3) .reveal, .row.g-4 > div:nth-child(3).reveal { transition-delay: 0.16s; }
.row.g-4 > div:nth-child(4) .reveal, .row.g-4 > div:nth-child(4).reveal { transition-delay: 0.24s; }
.row.g-4 > div:nth-child(5) .reveal, .row.g-4 > div:nth-child(5).reveal { transition-delay: 0.32s; }
.row.g-4 > div:nth-child(6) .reveal, .row.g-4 > div:nth-child(6).reveal { transition-delay: 0.4s; }
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

.gallery-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
@media (max-width: 767.98px) {
    .gallery-img { height: 110px; }
    .hero-parallax__content {
        padding: 2rem 0 3.25rem;
    }
    .hero-eyebrow { font-size: 0.7rem; margin-bottom: 0.85rem; }
    .hero-parallax__content h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
    .hero-parallax__content p { font-size: 0.98rem; max-width: 100%; }
    .hero-scroll-cue { bottom: 1.1rem; font-size: 0.62rem; }
}

/* --- Frise chronologique du mémorial --- */
.timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid var(--em-border);
}
.timeline-item {
    position: relative;
    margin-bottom: 2.5rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.55rem;
    top: 0.3rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--em-accent);
}
.timeline-date {
    font-size: 0.85rem;
    color: var(--em-text-soft);
    margin-bottom: 0.3rem;
}
.timeline-item-pensee {
    padding-left: 0.75rem;
    border-left: 2px solid var(--em-honey);
}
.pensee-text {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--em-text-soft);
}
.badge-pensee {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(201,149,104,0.20);
    color: var(--em-honey);
    margin-left: 0.4rem;
    font-style: normal;
}
.timeline-photos img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
}
/* --- Barre d'actions (agrandir / télécharger) sous chaque photo ---
   Toujours pleine largeur du conteneur : ne peut jamais se chevaucher ni
   déborder, quelle que soit la largeur de l'écran (contrairement à des
   icônes positionnées en coin qui se marchaient dessus sur mobile). */
.photo-actions-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 6px 4px;
    background: linear-gradient(to top, rgba(20,17,15,0.75), rgba(20,17,15,0));
    z-index: 2;
}
.photo-actions-bar button,
.photo-actions-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #3E3439;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}
.photo-actions-bar button:hover,
.photo-actions-bar a:hover {
    background: #fff;
    transform: scale(1.08);
}
.timeline-photo-wrap { position: relative; overflow: hidden; border-radius: 10px; }
.timeline-photo-wrap img,
.timeline-photo-wrap video,
.gallery-card img { cursor: pointer; }

/* --- Galerie souvenirs : chaque photo dans sa propre card --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.gallery-card {
    background: var(--em-surface);
    border: 1px solid var(--em-border);
    border-radius: 14px;
    padding: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(43,37,35,0.18);
}
.gallery-card-media { position: relative; border-radius: 8px; overflow: hidden; }
.gallery-card-media img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
@media (max-width: 576px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gallery-card-media img { height: 150px; }
    .photo-actions-bar button,
    .photo-actions-bar a { width: 34px; height: 34px; font-size: 15px; }
}

/* --- Lightbox (agrandissement photo) --- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,8,8,0.92);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.lightbox-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 10px;
}
.lightbox-actions a,
.lightbox-actions button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
}
.lightbox-actions a:hover,
.lightbox-actions button:hover { background: rgba(255,255,255,0.25); }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
@media (max-width: 576px) {
    .lightbox-nav { width: 38px; height: 38px; }
    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
}

/* --- Bannière "Exemple de mémorial" (page démo) --- */
.demo-banner {
    background: linear-gradient(135deg, rgba(140,122,147,0.14), rgba(201,149,104,0.14));
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.demo-banner__title {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    color: var(--em-text);
    margin-bottom: 0.15rem;
}
.demo-banner__text {
    font-size: 0.85rem;
    color: var(--em-text-soft);
    margin-bottom: 0;
}

/* --- Bouton retour générique --- */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--em-text-soft);
    text-decoration: none;
}
.btn-back:hover { color: var(--em-accent-dark); text-decoration: none; }

/* --- Pied de page --- */
.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--em-border);
    background: var(--em-surface-alt);
    padding: 2.5rem 0 1.5rem;
    margin-top: 4rem;
}
.site-footer .footer-brand-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.site-footer .footer-brand__icon {
    border-radius: 6px;
    flex-shrink: 0;
}
.site-footer .footer-brand {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    color: var(--em-text);
    margin-bottom: 0;
}
.site-footer .footer-slogan {
    font-size: 0.78rem;
    color: var(--em-text-soft);
    margin-bottom: 1rem;
}
.site-footer .footer-heading {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--em-text-soft);
    margin-bottom: 0.75rem;
    font-weight: 600;
}
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links a { color: var(--em-text-soft); margin-left: 0; font-size: 0.88rem; }
.footer-links a:hover { color: var(--em-accent-dark); }
.site-footer hr { border-color: var(--em-border); opacity: 1; margin: 1.75rem 0 1.25rem; }
.footer-partners__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.85rem;
}
.footer-partners__list a { color: var(--em-text-soft); }
.footer-partners__list a:hover { color: var(--em-accent-dark); }
@media (max-width: 767px) {
    .footer-partners__list { justify-content: center; }
}
.site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--em-text-soft);
}
@media (max-width: 767px) {
    .site-footer { text-align: center; }
    .site-footer .footer-brand-row { justify-content: center; }
    .site-footer .footer-brand, .site-footer .footer-slogan { text-align: center; }
    .footer-links { align-items: center; margin-bottom: 1.5rem; }
    .site-footer .footer-bottom { justify-content: center; text-align: center; }
}

/* --- Bandeau cookies --- */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3E3439;
    color: #F4ECE3;
    padding: 1rem 0;
    z-index: 1050;
}
.cookie-banner a { color: #fff; text-decoration: underline; }
[data-theme="dark"] .cookie-banner {
    background: #1F1A28;
    color: #F4ECE3;
}

/* --- Effet verre (glassmorphism) pour les cartes de la page d'accueil --- */
.section-glass-bg {
    position: relative;
    overflow: hidden;
}
.section-glass-bg::before,
.section-glass-bg::after {
    content: '';
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    opacity: 0.28;
    pointer-events: none;
}
.section-glass-bg::before {
    background: var(--em-accent);
    top: -140px;
    left: -120px;
}
.section-glass-bg::after {
    background: var(--em-honey);
    bottom: -160px;
    right: -120px;
}
.section-glass-bg > .container {
    position: relative;
    z-index: 1;
}
.card-soft.card-glass {
    background: rgba(255,250,246,0.55);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 10px 32px -14px rgba(43,37,35,0.22);
}
.card-soft.card-glass:hover {
    background: rgba(255,250,246,0.74);
    transform: translateY(-3px);
}
[data-theme="dark"] .card-soft.card-glass {
    background: rgba(43,34,36,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 32px -14px rgba(0,0,0,0.5);
}
[data-theme="dark"] .card-soft.card-glass:hover {
    background: rgba(43,34,36,0.58);
}
@media (max-width: 767px) {
    /* Le flou coûte cher au rendu sur mobile : on garde une version plus légère */
    .card-soft.card-glass { backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
}

/* --- Formulaires --- */
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--em-border);
}
.form-control:focus, .form-select:focus {
    border-color: var(--em-accent);
    box-shadow: 0 0 0 3px rgba(140,122,147,0.22);
}

.password-field-wrap {
    position: relative;
}
.password-field-wrap input {
    padding-right: 5rem;
}
.password-toggle-btn {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--em-accent-dark);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
}
.password-toggle-btn:hover { text-decoration: underline; }

/* Page Avis : notation en étoiles */
.stars {
    color: var(--em-accent);
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.stars--sm { font-size: 0.95rem; }