/* ==========================================================================
   Nos Fiançailles — Nour & Melih
   Palette : crème/beige/or (fournie). Signature : étoile géométrique à 8
   branches (deux carrés superposés) — motif partagé par les traditions
   ottomane et maghrébine, utilisé comme fil conducteur visuel.
   ========================================================================== */

:root {
    /* Palette (fournie par le brief) */
    --cream-lightest: #F8F2E7;
    --cream-light: #F0E6D4;
    --beige: #E8D9BD;
    --tan: #D9C3A0;
    --gold-soft: #C9A978;
    --gold: #A6803A;
    --gold-deep: #8A6A2E;
    --ink: #3E3223;
    --ink-light: #7A6B54;
    --white: #FFFFFF;
    --error: #A13B3B;

    /* Typographie */
    --font-heading: 'Cormorant Garamond', serif;
    --font-caps: 'Cormorant SC', serif;
    --font-body: 'Jost', sans-serif;
    --font-heading-ar: 'Amiri', serif;
    --font-body-ar: 'Tajawal', sans-serif;

    /* Mouvement — vitesse de l'UI générale (les drapeaux ont leur propre
       réglage indépendant dans flags.js) */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.3s var(--ease);
    --t-medium: 0.6s var(--ease);
    --t-slow: 0.9s var(--ease);

    --shadow-soft: 0 4px 24px rgba(138, 106, 46, 0.14);
    --shadow-medium: 0 10px 40px rgba(138, 106, 46, 0.20);

    --radius: 6px;
    --radius-lg: 18px;
    --drawer-w: 300px;
}

html[dir="rtl"] {
    --font-heading: var(--font-heading-ar);
    --font-caps: var(--font-heading-ar);
    --font-body: var(--font-body-ar);
}

/* ---------------------------------------------------------------------- */
/* Reset & base                                                           */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    background: #000;
    font-size: 100%; /* taille standard du navigateur — tout le site est dérivé en rem à partir de là */
}

body {
    margin: 0;
    background: var(--cream-lightest);
    background-image:
        radial-gradient(ellipse at top left, rgba(201, 169, 120, 0.10), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(201, 169, 120, 0.12), transparent 55%);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.65;
    overflow-x: hidden;
    opacity: 0;
    animation: bodyReveal 0.8s ease 0.15s forwards;
}
@keyframes bodyReveal { to { opacity: 1; } }
body.page-exit { opacity: 0; animation: none; transition: opacity 0.35s ease; }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------- */
/* Étoile signature & séparateurs                                         */
/* ---------------------------------------------------------------------- */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-block: 1.5rem;
    color: var(--gold);
}
.divider span {
    display: block;
    width: clamp(28px, 8vw, 64px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-soft));
}
[dir="rtl"] .divider span:first-child { background: linear-gradient(90deg, var(--gold-soft), transparent); }
[dir="rtl"] .divider span:last-child { background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.divider-icon { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Logo signature — PNG pré-coloré (plus fiable qu'un masque CSS, aucune  */
/* dépendance au support navigateur de mask-image).                       */
/* ---------------------------------------------------------------------- */
.brand-mark {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}
.brand-mark--divider { width: 26px; height: 26px; }
.brand-mark--login { width: 52px; height: 52px; margin: 0 auto 1rem; }
.brand-mark--footer { width: 26px; height: 26px; margin: 0 auto 0.8rem; }
.brand-mark--topbar { width: 76px; height: 76px; }

.brand-mark--hero {
    position: absolute;
    top: 50%; left: 50%;
    width: min(55vw, 400px); height: min(55vw, 400px);
    transform: translate(-50%, -50%);
    opacity: 0.07;
    z-index: -1;
    animation: heroPulse 8s ease-in-out infinite;
}
@keyframes heroPulse {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.1; }
}

/* ---------------------------------------------------------------------- */
/* Écran d'intro / chargement — plein écran, une variante par page        */
/* (voir includes/page-intro.php). Filet de sécurité CSS pur : se masque  */
/* de lui-même après 5s au cas où le JS ne s'exécuterait pas.             */
/* ---------------------------------------------------------------------- */
.page-intro {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--cream-lightest);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.7s ease, visibility 0.7s ease;
    animation: introForceHide 0s linear 5s forwards;
}
@keyframes introForceHide {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.page-intro.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Générique : logo qui pulse or -> noir -> or, en boucle (aussi utilisé
   comme écran de patience si une page met du temps à répondre) */
.brand-mark--pulse-wrap { position: relative; width: 84px; height: 84px; }
.brand-mark--pulse-wrap .brand-mark { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-mark--pulse-top { animation: pulseFade 2.2s ease-in-out infinite; }
@keyframes pulseFade { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Carte qui s'ouvre en livre, plein écran : connexion + accueil */
.intro-book {
    position: absolute;
    inset: 0;
    perspective: 2200px;
}
.book-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.3rem;
    background: var(--cream-lightest);
}
.book-content .brand-mark--intro { opacity: 0; animation: introFadeIn 1.2s ease 2.1s forwards; }
.intro-card-names {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    color: var(--gold-deep);
    opacity: 0;
    animation: introFadeIn 1.2s ease 2.5s forwards;
}
[dir="rtl"] .intro-card-names { font-style: normal; }
@keyframes introFadeIn { to { opacity: 1; } }

.book-cover {
    position: absolute;
    top: 0; bottom: 0;
    width: 50%;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    box-shadow: var(--shadow-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}
.book-cover::before {
    content: '';
    width: 44px; height: 44px;
    background-image: url('../img/logo-cream.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.65;
}
.book-cover--left {
    left: 0;
    transform-origin: left center;
    animation: bookOpenLeft 2s cubic-bezier(0.6, 0, 0.4, 1) 0.5s forwards;
}
.book-cover--right {
    right: 0;
    transform-origin: right center;
    animation: bookOpenRight 2s cubic-bezier(0.6, 0, 0.4, 1) 0.5s forwards;
}
@keyframes bookOpenLeft { to { transform: rotateY(-115deg); } }
@keyframes bookOpenRight { to { transform: rotateY(115deg); } }

/* Ruban qui se déroule puis s'étend plein écran : date & lieu */
.intro-ribbon {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto 0;
    height: 130px;
    background: linear-gradient(90deg, var(--gold-soft), var(--gold) 50%, var(--gold-soft));
    box-shadow: var(--shadow-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scaleX(0.02);
    animation: introRibbonUnfurl 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}
@keyframes introRibbonUnfurl { to { transform: scaleX(1); } }
.intro-ribbon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    transform: scaleY(0);
    animation: introRibbonGrow 0.55s ease 0.65s forwards;
}
@keyframes introRibbonGrow { to { transform: scaleY(10); } }
.intro-ribbon .brand-mark {
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: introFadeIn 0.4s ease 0.75s forwards;
}

/* Zoom sur le logo, plein écran : traditions */
.brand-mark--intro-zoom {
    width: 220px; height: 220px;
    animation: introZoomIn 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes introZoomIn {
    0% { transform: scale(9); opacity: 0.2; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------------- */
/* Fond : drapeaux (rebond bords + contenu + entre eux, fusions)          */
/* ---------------------------------------------------------------------- */
.bg-flags {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.bg-flag {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--fs, 34px);
    opacity: 0;
    filter: drop-shadow(0 3px 6px rgba(62, 50, 35, 0.18));
    transition: opacity 1.5s ease;
    will-change: transform;
}
/* Objet qui recouvrirait du texte : il disparaît vite (flags.v9.js), puis
   réapparaît doucement (la transition de .bg-flag, 1,5 s) une fois dégagé. */
.bg-flag--hidden { opacity: 0 !important; transition: opacity 0.2s ease; }
.bg-flag svg { width: 100%; height: auto; border-radius: 2px; display: block; }
.bg-flag--memento svg { filter: drop-shadow(0 2px 4px rgba(62, 50, 35, 0.22)); }

.flag-explosion {
    position: absolute;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(198,161,91,0.65) 42%, rgba(198,161,91,0) 72%);
    animation: flagExplode 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}
@keyframes flagExplode {
    0% { transform: scale(0.3); opacity: 1; }
    55% { transform: scale(3.4); opacity: 0.85; }
    100% { transform: scale(4.8); opacity: 0; }
}

/* ---------------------------------------------------------------------- */
/* Structure générale                                                     */
/* ---------------------------------------------------------------------- */
main.page {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    padding: 8.2rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
main.page--auth {
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.eyebrow {
    font-family: var(--font-caps);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--gold);
    text-align: center;
}
[dir="rtl"] .eyebrow { letter-spacing: normal; text-transform: none; font-family: var(--font-heading-ar); font-size: 1rem; }

.section-title {
    font-family: var(--font-caps);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    text-align: center;
    margin-bottom: 0.5rem;
}
.section-title--left { text-align: start; }
[dir="rtl"] .section-title { letter-spacing: normal; text-transform: none; font-family: var(--font-heading-ar); }

.section-note {
    text-align: center;
    color: var(--ink-light);
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 2.5rem;
}

.page-header { text-align: center; margin-bottom: 3rem; }
.page-title {
    font-family: var(--font-caps);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: clamp(2rem, 6vw, 3rem);
    margin-block: 0.5rem;
    white-space: nowrap;
}
[dir="rtl"] .page-title { letter-spacing: normal; text-transform: none; font-family: var(--font-heading-ar); }
.page-lead { max-width: 60ch; margin: 1.5rem auto 0; text-align: center; color: var(--ink-light); }

/* ---------------------------------------------------------------------- */
/* Barre supérieure + menu tiroir                                         */
/* ---------------------------------------------------------------------- */
.topbar {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.4rem 0.6rem;
    background: linear-gradient(to bottom, rgba(248, 242, 231, 0.94), rgba(248, 242, 231, 0));
    backdrop-filter: blur(2px);
}
.topbar-brand {
    position: absolute;
    left: 50%;
    top: 0.6rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    transition: transform var(--t-medium);
}
.topbar-brand:hover { transform: translateX(-50%) scale(1.04); }
.topbar-brand-names {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.72rem;
    color: var(--gold-deep);
    line-height: 1;
    white-space: nowrap;
}
[dir="rtl"] .topbar-brand-names { font-style: normal; }
.topbar-brand-tag {
    font-family: var(--font-caps);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.56rem;
    color: var(--gold);
    line-height: 1;
}
[dir="rtl"] .topbar-brand-tag { letter-spacing: normal; text-transform: none; font-family: var(--font-heading-ar); font-size: 0.64rem; }

.menu-toggle {
    width: 44px; height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    background: var(--cream-light);
    border: 1px solid var(--beige);
    border-radius: 50%;
    transition: background var(--t-fast), transform var(--t-fast);
}
.menu-toggle:hover { background: var(--tan); transform: scale(1.06); }
.menu-toggle span { width: 18px; height: 1.5px; background: var(--ink); transition: transform var(--t-fast), opacity var(--t-fast); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.lang-switch { display: flex; gap: 0.4rem; }
.lang-switch--login { position: fixed; top: 1.25rem; inset-inline-end: 1.25rem; z-index: 40; }
.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--tan);
    border-radius: 999px;
    color: var(--ink-light);
    transition: all var(--t-fast);
}
.lang-btn:hover { background: var(--cream-light); color: var(--ink); }
.lang-btn.active { background: var(--gold); border-color: var(--gold); color: var(--white); }

.drawer-overlay {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-medium);
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed; top: 0; bottom: 0;
    inset-inline-start: 0;
    width: min(var(--drawer-w), 82vw);
    z-index: 50;
    background: var(--cream-light);
    border-inline-end: 1px solid var(--beige);
    box-shadow: var(--shadow-medium);
    padding: 2.2rem 1.6rem;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--t-medium);
}
[dir="rtl"] .drawer { transform: translateX(100%); }
.drawer.open { transform: translateX(0); }

.drawer-head { margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--beige); }
.drawer-guest { font-family: var(--font-heading); font-size: 1.2rem; color: var(--gold-deep); }
.drawer-eyebrow { font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-light); margin-top: 0.2rem; }
[dir="rtl"] .drawer-eyebrow { text-transform: none; letter-spacing: normal; }

.drawer-list { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.drawer-list li a {
    display: block;
    padding: 0.7rem 0.2rem;
    font-size: 1.02rem;
    color: var(--ink);
    border-inline-start: 2px solid transparent;
    padding-inline-start: 0.9rem;
    transition: all var(--t-fast);
}
.drawer-list li a:hover, .drawer-list li a.active {
    border-inline-start-color: var(--gold);
    color: var(--gold-deep);
    padding-inline-start: 1.2rem;
}
.drawer-sep { margin-top: 0.6rem; padding-top: 0.8rem; border-top: 1px dashed var(--tan); }

.drawer-foot { padding-top: 1rem; border-top: 1px solid var(--beige); }
.drawer-logout { font-size: 0.85rem; color: var(--ink-light); letter-spacing: 0.05em; }
.drawer-logout:hover { color: var(--error); }

/* ---------------------------------------------------------------------- */
/* Connexion                                                              */
/* ---------------------------------------------------------------------- */
.login-card {
    position: relative;
    width: 100%; max-width: 440px;
    background: var(--cream-light);
    border: 1px solid var(--beige);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    padding: clamp(2rem, 6vw, 3.2rem) clamp(1.6rem, 6vw, 2.6rem);
    text-align: center;
}
.login-title {
    font-family: var(--font-caps);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 6vw, 2.3rem);
    margin-top: 0.4rem;
}
[dir="rtl"] .login-title { letter-spacing: normal; text-transform: none; font-family: var(--font-heading-ar); }
.login-names { font-family: var(--font-heading); font-style: italic; font-size: 1.3rem; color: var(--gold-deep); margin-top: 0.3rem; }
[dir="rtl"] .login-names { font-style: normal; }
.login-welcome { font-size: 1.3rem; margin-top: 0.5rem; }
.login-subtitle { color: var(--ink-light); font-size: 0.92rem; margin-top: 0.5rem; margin-bottom: 1.6rem; }

.form-error {
    background: rgba(161, 59, 59, 0.08);
    border: 1px solid rgba(161, 59, 59, 0.3);
    color: var(--error);
    font-size: 0.85rem;
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    margin-bottom: 1.2rem;
}

.login-form, .admin-form { display: flex; flex-direction: column; gap: 1rem; text-align: start; }
.login-form label, .admin-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--ink-light); }
.login-form input, .admin-form input[type="text"] {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--tan);
    border-radius: var(--radius);
    background: var(--cream-lightest);
    color: var(--ink);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.login-form input:focus, .admin-form input[type="text"]:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(166, 128, 58, 0.15);
    outline: none;
}
.admin-checkbox { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }

/* ---------------------------------------------------------------------- */
/* Boutons                                                                */
/* ---------------------------------------------------------------------- */
/* Connexion : "Créer un compte" / "Se connecter" (login.v9.js).
   Deux boutons ; au clic les champs correspondants s'affichent juste dessous,
   au même endroit. Le bouton actif devient un bouton doré plein. */
.login-modes { display: flex; gap: 0.6rem; margin-bottom: 1.4rem; }
.login-modes .btn-gold {
    flex: 1 1 0;
    margin-top: 0;
    padding: 0.8rem 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}
.login-form[hidden] { display: none; }
.login-form:not([hidden]) { animation: loginPanelIn 0.35s ease both; }
@keyframes loginPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.login-form .form-error { margin-bottom: 0; }
.login-form .btn-gold { align-self: center; min-width: 11rem; }

/* "Mot de passe oublié ?" : petit lien sous le champ, qui déroule un message */
.login-forgot {
    align-self: flex-end;
    margin-top: -0.4rem;
    padding: 0.2rem 0;
    background: none; border: none;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--t-fast);
}
.login-forgot:hover { color: var(--gold); }
.login-note {
    background: rgba(198, 161, 91, 0.1);
    border: 1px solid rgba(198, 161, 91, 0.38);
    color: var(--ink-light);
    font-size: 0.85rem;
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    animation: loginPanelIn 0.3s ease both;
}
.login-note[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .login-form:not([hidden]), .login-note { animation: none; }
}

.btn-gold {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.85rem 1.8rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    border: none;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
[dir="rtl"] .btn-gold { text-transform: none; letter-spacing: normal; }
.btn-gold::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform var(--t-slow);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.btn-gold:hover::after { transform: translateX(100%); }

.btn-gold--outline {
    background: transparent;
    color: var(--gold-deep);
    border: 1px solid var(--gold-soft);
    box-shadow: none;
    margin-top: 1.2rem;
}
.btn-gold--outline::after { display: none; }
.btn-gold--outline:hover { background: var(--gold); color: var(--white); }

.btn-text-danger {
    background: none; border: none;
    font-size: 0.82rem;
    color: var(--ink-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-fast);
}
.btn-text-danger:hover { color: var(--error); }

/* ---------------------------------------------------------------------- */
/* Hero (accueil)                                                         */
/* ---------------------------------------------------------------------- */
.hero {
    position: relative;
    text-align: center;
    padding-block: 2rem 3rem;
}

.hero-title {
    font-family: var(--font-caps);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: clamp(2.4rem, 9vw, 4.2rem);
    margin-top: 0.6rem;
    line-height: 1.1;
    white-space: nowrap;
}
[dir="rtl"] .hero-title { letter-spacing: normal; text-transform: none; font-family: var(--font-heading-ar); }
.hero-names { font-family: var(--font-heading); font-style: italic; font-size: clamp(1.6rem, 5vw, 2.1rem); color: var(--gold-deep); }
[dir="rtl"] .hero-names { font-style: normal; }
.hero-date { font-size: 0.95rem; letter-spacing: 0.1em; color: var(--ink-light); margin-top: 0.3rem; }
.hero-hello { font-weight: 500; margin-top: 2rem; }
.hero-intro { max-width: 52ch; margin: 0.5rem auto 0; color: var(--ink-light); }

/* ---------------------------------------------------------------------- */
/* Compte à rebours                                                       */
/* ---------------------------------------------------------------------- */
.countdown-section { text-align: center; margin-block: 4rem; }
.countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.6rem, 2vw, 1.4rem);
    max-width: 560px;
    margin: 1.8rem auto 0;
}
.countdown-box {
    background: var(--cream-light);
    border: 1px solid var(--beige);
    border-radius: var(--radius-lg);
    padding: clamp(0.9rem, 3vw, 1.6rem) 0.4rem;
    box-shadow: var(--shadow-soft);
    transition: transform var(--t-fast);
}
.countdown-box:hover { transform: translateY(-4px); }
.countdown-num {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    color: var(--gold-deep);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.countdown-label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-light);
}
[dir="rtl"] .countdown-label { letter-spacing: normal; text-transform: none; }

/* Messages affichés à la place du compte à rebours (voir countdown.v9.js) :
   "Actuellement en cours" (animé) de l'heure de début jusqu'à la fin de la
   soirée, puis "Évènement terminé". La classe --live / --over est posée sur
   la section par le JS ; sans classe = compte à rebours classique. */
.countdown-status { display: none; padding-top: 0.5rem; }
.countdown-section--live .countdown-status--live,
.countdown-section--over .countdown-status--over { display: block; }
.countdown-section--live .section-title,
.countdown-section--over .section-title,
.countdown-section--live .countdown-grid,
.countdown-section--over .countdown-grid { display: none; }

.countdown-status-title {
    font-family: var(--font-caps);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 6.4vw, 2.8rem);
    line-height: 1.15;
    color: var(--gold-deep);
    text-wrap: balance;   /* "ACTUELLEMENT / EN COURS" plutôt qu'un mot seul sur la 2e ligne */
}
[dir="rtl"] .countdown-status-title { letter-spacing: normal; text-transform: none; font-family: var(--font-heading-ar); }
.countdown-status-text {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.15rem, 3.8vw, 1.55rem);
    color: var(--ink-light);
    margin-top: 0.8rem;
}
[dir="rtl"] .countdown-status-text { font-style: normal; }

/* "Actuellement en cours" : mini zoom / dézoom en boucle, comme un clignotement,
   sans aucun changement de couleur. */
.countdown-status--live { animation: statusPulse 2.2s ease-in-out infinite; }
@keyframes statusPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
    .countdown-status--live { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Cartes d'accès rapide                                                  */
/* ---------------------------------------------------------------------- */
.quicklinks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0;
}
.quicklink-card {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1.4rem 1.3rem;
    background: var(--cream-light);
    border: 1px solid var(--beige);
    border-radius: var(--radius-lg);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.quicklink-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: var(--gold-soft); }
.quicklink-title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--gold-deep); }
.quicklink-desc { font-size: 0.85rem; color: var(--ink-light); }

/* ---------------------------------------------------------------------- */
/* Grille d'informations (Date/Lieu, Infos pratiques)                     */
/* Traitement "carton d'invitation" : double bordure, filigrane étoile,   */
/* petites étoiles ✦ de part et d'autre des labels (clin d'œil au brief). */
/* ---------------------------------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(160deg, var(--cream-light), var(--cream-lightest));
    border: 1px solid var(--gold-soft);
    border-radius: var(--radius-lg);
    padding: 2rem 1.8rem;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.info-card::after {
    content: '';
    position: absolute;
    width: 140px; height: 140px;
    inset-inline-end: -50px;
    bottom: -50px;
    background: radial-gradient(circle, rgba(198, 161, 91, 0.16), transparent 70%);
    pointer-events: none;
}
.info-card--wide { grid-column: 1 / -1; }
.info-card-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-family: var(--font-caps);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--gold);
}
.info-card-label::before, .info-card-label::after {
    color: var(--gold-soft);
    font-size: 0.7em;
}
.info-card-label::before { content: '✦'; margin-inline-end: 0.5em; }
.info-card-label::after { content: '✦'; margin-inline-start: 0.5em; }
[dir="rtl"] .info-card-label { letter-spacing: normal; text-transform: none; font-family: var(--font-heading-ar); font-size: 0.95rem; }
.info-card-value { position: relative; z-index: 1; font-family: var(--font-heading); font-size: 1.5rem; margin-top: 0.5rem; }
.info-card-value--small { position: relative; z-index: 1; font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* Carte interactive (Date & Lieu)                                        */
/* ---------------------------------------------------------------------- */
.map-actions { text-align: center; margin-top: 1.6rem; }
.map-section { margin-top: 1.6rem; }
.map-embed {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--beige);
    box-shadow: var(--shadow-soft);
    aspect-ratio: 16 / 10;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.plan-table-figure {
    position: relative;
    z-index: 1;
    margin-top: 1.2rem;
    border-radius: var(--radius);
    border: 1px solid var(--beige);
    overflow: hidden;
}
.plan-table-img { display: block; width: 100%; height: auto; }

/* Mouvement du titre doré du plan de table (ondulation + reflets dorés).
   .plan-wave recouvre exactement le titre (mêmes positions que .plan-holo) avec
   une copie des MÊMES pixels (plan-de-table-title.png) : aucune couleur n'est
   ajoutée, seule la lumière de l'or bouge.
   1) Ondulation : le titre est découpé en 24 fines bandes verticales (clip-path,
      avec un léger recouvrement pour qu'aucune couture ne soit visible) qui
      montent et descendent, chacune décalée dans le temps de la précédente : une
      houle douce, en diagonale, parcourt le titre. Déplacements en % de la
      taille du titre : l'effet reste proportionné sur mobile.
   2) Reflets : dans chaque bande, deux bandes de lumière douces (de la couleur
      des reflets du texte, rgb(238,211,146)) glissent sur les lettres, l'une de
      haut en bas pendant que l'autre remonte, légèrement inclinées en sens
      contraire (diagonales). Mode « lighten » :
      elles éclaircissent les parties les moins lumineuses de l'or sans jamais
      toucher au fond (la couleur est plus sombre que le fond crème). Comme elles
      sont dans les bandes, elles ondulent avec les lettres. */
.plan-wave {
    position: absolute;
    left: 22.468%; top: 1.934%; width: 57.735%; height: 9.738%;
    pointer-events: none;
}
.plan-wave span {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(168deg, transparent 0%, rgba(238, 211, 146, 0) 6%, rgba(238, 211, 146, 0.8) 50%, rgba(238, 211, 146, 0) 94%, transparent 100%),
        linear-gradient(192deg, transparent 0%, rgba(238, 211, 146, 0) 6%, rgba(238, 211, 146, 0.8) 50%, rgba(238, 211, 146, 0) 94%, transparent 100%),
        url('../img/plan-de-table-title.png');
    background-size: 100% 46%, 100% 38%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 -85%, 0 161%, center;
    background-blend-mode: lighten, lighten, normal;
    clip-path: inset(0 calc(100% - (var(--i) + 1) * 4.1667% - 0.4%) 0 calc(var(--i) * 4.1667% - 0.4%));
    animation: planWave 9s ease-in-out infinite, planGleam 6s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.1875s), 0s;   /* houle : une demi-période sur la largeur du titre */
}
@keyframes planWave {
    0%, 50%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-0.8%, -5%); }
    75% { transform: translate(0.8%, 5%); }
}
@keyframes planGleam {
    from { background-position: 0 -85%, 0 161%, center; }
    to { background-position: 0 185%, 0 -61%, center; }
}
@media (prefers-reduced-motion: reduce) {
    .plan-wave { display: none; }
}

/* Effet "holographique" sur le titre doré du plan de table.
   .plan-holo est posé exactement sur le titre de l'image (positions en % de
   l'image, calées sur plan-de-table.png). Dedans, deux bandes irisées (rose /
   cyan / cœur blanc / violet / or) balaient le titre à tour de rôle (::before
   puis ::after, décalées d'une demi-période) : l'or d'origine reste riche entre
   deux passages.
   Mode « lighten » + couleurs toutes plus sombres que le fond crème de l'image
   (R,G <= 244 et B <= 233, alors que le fond est ~250/250/242) : seul l'or des
   lettres est éclairci, le fond ne change jamais. Pas besoin de masque : la
   lumière suit les lettres où qu'elles soient, y compris quand elles ondulent.
   Les .plan-holo-spark sont de petites étincelles qui scintillent sur les
   reflets de l'image. */
.plan-holo {
    position: absolute;
    left: 22.468%; top: 1.934%; width: 57.735%; height: 9.738%;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: lighten;
}
.plan-holo::before,
.plan-holo::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(105deg,
        transparent 43%,
        rgba(244, 70, 180, 0.78) 46%,
        rgba(40, 224, 233, 0.88) 48.5%,
        rgb(244, 244, 233) 50%,
        rgba(150, 95, 233, 0.82) 51.8%,
        rgba(244, 196, 60, 0.78) 54%,
        transparent 57%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0;
    animation: planHoloSweep 7s ease-in-out infinite;
}
.plan-holo::after { animation-delay: -3.5s; }
@keyframes planHoloSweep {
    0% { background-position: 100% 0; }
    35%, 100% { background-position: 0% 0; }
}

.plan-holo-spark {
    position: absolute;
    width: 6.5%;
    aspect-ratio: 1;
    pointer-events: none;
    background:
        radial-gradient(circle, #fff 0 7%, rgba(255, 244, 205, 0.85) 14%, rgba(255, 226, 150, 0) 56%),
        linear-gradient(90deg, transparent 8%, #fff 50%, transparent 92%) center / 100% 4% no-repeat,
        linear-gradient(0deg, transparent 8%, #fff 50%, transparent 92%) center / 4% 100% no-repeat;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: planSpark 3.6s ease-in-out infinite;
}
.plan-holo-spark:nth-of-type(1) { left: 26.93%; top: 10.36%; animation-delay: 0s; }
.plan-holo-spark:nth-of-type(2) { left: 57.09%; top: 3.28%;  animation-delay: 1.3s; }
.plan-holo-spark:nth-of-type(3) { left: 58.70%; top: 10.26%; animation-delay: 2.5s; }
.plan-holo-spark:nth-of-type(4) { left: 75.28%; top: 3.73%;  animation-delay: 0.7s; }
@keyframes planSpark {
    0%, 60%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    76% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; }
    90% { transform: translate(-50%, -50%) scale(0.25) rotate(90deg); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .plan-holo, .plan-holo-spark { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Plan de table : cliquable + visionneuse zoomable (plan-viewer.v9.js)    */
/* ---------------------------------------------------------------------- */
.plan-table-figure[data-plan-viewer] { cursor: zoom-in; }
.plan-table-figure[data-plan-viewer]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.plan-zoom-badge {
    position: absolute;
    bottom: 0.7rem; inset-inline-end: 0.7rem;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(248, 242, 231, 0.94);
    border: 1px solid var(--gold-soft);
    color: var(--gold-deep);
    box-shadow: 0 4px 14px rgba(138, 106, 46, 0.28);
    pointer-events: none;
    transition: transform var(--t-fast);
}
.plan-zoom-badge svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.plan-table-figure[data-plan-viewer]:hover .plan-zoom-badge { transform: scale(1.1); }

html.plan-viewer-open, html.plan-viewer-open body { overflow: hidden; }
.plan-viewer {
    position: fixed; inset: 0; z-index: 120;
    display: none;
    background: rgba(14, 10, 4, 0.96);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.plan-viewer.is-open { display: block; animation: planViewerIn 0.25s ease; }
@keyframes planViewerIn { from { opacity: 0; } to { opacity: 1; } }
.plan-viewer-stage {
    position: absolute; inset: 0;
    overflow: hidden;
    touch-action: none;
    cursor: default;
    user-select: none; -webkit-user-select: none;
}
.plan-viewer-stage.is-zoomed { cursor: grab; }
.plan-viewer-stage.is-grabbing { cursor: grabbing; }
.plan-viewer-img {
    position: absolute; left: 50%; top: 50%;
    max-width: none;
    transform-origin: 50% 50%;
    will-change: transform;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(198, 161, 91, 0.28), 0 0 140px rgba(198, 161, 91, 0.14);
    user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
    pointer-events: none;
}
.plan-viewer-img.is-animating { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.plan-viewer-bar {
    position: absolute; left: 50%;
    bottom: max(1.1rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    background: rgba(22, 16, 8, 0.8);
    border: 1px solid rgba(198, 161, 91, 0.55);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.plan-viewer-btn, .plan-viewer-close {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    transition: background var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.plan-viewer-btn:hover, .plan-viewer-close:hover { background: rgba(198, 161, 91, 0.28); }
.plan-viewer-btn:focus-visible, .plan-viewer-close:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.plan-viewer-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.plan-viewer svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.plan-viewer-level {
    min-width: 3.6em;
    text-align: center;
    color: var(--cream-light);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.plan-viewer-close {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top)); inset-inline-end: 1rem;
    background: rgba(22, 16, 8, 0.8);
    border: 1px solid rgba(198, 161, 91, 0.55);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
    .plan-viewer.is-open { animation: none; }
    .plan-viewer-img.is-animating { transition: none; }
}

.placeholder-text {
    position: relative; z-index: 1;
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    background: var(--cream-lightest);
    border: 1px dashed var(--tan);
    border-radius: var(--radius);
    color: var(--ink-light);
    font-style: italic;
    font-size: 0.92rem;
}
.placeholder-text--center { text-align: center; grid-column: 1 / -1; }

/* ---------------------------------------------------------------------- */
/* Bloc de prose (traditions)                                             */
/* ---------------------------------------------------------------------- */
.prose-block { margin-bottom: 3.5rem; text-align: center; }
.prose-text { font-size: 1.08rem; color: var(--ink); max-width: 68ch; margin-inline: auto; }
.prose-text + .prose-text { margin-top: 1.5rem; }

/* ---------------------------------------------------------------------- */
/* Timeline (programme)                                                   */
/* ---------------------------------------------------------------------- */
.timeline { position: relative; max-width: 560px; margin: 0 auto; padding-inline-start: 1.6rem; }
.timeline::before {
    content: '';
    position: absolute; top: 0; bottom: 0;
    inset-inline-start: 5px;
    width: 1px;
    background: linear-gradient(var(--beige), var(--gold-soft), var(--beige));
}
.timeline-item { position: relative; display: flex; align-items: baseline; gap: 1rem; padding-block: 0.9rem; }
.timeline-dot {
    position: absolute; inset-inline-start: -1.6rem;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--cream-lightest);
    border: 2px solid var(--gold);
}
.timeline-time { font-family: var(--font-heading); font-weight: 600; color: var(--gold-deep); min-width: 4.2em; }
.timeline-label { color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* FAQ accordéon                                                          */
/* ---------------------------------------------------------------------- */
.faq-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.8rem; }
.faq-item { background: var(--cream-light); border: 1px solid var(--beige); border-radius: var(--radius-lg); overflow: hidden; }
.faq-question {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    background: none; border: none;
    padding: 1.2rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    text-align: start;
    color: var(--ink);
}
.faq-icon { color: var(--gold); font-size: 1.3rem; transition: transform var(--t-fast); flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--t-medium), padding var(--t-medium); }
.faq-answer p { padding: 0 1.5rem 1.2rem; color: var(--ink-light); }
.faq-item.open .faq-answer { max-height: 600px; }

/* ---------------------------------------------------------------------- */
/* Galerie & upload                                                       */
/* ---------------------------------------------------------------------- */
.upload-section { max-width: 560px; margin: 0 auto 3rem; }
.upload-form { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.upload-drop {
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 2.4rem 1.5rem;
    background: var(--cream-light);
    border: 2px dashed var(--tan);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--ink-light);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.upload-drop:hover, .upload-drop.dragover { border-color: var(--gold); background: var(--cream-lightest); }
.upload-icon {
    width: 42px; height: 42px; line-height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gold-soft);
    color: var(--gold);
    font-size: 1.6rem;
}
.upload-hint { font-size: 0.85rem; }
.upload-filelist { font-size: 0.82rem; color: var(--ink-light); text-align: center; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}
.gallery-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--cream-light);
    box-shadow: var(--shadow-soft);
    transition: transform var(--t-fast);
}
.gallery-item:hover { transform: scale(1.03); z-index: 2; }
.gallery-media { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.gallery-caption {
    position: absolute; inset-inline: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--white);
    font-size: 0.76rem;
    padding: 1.2rem 0.6rem 0.4rem;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.gallery-item:hover .gallery-caption { opacity: 1; }
@media (hover: none) {
    /* Pas de souris = pas de survol possible : la légende (auteur de la
       photo) doit rester visible en permanence, sinon elle est invisible
       sur 100% des téléphones. */
    .gallery-caption { opacity: 1; }
}

.lightbox {
    position: fixed; inset: 0; z-index: 60;
    background: #000;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-medium);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
    max-width: 90vw; max-height: 85vh;
    border-radius: var(--radius);
    box-shadow: 0 0 60px rgba(198, 161, 91, 0.28), 0 0 140px rgba(198, 161, 91, 0.14);
}
.lightbox-close {
    position: absolute; top: 1.5rem; inset-inline-end: 1.5rem;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(198, 161, 91, 0.4);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.5rem;
    line-height: 1;
    transition: box-shadow var(--t-fast);
}
.lightbox-close:hover { box-shadow: 0 0 20px rgba(198, 161, 91, 0.5); }

/* ---------------------------------------------------------------------- */
/* Administration                                                         */
/* ---------------------------------------------------------------------- */
.admin-add {
    max-width: 480px; margin: 0 auto 3.5rem;
    background: var(--cream-light);
    border: 1px solid var(--beige);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
}
.admin-list { max-width: 720px; margin: 0 auto; }
.admin-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--beige); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--cream-light); font-size: 0.9rem; }
.admin-table th, .admin-table td { padding: 0.85rem 1rem; text-align: start; border-bottom: 1px solid var(--beige); }
.admin-table th { font-family: var(--font-caps); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; color: var(--ink-light); }
[dir="rtl"] .admin-table th { letter-spacing: normal; text-transform: none; font-family: var(--font-heading-ar); }
.admin-table tr:last-child td { border-bottom: none; }
.role-badge { font-size: 0.8rem; padding: 0.25rem 0.7rem; border-radius: 20px; background: var(--tan); color: var(--ink); }
.role-badge--admin { background: var(--gold); color: var(--white); }

/* ---------------------------------------------------------------------- */
/* Pied de page — toujours ancré en bas (voir main.page en display:flex)  */
/* ---------------------------------------------------------------------- */
.site-footer {
    text-align: center;
    margin-top: auto;
    padding-top: 2.2rem;
    border-top: 1px solid var(--beige);
    color: var(--ink-light);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.05rem;
}
[dir="rtl"] .site-footer { font-style: normal; }

/* ---------------------------------------------------------------------- */
/* Animations au scroll (reveal)                                          */
/* ---------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.active { opacity: 1; transform: none; }
.reveal[data-reveal="zoom"] { transform: scale(0.88); }
.reveal[data-reveal="zoom"].active { transform: scale(1); }
.reveal[data-reveal="left"] { transform: translateX(-36px); }
.reveal[data-reveal="left"].active { transform: translateX(0); }
.reveal[data-reveal="right"] { transform: translateX(36px); }
.reveal[data-reveal="right"].active { transform: translateX(0); }
[dir="rtl"] .reveal[data-reveal="left"] { transform: translateX(36px); }
[dir="rtl"] .reveal[data-reveal="right"] { transform: translateX(-36px); }

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */
@media (max-width: 720px) {
    main.page { padding-top: 7.8rem; }
    .quicklinks, .info-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .countdown-grid { gap: 0.5rem; }
}
@media (max-width: 420px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}

/* ---------------------------------------------------------------------- */
/* v10 : deconnexion en POST, bouton avec l'apparence de l'ancien lien     */
/* ---------------------------------------------------------------------- */
.drawer-logout-form { margin: 0; padding: 0; }
button.drawer-logout {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; font-size: 0.85rem; letter-spacing: 0.05em;
    color: var(--ink-light); cursor: pointer; text-align: inherit;
}
button.drawer-logout:hover, button.drawer-logout:focus-visible { color: var(--error); }

/* v11 : bouton Deconnexion un peu plus grand (texte + zone cliquable) */
button.drawer-logout {
    font-size: 0.95rem;
    padding: 0.45em 0;
}