/* Fluctuat sur gabarit Eston - identite de marque (mode clair, or & charbon) */

:root{
  --eston-font: 'Work Sans', sans-serif !important;
  --eston-font-two: 'Work Sans', sans-serif !important;
  --eston-base: #C9A227 !important;
  --eston-base-rgb: 201, 162, 39 !important;
  --eston-black: #0D1013 !important;
  --eston-black-rgb: 13, 16, 19 !important;

  --dk-bg: #ffffff;
  --dk-bg-2: #f2eee3;
  --dk-card: #ffffff;
  --dk-card-hover: #fbf9f4;
  --dk-border: #e4dfd3;
  --dk-border-soft: #ede9de;
  --dk-text: #0d1013;
  --dk-text-muted: #42474b;
  --dk-accent: #C9A227;
  --dk-accent-soft: #e4cd7a;
  --dk-accent-text: #8a6d2f; /* variante fonc\00e9e de l'or, lisible en texte sur fond clair */
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* ---------- Base ---------- */
html, body{ background-color: var(--dk-bg) !important; }
body{ color: var(--dk-text-muted); font-family: 'Work Sans', sans-serif; }

/* Toutes les photos de banniere de page restent en noir et blanc, meme si
   la source est en couleur - coherence visuelle garantie sur tout le site. */
.page-header__bg{ filter: grayscale(1); }

/* Bouton "haut de page" : le gabarit de base le laisse en carre blanc a
   coins droits, sans ombre - avait l'air d'un element casse/non fini,
   surtout en flottant juste au-dessus du bas du footer sur mobile. */
.scroll-to-top{
  border-radius: 50% !important; box-shadow: 0 8px 22px rgba(13,16,19,.18);
  border: 1px solid var(--dk-border-soft);
}
.scroll-to-top:hover{ background-color: var(--dk-accent) !important; }
.scroll-to-top i{ color: var(--dk-text); }
.scroll-to-top:hover i{ color:#17140f; }
@media (max-width: 767px){
  .scroll-to-top{ width:46px !important; height:46px !important; bottom:18px !important; right:18px !important; }
  .scroll-to-top i{ line-height:46px !important; font-size:14px; }
}

/* ---------- Echelle de titres par defaut ----------
   Le gabarit de base ne fixe que la couleur et la police pour h1-h6 ;
   la taille depend entierement de la classe du composant. Ce bloc donne
   une taille coherente aux titres SANS classe specifique (ex: <h2> nu),
   sans toucher aux classes existantes (.section-title__title, etc.) qui
   restent prioritaires la ou elles sont deja appliquees. */
h1{ font-size: 42px; line-height: 1.2; font-weight: 700; }
h2{ font-size: 32px; line-height: 1.3; font-weight: 700; }
h3{ font-size: 24px; line-height: 1.35; font-weight: 700; }
h4{ font-size: 18px; line-height: 1.4; font-weight: 700; }
h5{ font-size: 15px; line-height: 1.4; font-weight: 600; }
@media (max-width: 767px){
  h1{ font-size: 30px; }
  h2{ font-size: 26px; }
  h3{ font-size: 20px; }
  h4{ font-size: 17px; }
}

/* Le gabarit de base cible ".page-header__inner h2" (titre de banniere de
   page) ; les titres de page sont maintenant des h1 (correction SEO), donc
   on reprend exactement les memes valeurs pour h1 ici. */
.page-header__inner h1{
  font-weight: 700; font-size: 80px; line-height: 80px;
  letter-spacing: -0.02em; color: var(--eston-white); margin-top: 26px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
  .page-header__inner h1{ font-size: 50px; line-height: 60px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px){
  .page-header__inner h1{ font-size: 40px; line-height: 50px; margin-top: 15px; }
}
@media only screen and (max-width: 767px){
  .page-header__inner h1{ font-size: 35px; line-height: 45px; margin-top: 15px; }
}

/* Prechargeur : pas de fond du tout (la page elle-meme reste visible) —
   juste l'icone radar (SVG autonome, animee nativement) flottant au centre. */
.preloader{ background-color: transparent !important; transition: opacity .6s cubic-bezier(.4,0,.2,1); }
.preloader__image{
  background-image: url(../images/loader-radar.svg) !important; background-size: 72px auto !important;
  animation: none !important;
}
/* Fondu de sortie avant de naviguer vers une autre page (reveal.js) */
.preloader.is-exiting{ opacity: 1 !important; display: flex !important; }

/* ---------- Header / nav ---------- */
.main-header{ background-color: #ffffff !important; box-shadow: 0 2px 16px rgba(13,16,19,.07); }
.stricky-header{ background-color: #ffffff !important; box-shadow: 0 2px 18px rgba(13,16,19,.08); }
.main-menu__list > li > a{
  color: var(--dk-text) !important; font-size: 16px !important;
  position: relative; padding-bottom: 4px !important;
  transition: color .18s ease, transform .18s ease !important;
}
.main-menu__list > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--dk-accent); border-radius:2px;
  transform: scaleX(0); transform-origin:left; transition: transform .22s ease;
}
.main-menu__list > li > a:hover{ transform: translateY(-1px) scale(1.04); }
.main-menu__list > li > a:hover::after,
.main-menu__list > li.current > a::after{ transform: scaleX(1); }
.main-menu__list > li > ul{ background-color: var(--dk-card) !important; box-shadow: 0 12px 30px rgba(13,16,19,.12); }
.main-menu__list > li > ul li a{ color: var(--dk-text-muted) !important; }
.main-menu__list > li > ul li a:hover{ color: var(--dk-accent) !important; }

/* ---------- Menu mobile : le gabarit de base prevoit un panneau sombre, on le passe en mode clair ---------- */
.main-menu .mobile-nav__toggler{ color: var(--dk-text) !important; }
.mobile-nav__close{ color: var(--dk-text) !important; }
.mobile-nav__content{ background-color: var(--dk-bg) !important; }
.mobile-nav__container{ background-color: var(--dk-bg) !important; border-color: var(--dk-border-soft) !important; }
.mobile-nav__content .main-menu__list > li:not(:last-child),
.mobile-nav__content .main-menu__list > li > ul > li:not(:last-child),
.mobile-nav__content .main-menu__list > li > ul > li > ul > li:not(:last-child){ border-bottom-color: var(--dk-border-soft) !important; }
.mobile-nav__content .main-menu__list > li > ul,
.mobile-nav__content .main-menu__list > li > ul > li > ul{ border-top-color: var(--dk-border-soft) !important; }
.mobile-nav__social a, .mobile-nav__contact li a{ color: var(--dk-text) !important; }
.mobile-nav__contact li{ color: var(--dk-text-muted) !important; }

/* ---------- Brand lockup ---------- */
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand-mark{ width:42px; height:32px; flex:none; color: var(--dk-accent); }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family: 'Work Sans', sans-serif;
  font-weight: 700; font-size: 24px; letter-spacing:.2px;
  color: var(--dk-text) !important;
}
.brand-tag{
  font-family: 'Work Sans', sans-serif;
  font-size: 9.5px; font-weight: 500; letter-spacing:.8px; text-transform: uppercase;
  color: var(--dk-text-muted); margin-top: 3px; white-space: nowrap;
}
@media (max-width: 1200px){ .brand-tag{ display:none; } }

/* ---------- Language switcher (dropdown a drapeaux) ---------- */
.lang-switch{ position:relative; margin-left: 18px; }
.lang-switch__trigger{
  display:flex; align-items:center; gap:8px;
  font-family: 'Work Sans', sans-serif; font-size:13px; font-weight:600; letter-spacing:.3px;
  color: var(--dk-text) !important; background:#fff; border: 1px solid rgba(13,16,19,.16);
  border-radius: 999px; padding: 6px 12px 6px 10px; cursor:pointer; user-select:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lang-switch__trigger:hover{ border-color: var(--dk-accent); box-shadow: 0 4px 14px rgba(201,162,39,.15); }
.lang-switch__flag{ width:18px; height:13px; border-radius:3px; object-fit:cover; flex:none; box-shadow: 0 0 0 1px rgba(13,16,19,.1); }
.lang-switch__chev{
  width:8px; height:8px; border-right:1.6px solid var(--dk-text-muted); border-bottom:1.6px solid var(--dk-text-muted);
  transform: rotate(45deg) translateY(-1px); transition: transform .25s ease;
}
.lang-switch.open .lang-switch__chev{ transform: rotate(225deg) translateY(1px); }
.lang-switch__menu{
  position:absolute; top: calc(100% + 10px); right:0; min-width: 168px;
  background:#fff; border:1px solid var(--dk-border-soft); border-radius:12px;
  box-shadow: 0 16px 40px rgba(13,16,19,.14);
  padding:7px; opacity:0; visibility:hidden; transform: translateY(-6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 999;
}
.lang-switch.open .lang-switch__menu{ opacity:1; visibility:visible; transform: translateY(0) scale(1); }
.lang-switch__item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  color: var(--dk-text-muted) !important; text-decoration:none; font-size:14px; font-weight:500;
  transition: background .15s ease, color .15s ease;
}
.lang-switch__item:hover{ background: #f6f2e6; color: var(--dk-text) !important; }
.lang-switch__item.active{ color: var(--dk-text) !important; font-weight:700; background: #f6f2e6; }

/* Variante footer : pas de decalage a gauche, menu qui s'ouvre vers le
   haut (le footer est en bas de page, un menu vers le bas sortirait du
   viewport). */
.lang-switch--footer{ margin-left:0; }
.lang-switch--footer .lang-switch__menu{ top:auto; bottom: calc(100% + 10px); right:auto; left:0; }
.lang-switch--footer .lang-switch__trigger{ background: var(--dk-bg-2); }

/* ---------- Buttons ---------- */
.thm-btn{
  background: linear-gradient(135deg, #e4cd7a, var(--dk-accent)) !important;
  color: #17140f !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(201,162,39,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Le gabarit de base fait un "flip" (scaleX + rotateX, linear, 0.4s) d'un
   bloc plat derriere le bouton au survol - pensé pour reveler un fond
   sombre sur un bouton blanc a l'origine. Ici le bouton est deja un
   degrade or au repos : le flip ne fait plus que creer un a-plat qui
   tranche avec le degrade, un accroc pas raffiné. Neutralise
   completement - le survol se limite au leger soulevement + halo.  */
.thm-btn:after{ content:none !important; }
.thm-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(201,162,39,.34); color:#17140f !important; }
.thm-btn:hover span, .thm-btn:hover i{ color:#17140f !important; }
.thm-btn .fa-long-arrow-alt-right{ display:inline-block; transition: transform .25s ease; }
.thm-btn:hover .fa-long-arrow-alt-right{ transform: translateX(4px); }

/* ---------- Onglets / liens secondaires : survol homogene ---------- */
.brand-hero__btn-ghost{ transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.brand-hero__btn-ghost:hover{ transform: translateY(-2px); }
.tab-buttons .tab-btn span{ transition: color .2s ease; }
.tab-buttons .tab-btn:hover span{ color: var(--dk-accent-text); }
.auth-tabs span{ transition: color .2s ease, border-color .2s ease; }
.auth-tabs span:hover{ color: var(--dk-text); }
.services-one__read-more, .project-one__read-more a, .news-one__read-more a{ transition: color .2s ease, transform .2s ease; display:inline-block; }
.services-one__read-more:hover, .project-one__read-more a:hover, .news-one__read-more a:hover{ transform: translateX(3px); }

/* Icones des 4 cartes "coup d'oeil" : le gabarit fournissait des PNG rouges hors charte */
.services-one__icon i{
  font-size: 64px; line-height:1; display:inline-block; color: var(--dk-accent);
  transition: all 500ms linear; transition-delay: .1s; transform: scale(1);
}
.services-one__single:hover .services-one__icon i{ transform: scale(0.9); }

/* ---------- Section titles ---------- */
.section-title__tagline{ color: var(--dk-accent-text) !important; }
.section-title__title{ color: var(--dk-text) !important; font-family: 'Work Sans', sans-serif; font-weight: 700; }
.section-title__title-box p{ color: var(--dk-text-muted) !important; }

/* ---------- About ---------- */
.about-one, .about-three{ background-color: var(--dk-bg); }
.about-one .row{ align-items: center; }
.about-one__img > img{ max-width: 100%; height: auto; }
.about-one__img-2{ max-width: 220px; }
.about-one__img-2 > img{ width: 100%; height: auto; display: block; }
.about-one__img-2::before{ background-color: var(--dk-accent) !important; }
/* Le gabarit de base decalait le texte de 85px pour une composition a deux photos qu'on n'utilise plus - image et texte alignes sur le meme axe */
.about-one__left{ margin-right: 60px; }
.about-one__right{ margin-top: 0; margin-left: 60px; margin-right: 0; }
.about-one__text, .tabs-one__text{ color: var(--dk-text-muted) !important; }
.tab-buttons .tab-btn span{ color: var(--dk-text-muted); }
.tab-buttons .tab-btn.active-btn span{ color: var(--dk-accent); }

/* ---------- Services ---------- */
.services-one, .services-two, .services-four{ background-color: var(--dk-bg-2); }
.services-one__single{
  border-color: var(--dk-border-soft) !important;
  background-color: var(--dk-card);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.services-one__single:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13,16,19,.1);
  border-color: var(--dk-accent-soft) !important;
}
.services-one__title a{ color: var(--dk-text) !important; }
.services-one__title a:hover{ color: var(--dk-accent) !important; }
.services-one__text{ color: var(--dk-text-muted) !important; }
.services-one__read-more{ color: var(--dk-accent) !important; }

/* ---------- Project list (home teaser) ---------- */
.project-one{ background-color: var(--dk-bg); }
.project-one__list li{ border-color: var(--dk-border-soft) !important; transition: background-color .3s ease; }
.project-one__list li:hover{ background-color: var(--dk-card-hover); }
.project-one__list-year p{ color: var(--dk-text-muted) !important; }
.project-one__list-title h5{ color: var(--dk-text) !important; }
.project-one__director p, .project-one__budget p{ color: var(--dk-text-muted) !important; }
.project-one__director p span, .project-one__budget p span{ color: var(--dk-text) !important; }
.project-one__read-more a{ color: var(--dk-accent) !important; }

/* ---------- Project details ---------- */
.project-details{ background-color: var(--dk-bg); }
.project-details__title, .project-details__title-2{ color: var(--dk-text) !important; }
.project-details__text-1, .project-details__text-2, .project-details__text-3, .project-details__text-4{ color: var(--dk-text-muted) !important; }
.project-details__short-details{ background-color: var(--dk-card); border: 1px solid var(--dk-border-soft); }
.project-details__short-details h3{ color: var(--dk-text) !important; }
.project-details__short-details-list p{ color: var(--dk-text-muted) !important; }
.project-details__short-details-list p span{ color: var(--dk-accent) !important; }

/* ---------- News / journal ---------- */
.news-one{ background-color: var(--dk-bg-2); }
.news-one__img{ aspect-ratio: 4/3; }
.news-one__img img{ height: 100%; object-fit: cover; }
.project-one__list li{ overflow: hidden; }
.project-one__img{ width: 160px; height: 160px; overflow: hidden; border-radius: 6px; }
.project-one__img img{ width: 100%; height: 100%; object-fit: cover; }
.news-one__sub-title p{ color: var(--dk-accent) !important; }
.news-one__date p{ color: var(--dk-text-muted) !important; }
.news-one__title a{ color: var(--dk-text) !important; }
.news-one__title a:hover{ color: var(--dk-accent) !important; }
.news-one__read-more a{ color: var(--dk-accent) !important; }

/* ---------- Video ---------- */
.video-one{ background-color: var(--dk-bg); }

/* ---------- Team ---------- */
.team-one{ background-color: var(--dk-bg-2); }
.team-one__content p{ color: var(--dk-text-muted) !important; }
.team-one__content h3 a{ color: var(--dk-text) !important; }

/* ---------- Contact ---------- */
.contact-page{ background-color: var(--dk-bg-2); }
.contact-page__single{ border-color: var(--dk-border-soft) !important; }
.contact-page__title, .contact-page__title a{ color: var(--dk-text) !important; }
.contact-page__text{ color: var(--dk-text-muted) !important; }
.contact-one{ background-color: var(--dk-bg); }
/* Champs "carte epuree" : coins arrondis, icone fine a gauche (plus de
   gros bloc d'icone separe par une ligne a droite), ombre doree douce
   au focus plutot qu'un simple changement de bordure. Option B validee
   dans propositions/champs-formulaire.html. */
.contact-one__input-box{
  background-color: var(--dk-bg-2) !important; border: 1.5px solid var(--dk-border) !important;
  border-radius: 10px !important; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.contact-one__input-box:focus-within{
  background-color: var(--dk-card) !important; border-color: var(--dk-accent) !important;
  box-shadow: 0 4px 16px rgba(201,162,39,.18);
}
/* Erreur de validation "maison" (formulaire de dons) : remplace la bulle
   native du navigateur, jamais traduite selon la langue de la page et
   au style generique hors charte. */
.contact-one__input-box.has-error{
  background-color: #fdf3f2 !important; border-color: #d97463 !important;
}
#donateError{
  background: #fdf3f2; border: 1px solid #f1c3ba; border-radius: 8px; padding: 10px 14px;
}
#donateError::before{ content:"⚠ "; }
/* Formulaire de contact : meme traitement que #donateError pour les erreurs, meme famille
   de couleurs douces pour la confirmation. "contact-hp" est le champ piege anti-robot :
   hors ecran plutot que display:none, que certains robots savent ignorer. */
#contactStatus{ margin-bottom:16px; padding:10px 14px; border-radius:8px; font-size:14px; }
#contactStatus.contact-status-error{ background:#fdf3f2; border:1px solid #f1c3ba; color:#b23; }
#contactStatus.contact-status-error::before{ content:"⚠ "; }
#contactStatus.contact-status-ok{ background:#f4f7ee; border:1px solid #cfdcae; color:#3f5a1d; }
.contact-hp{ position:absolute !important; left:-9999px; width:1px !important; height:1px !important; opacity:0; pointer-events:none; }
.contact-privacy-note{ margin:14px 0 0; font-size:12.5px; color:var(--dk-text-muted); }
.contact-privacy-note a{ color:inherit; text-decoration:underline; }
/* Regle non restreinte par type= (le gabarit de base ne retire la bordure
   navigateur que sur type="text"/"email" - un type="number" comme le
   montant libre du don gardait donc son cadre gris natif, visible en
   double avec notre propre boite). */
.contact-one__input-box input,
.contact-one__input-box textarea,
.contact-one__input-box select{
  display:block; width:100%; height:60px;
  border:none !important; outline:none !important; box-shadow:none !important;
  background-color: transparent !important;
  color: var(--dk-text) !important;
  font-family: 'Work Sans', sans-serif; font-size:14px; font-weight:400;
  padding: 0 20px 0 46px !important;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.contact-one__input-box textarea{
  height:auto; min-height:130px; padding-top:16px !important; padding-bottom:16px !important; resize:vertical;
}
.contact-one__input-box input::-webkit-outer-spin-button,
.contact-one__input-box input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.contact-one__input-box input[type="number"]{ -moz-appearance:textfield; }
.contact-one__input-box input::placeholder, .contact-one__input-box textarea::placeholder{ color: var(--dk-text-muted) !important; opacity: 1; }
.contact-one__input-box select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2342474b' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 20px center !important;
  padding-right: 46px !important;
}
.contact-one__input-box select:invalid{ color: var(--dk-text-muted) !important; }
/* Icone deplacee a gauche, sans la ligne verticale de separation du gabarit de base. */
.contact-one__icon{ left: 16px; right:auto; }
.contact-one__icon::before{ content:none; }
.contact-one__icon span{ color: var(--dk-accent-text) !important; font-size: 15px; }
.contact-one__icon-2{ top: 22px; transform:none; }
.contact-one__logo a{ color: var(--dk-text) !important; }

/* ---------- Dons : montants rapides, case a cocher, mur de remerciements ---------- */
.donate-amount-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.donate-amount-btn{
  font-family:'Work Sans', sans-serif; font-weight:700; font-size:14px;
  background: var(--dk-card); color: var(--dk-text); border:1px solid var(--dk-border-soft);
  border-radius:8px; padding:12px 20px; cursor:pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}
.donate-amount-btn:hover{ border-color: var(--dk-accent); transform: translateY(-1px); }
.donate-amount-btn.active{
  background: linear-gradient(135deg, var(--dk-accent-soft), var(--dk-accent));
  color:#17140f; border-color: transparent;
}
.donate-checkbox-row{
  display:flex; align-items:flex-start; gap:10px; margin:4px 0 22px; cursor:pointer;
  font-size:13.5px; color: var(--dk-text-muted); line-height:1.5;
}
.donate-checkbox-row input{ margin-top:3px; flex:none; accent-color: var(--dk-accent); }
.donors-wall{ display:flex; flex-wrap:wrap; gap:10px; }
.donor-chip{
  background: var(--dk-card); border:1px solid var(--dk-border-soft); border-radius:999px;
  padding:9px 16px; display:flex; align-items:center; gap:8px; font-size:13.5px;
}
.donor-chip strong{ color: var(--dk-text); font-weight:700; }
.donor-chip span{ color: var(--dk-accent-text); font-weight:600; }

/* ---------- Footer ---------- */
.site-footer{ background-color: var(--dk-bg-2); }
/* Bloc centre plutot qu'aligne a gauche avec un grand vide a droite (3
   colonnes sur une grille a 4) - vu que le contenu est maintenant plus
   condense (dropdown langue au lieu d'une liste de 3 liens). */
.site-footer__top .row{ justify-content:center; text-align:center; }
.site-footer__top .footer-widget__column{ display:inline-flex; flex-direction:column; align-items:center; }
.site-footer__top .footer-widget__services-list,
.site-footer__top .footer-widget__pages-list{ text-align:center; }
/* Plus compact que le gabarit de base (padding/marges pensees pour un
   footer a 4 colonnes denses, trop genereuses pour nos 3 blocs centres). */
.site-footer__top{ padding-bottom: 70px; }
.footer-widget__title-box{ margin-bottom: 22px; }
@media (max-width: 767px){
  .site-footer__top{ padding-bottom: 40px; }
  .footer-widget__services, .footer-widget__pages{ margin-top: 30px !important; }
  .footer-widget__title-box{ margin-bottom: 16px; }
  .footer-widget__services-list li+li, .footer-widget__pages-list li+li{ margin-top: 8px; }
}
.footer-widget__title, .footer-widget-two__title{ color: var(--dk-text) !important; }
.footer-widget__services-list a, .footer-widget__pages-list a,
.footer-widget-two__services-list a, .footer-widget-two__pages-list a{
  color: var(--dk-text-muted) !important; display:inline-block;
  transition: color .15s ease, transform .15s ease;
}
.footer-widget__services-list a:hover, .footer-widget__pages-list a:hover,
.footer-widget-two__services-list a:hover, .footer-widget-two__pages-list a:hover{
  color: var(--dk-accent) !important; transform: translateX(3px);
}
.footer-widget__about-text, .site-footer__bottom-text{ color: var(--dk-text-muted) !important; }
.footer-widget__contact a{
  color: var(--dk-accent) !important; font-weight:600;
  transition: opacity .15s ease;
}
.footer-widget__contact a:hover{ opacity:.75; }
.site-footer-two__title{ color: var(--dk-text) !important; }
.site-footer__bottom{ border-top: 1px solid var(--dk-border-soft) !important; }

/* ---------- Maquette banner (portail client) ---------- */
.maquette-banner{
  background: linear-gradient(135deg, rgba(201,162,39,.12), rgba(201,162,39,.04));
  border: 1px dashed var(--dk-accent-soft);
  border-radius: 8px; padding: 16px 20px; margin-bottom: 34px;
  color: var(--dk-text-muted); font-size: 14px;
  display: flex; align-items: center; gap: 12px;
}
.maquette-banner strong{ color: var(--dk-accent); }

/* ---------- Portail client: auth mockup ---------- */
.auth-card{
  background: var(--dk-card); border: 1px solid var(--dk-border-soft); border-radius: 10px;
  padding: 30px; box-shadow: 0 10px 26px rgba(13,16,19,.08);
}
.auth-tabs{ display:flex; gap:6px; margin-bottom:22px; border-bottom:1px solid var(--dk-border-soft); }
.auth-tabs span{ padding: 8px 4px 12px; font-size: 13px; letter-spacing:.4px; color: var(--dk-text-muted); border-bottom: 2px solid transparent; cursor:pointer; }
.auth-tabs span.active{ color: var(--dk-text); border-color: var(--dk-accent); }
.auth-card .field{ margin-bottom: 16px; }
.auth-card input{
  width:100%; background: var(--dk-bg-2); border:1.5px solid var(--dk-border); border-radius:10px;
  color: var(--dk-text); padding: 14px 16px; font-family:'Work Sans',sans-serif; font-size:14.5px;
  outline:none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.auth-card input:focus{ background: var(--dk-card); border-color: var(--dk-accent); box-shadow: 0 4px 16px rgba(201,162,39,.18); }
.auth-card input::placeholder{ color: var(--dk-text-muted); }
.auth-card .thm-btn{ width:100%; text-align:center; }

/* ---------- Portail client: catalogue ---------- */
.catalog-card{
  position: relative; background: var(--dk-card); border: 1px solid var(--dk-border-soft);
  border-radius: 10px; overflow: hidden; box-shadow: 0 10px 26px rgba(13,16,19,.07);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.catalog-card:hover{ transform: translateY(-5px); box-shadow: 0 18px 36px rgba(13,16,19,.14); }
.catalog-card .catalog-media{ position: relative; overflow:hidden; }
.catalog-card .catalog-media img{ width:100%; display:block; transition: transform .6s ease; }
.catalog-card:hover .catalog-media img{ transform: scale(1.06); }
.lock-badge{
  position: absolute; top: 14px; right: 14px; background: rgba(13,16,19,.82); color: var(--dk-accent);
  border: 1px solid rgba(255,255,255,.15); border-radius: 20px; font-size: 11px; letter-spacing:.5px;
  padding: 5px 11px; display:flex; align-items:center; gap:5px;
}
.catalog-body{ padding: 20px; }
.catalog-body h4{ color: var(--dk-text); font-family:'Work Sans',sans-serif; font-weight:700; }
.catalog-price{ color: var(--dk-accent); font-weight: 600; font-size: 14px; margin: 6px 0 14px; }
.btn-stripe{
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, #e4cd7a, var(--dk-accent)); color:#17140f; font-weight:600; font-size:13px;
  border:none; border-radius:6px; padding:10px 18px; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-stripe:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(201,162,39,.28); }
.btn-stripe:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ---------- Portail client: lecteur securise mockup ---------- */
.video-mock{ position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(13,16,19,.25); background:#000; }
.video-mock::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%); z-index:2; pointer-events:none; }
.video-mock-overlay{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; color:#fff; padding:20px; }
.video-mock-overlay .lock-icon{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; font-size:18px; color: var(--dk-accent); background: rgba(0,0,0,.35); }
.video-mock-overlay p{ color: rgba(255,255,255,.75); font-size:13px; max-width:320px; font-family:'Work Sans',sans-serif; }
.video-mock iframe{ position:relative; z-index:1; width:100%; aspect-ratio:16/9; display:block; border:0; filter: brightness(.55) saturate(.8); }

/* ---------- Timeline (evenements) ---------- */
.timeline{ position: relative; padding-left: 34px; }
.timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background: var(--dk-border); }
.timeline-item{ position: relative; padding-bottom: 34px; }
.timeline-item::before{ content:""; position:absolute; left:-34px; top:3px; width:12px; height:12px; border-radius:50%; background: var(--dk-bg); border:2px solid var(--dk-accent); }
.timeline-item .timeline-date{ color: var(--dk-accent); font-size:13px; font-weight:600; letter-spacing:.4px; margin-bottom:4px; font-family:'Work Sans',sans-serif; }
.timeline-item h4{ color: var(--dk-text); margin-bottom:6px; font-family:'Work Sans',sans-serif; font-weight:700; }
.timeline-item p{ color: var(--dk-text-muted); margin-bottom:0; }
.timeline-item__photo{ display:block; max-width:420px; width:100%; border-radius:8px; margin-top:14px; filter: grayscale(1); }
.timeline-item__photo-caption{ font-size:12.5px; color: var(--dk-text-muted); opacity:.8; margin-top:6px; max-width:420px; }

/* ---------- Blog cards (livre & ecriture) ---------- */
.blog-mini-card{
  background: var(--dk-card); border: 1px solid var(--dk-border-soft); border-radius: 8px; overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-mini-card:hover{ transform: translateY(-5px); box-shadow: 0 14px 30px rgba(13,16,19,.12); border-color: var(--dk-accent-soft); }
.blog-mini-card img{ width:100%; height:150px; object-fit:cover; }
.blog-mini-card .body{ padding: 16px 18px; }
.blog-mini-card .body .date{ color: var(--dk-text-muted); font-size:12px; font-family:'Work Sans',sans-serif; }
.blog-mini-card .body h4{ margin: 6px 0 0; }
.blog-mini-card .body h4 a{ color: var(--dk-text); font-family:'Work Sans',sans-serif; font-weight:700; font-size:17px; }
.blog-mini-card .body h4 a:hover{ color: var(--dk-accent); }

/* ---------- Scroll reveal ---------- */
.reveal-up{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal-up.is-visible{ opacity:1; transform: translateY(0); }

/* ---------- Hero de marque (accueil) ---------- */
.brand-hero{
  position: relative;
  padding: 220px 0 130px 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--dk-bg-2) 100%);
  overflow: hidden;
  text-align: center;
}
/* Monogramme geant en fond du hero : reprend le "monogram reveal" de la fiche identitaire (trace progressif). */
.brand-hero__mega{
  position:absolute; top:110px; right:0; bottom:0; left:0; z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.brand-hero__mega svg{
  height:min(46vw, 440px); width:auto; aspect-ratio: 700 / 930;
  animation: brandMegaBreathe 7s ease-in-out 2.4s infinite;
}
.brand-hero__mega-path{
  fill: var(--dk-accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: brandMegaDraw 1.8s cubic-bezier(.16,.8,.24,1) .3s forwards;
}
@keyframes brandMegaDraw{
  0%{ opacity:0; transform: scale(.94); }
  100%{ opacity:.18; transform: scale(1); }
}
@keyframes brandMegaBreathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce){
  .brand-hero__mega svg{ animation:none; }
  .brand-hero__mega-path{ animation:none; opacity:.18; transform:scale(1); }
}
@media (max-width: 767px){
  .brand-hero__mega{ top:70px; }
  .brand-hero__mega svg{ height:58vw; width:auto; }
}

.brand-hero__content{ position:relative; z-index:2; max-width:720px; margin:0 auto; }

.brand-hero__mark{
  width:130px; aspect-ratio: 134 / 102; margin:0 auto 30px auto; position:relative;
  animation: brandFocusPull 1.3s cubic-bezier(.16,.8,.24,1) forwards;
}
@keyframes brandFocusPull{
  0%{ opacity:0; transform: scale(1.6); filter: blur(14px); }
  60%{ opacity:1; filter: blur(2px); }
  100%{ opacity:1; transform: scale(1); filter: blur(0); }
}
.brand-hero__breathe{ width:100%; height:100%; animation: brandBreathe 4.5s ease-in-out 1.3s infinite; }
@keyframes brandBreathe{ 0%,100%{ transform: scale(1) rotate(0deg); } 50%{ transform: scale(1.035) rotate(1deg); } }
.brand-hero__mark svg path{ stroke: var(--dk-accent); }
.brand-hero__lens circle:first-child{ fill:none; stroke: rgba(13,16,19,.25); stroke-width:1; animation: brandRing 2.4s ease-out 1.3s infinite; transform-origin:109px 23px; }
.brand-hero__lens circle:last-child{ fill: var(--dk-text); animation: brandRec 2.4s ease-in-out 1.3s infinite; transform-origin:109px 23px; }
@keyframes brandRing{ 0%{ r:3.2; opacity:.9; } 100%{ r:11; opacity:0; } }
@keyframes brandRec{ 0%,100%{ opacity:.55; transform: scale(.9); } 50%{ opacity:1; transform: scale(1.15); } }

.brand-hero__eyebrow{
  display:block; font-size: 11px; font-weight:700; letter-spacing: 3px; text-transform:uppercase;
  color: var(--dk-accent-text); margin: 0 0 18px 0;
  opacity:0; animation: brandFadeUp .7s ease forwards; animation-delay:.4s;
}
.brand-hero__title{
  font-family:'Work Sans', sans-serif;
  font-size: 42px; line-height:1.2; font-weight:700; color: var(--dk-text);
  margin: 0 0 20px 0; letter-spacing:-.01em;
  opacity:0; animation: brandFadeUp .8s ease forwards; animation-delay:.55s;
}
.brand-hero__title em{ color: var(--dk-accent); font-style:normal; }
.brand-hero__subtitle{
  font-size:16px; line-height:1.6; color: var(--dk-text-muted); max-width:520px; margin: 0 auto 34px auto;
  opacity:0; animation: brandFadeUp .8s ease forwards; animation-delay:.75s;
}
.brand-hero__cta{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  opacity:0; animation: brandFadeUp .8s ease forwards; animation-delay:.95s;
}
.brand-hero__btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 30px; border-radius:2px; border:1px solid rgba(13,16,19,.22);
  font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  text-decoration:none; color: var(--dk-text); transition: border-color .2s ease, color .2s ease;
}
.brand-hero__btn-ghost:hover{ border-color: var(--dk-accent); color: var(--dk-accent); }

@keyframes brandFadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

@media (max-width: 767px){
  .brand-hero{ padding: 160px 0 90px 0; }
  .brand-hero__title{ font-size: 30px; }
}

/* ---------- Ecran "merci" post-don (apercu demo, page dons.html) ---------- */
.thanks-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(13,16,19,.55); backdrop-filter: blur(3px);
  opacity:0; visibility:hidden; transition: opacity .35s ease, visibility .35s;
  z-index: 2000;
}
.thanks-overlay.show{ opacity:1; visibility:visible; }
.thanks-card{
  position:relative; background:#fff; border-radius:18px; padding:52px 44px 42px;
  width: min(420px, 88vw); text-align:center; overflow:visible;
  box-shadow: 0 30px 80px rgba(13,16,19,.35);
  transform: translateY(18px) scale(.96); opacity:0;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.thanks-overlay.show .thanks-card{ transform: translateY(0) scale(1); opacity:1; }
.thanks-card::before{
  content:''; position:absolute; inset:-40px; z-index:-1; border-radius:32px;
  background: radial-gradient(circle at 50% 30%, rgba(201,162,39,.35), transparent 70%);
  opacity:0; transition: opacity .6s ease .1s;
}
.thanks-overlay.show .thanks-card::before{ opacity:1; }
.thanks-icon{
  width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--dk-accent-soft), var(--dk-accent));
  box-shadow: 0 10px 24px rgba(201,162,39,.35);
  transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) .15s;
}
.thanks-overlay.show .thanks-icon{ transform: scale(1); }
.thanks-icon svg{ width:28px; height:28px; }
.thanks-icon path{
  stroke:#17140f; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset .45s ease .5s;
}
.thanks-overlay.show .thanks-icon path{ stroke-dashoffset:0; }
.thanks-card h2{
  font-size:23px; color:var(--dk-text); margin:0 0 10px; font-family:'Work Sans', sans-serif; font-weight:800;
  opacity:0; transform: translateY(6px);
  transition: opacity .4s ease .25s, transform .4s ease .25s;
}
.thanks-card .amount{
  font-size:15px; color:var(--dk-accent-text); font-weight:700; margin:0 0 16px;
  opacity:0; transform: translateY(6px);
  transition: opacity .4s ease .32s, transform .4s ease .32s;
}
.thanks-card p.msg{
  font-size:14.5px; line-height:1.65; margin:0 0 28px; color: var(--dk-text-muted);
  opacity:0; transform: translateY(6px);
  transition: opacity .4s ease .38s, transform .4s ease .38s;
}
.thanks-overlay.show .thanks-card h2,
.thanks-overlay.show .thanks-card .amount,
.thanks-overlay.show .thanks-card p.msg{ opacity:1; transform:none; }
.thanks-close{
  font-family:'Work Sans', sans-serif; font-weight:600; font-size:13px;
  background:none; border:1px solid var(--dk-border); border-radius:8px;
  padding:10px 22px; cursor:pointer; color: var(--dk-text-muted);
  opacity:0; transition: opacity .4s ease .44s, border-color .2s ease, color .2s ease;
}
.thanks-overlay.show .thanks-close{ opacity:1; }
.thanks-close:hover{ border-color: var(--dk-accent); color: var(--dk-text); }
.thanks-particles{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.thanks-particles .p{
  position:absolute; top:38%; left:50%;
  width: 3px; height: 14px; border-radius: 2px;
  background: var(--dk-accent);
  opacity:0;
  animation: thanks-p-fly 1.15s cubic-bezier(.15,.6,.35,1) forwards;
}
.thanks-particles .p.charbon{ background: #2a2e33; }
.thanks-particles .p.dot{ width:5px; height:5px; border-radius:50%; }
@keyframes thanks-p-fly{
  0%{ opacity:0; transform: translate(-50%,-50%) rotate(var(--rot,0deg)) translateY(0) scale(.4); }
  12%{ opacity:1; }
  100%{
    opacity:0;
    transform: translate(-50%,-50%) rotate(calc(var(--rot,0deg) + 70deg))
               translate(var(--dx,0px), var(--dy,-90px)) scale(1);
  }
}

/* ---------- Espace membre (mon-compte.html) : identite distincte du site
   public, volontairement sombre/or, pour que "mon compte" se sente comme
   un salon prive plutot qu'une simple page de reglages. Valide via
   propositions/espace-membre.html avant application ici. Le header/footer
   du site public sont totalement retires sur cette page - on n'est plus
   "sur le site", l'espace prive est une destination a part. ---------- */
html.vip-page, body.vip-page{ background-color:#0b0d10 !important; }
.vip-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 30px; background:#0b0d10; border-bottom:1px solid #201d15;
}
.vip-topbar__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.vip-topbar__brand svg{ width:28px; height:21px; color: var(--dk-accent); flex:none; }
.vip-topbar__brand span{ font-family:'Work Sans', sans-serif; font-weight:700; font-size:16px; }
.vip-topbar__brand span em{ font-style:normal; font-weight:500; font-size:12px; color:#8b8577; margin-left:8px; }
.vip-topbar__back{ font-size:12.5px; color:#9a9ea5; text-decoration:underline; }
.vip-topbar__back:hover{ color: var(--dk-accent-soft); }
.vip-footer{
  background:#0b0d10; padding:26px 30px 34px; text-align:center;
  border-top:1px solid #201d15;
}
.vip-footer p{ margin:0; font-size:12px; color:#7a7568; }
.vip-footer a{ color:#9a9ea5; text-decoration:underline; }

.vip-space{
  --vip-bg:#0b0d10; --vip-panel:#14171b; --vip-panel-2:#1a1e23; --vip-border:#2a2e34; --vip-border-soft:#232629;
  --vip-text-muted:#9a9ea5; --gold-soft: var(--dk-accent-soft); --gold: var(--dk-accent);
  background: radial-gradient(circle at 15% 0%, #171a1e 0%, var(--vip-bg) 55%);
  padding: 60px 0 110px; font-family:'Work Sans', sans-serif;
}
.vip-space__wrap{ max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.vip-space .membercard{
  position:relative; border-radius:18px; padding:34px 38px; margin-bottom:30px; overflow:hidden;
  background:
    radial-gradient(circle at 85% -10%, rgba(201,162,39,.25), transparent 55%),
    linear-gradient(135deg, #1c1a12 0%, #100f0b 55%, #0b0d10 100%);
  border:1px solid #3a3324;
}
.vip-space .membercard__top{ display:flex; align-items:flex-start; justify-content:space-between; }
.vip-space .membercard__brand{ display:flex; align-items:center; gap:10px; }
.vip-space .membercard__brand svg{ width:26px; height:20px; color:var(--gold-soft); }
.vip-space .membercard__brand span{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-soft); font-weight:700; }
.vip-space .membercard__tier{ font-family:'Cormorant Garamond', serif; font-size:14px; font-style:italic; color:var(--gold-soft); letter-spacing:.5px; }
.vip-space .membercard__name{ font-family:'Cormorant Garamond', serif; font-size:34px; color:#fff; margin:26px 0 4px; font-weight:600; }
.vip-space .membercard__since{ font-size:12px; color:#8b8577; letter-spacing:.4px; }
.vip-space .membercard__stats{ display:flex; gap:34px; margin-top:26px; flex-wrap:wrap; }
.vip-space .membercard__stat b{ display:block; font-size:21px; color:var(--gold-soft); font-weight:700; }
.vip-space .membercard__stat span{ font-size:11px; color:#8b8577; text-transform:uppercase; letter-spacing:.6px; }

.vip-space .grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:22px; }
@media (max-width: 860px){ .vip-space .grid{ grid-template-columns:1fr; } }
.vip-space .panel{
  background: linear-gradient(180deg, var(--vip-panel-2), var(--vip-panel));
  border:1px solid var(--vip-border-soft); border-radius:14px;
  padding:24px 24px 22px; margin-bottom:22px;
}
.vip-space .panel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.vip-space .panel__head h2{
  font-size:12.5px; text-transform:uppercase; letter-spacing:1px; color:var(--gold-soft); margin:0;
  display:flex; align-items:center; gap:9px; font-weight:700;
}
.vip-space .panel__head .icon{ width:16px; height:16px; flex:none; }
.vip-space .badge-example{
  font-size:10px; text-transform:uppercase; letter-spacing:.4px; font-weight:700;
  color:#c9a227; background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.3); border-radius:5px; padding:3px 8px;
}

.vip-space .donation-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--vip-border-soft); }
.vip-space .donation-row:last-child{ border-bottom:none; padding-bottom:0; }
.vip-space .donation-row__left{ display:flex; align-items:center; gap:13px; }
.vip-space .donation-icon{
  width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#17140f;
}
.vip-space .donation-icon svg{ width:14px; height:14px; }
.vip-space .donation-row__amount{ font-weight:700; color:#fff; font-size:15px; }
.vip-space .donation-row__date{ font-size:12px; color:var(--vip-text-muted); }
.vip-space .donation-row__dl{
  font-size:12px; font-weight:600; color:var(--gold-soft); text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; gap:5px; border:1px solid var(--vip-border); border-radius:7px; padding:6px 11px;
  transition: border-color .2s ease, background .2s ease;
}
.vip-space .donation-row__dl:hover{ border-color:var(--gold); background:rgba(201,162,39,.08); }
.vip-space .donation-total{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--vip-border); display:flex; align-items:center; justify-content:space-between; }
.vip-space .donation-total span{ font-size:13px; color:var(--vip-text-muted); }
.vip-space .donation-total b{ color:#fff; font-size:18px; font-family:'Cormorant Garamond', serif; }

.vip-space .purchase-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--vip-border-soft); }
.vip-space .purchase-row:last-child{ border-bottom:none; }
.vip-space .purchase-row img{ width:48px; height:64px; object-fit:cover; border-radius:5px; flex:none; filter:saturate(.85); }
.vip-space .purchase-row__title{ font-weight:600; color:#fff; font-size:13.5px; margin:0 0 3px; }
.vip-space .purchase-row__status{ font-size:11.5px; color:var(--gold-soft); font-weight:600; }
.vip-space .purchase-row__watch{
  margin-left:auto; font-size:12px; font-weight:700; color:#17140f; background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  border-radius:7px; padding:8px 14px; text-decoration:none; white-space:nowrap; border:none; cursor:pointer;
}

.vip-space .exclusive-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:520px){ .vip-space .exclusive-grid{ grid-template-columns:1fr; } }
.vip-space .exclusive-card{ position:relative; border-radius:10px; overflow:hidden; aspect-ratio: 4/3; border:1px solid var(--vip-border); }
.vip-space .exclusive-card img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.4); }
.vip-space .exclusive-card__label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px; color:#fff; }
.vip-space .exclusive-card__label .lock{ font-size:18px; margin-bottom:6px; color:var(--gold-soft); }
.vip-space .exclusive-card__label span{ font-size:12px; font-weight:600; }

.vip-space .news-item{ padding:14px 0; border-bottom:1px solid var(--vip-border-soft); }
.vip-space .news-item:last-child{ border-bottom:none; padding-bottom:0; }
.vip-space .news-item__date{ font-size:11px; color:var(--gold-soft); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.vip-space .news-item__title{ font-size:14px; font-weight:600; color:#fff; margin:0 0 4px; }
.vip-space .news-item__text{ font-size:13px; line-height:1.5; margin:0; color: var(--vip-text-muted); }

.vip-space .member-contact{ text-align:center; padding:6px 4px 2px; }
.vip-space .member-contact p{ margin:0 0 16px; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:15px; color:#cfcabb; }
.vip-space .member-contact__diff{
  font-size:12px; line-height:1.55; color:#a6a08e; text-align:left;
  background: rgba(201,162,39,.07); border:1px solid rgba(201,162,39,.2); border-radius:9px; padding:11px 13px; margin-bottom:18px;
}
.vip-space .member-contact__diff b{ color:var(--gold-soft); display:block; margin-bottom:3px; font-weight:700; }
.vip-space .member-contact .btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#17140f !important;
  border:none; border-radius:8px; padding:11px 22px; text-decoration:none; cursor:pointer;
  box-shadow: 0 8px 22px rgba(201,162,39,.25);
}

.vip-space .settings-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--vip-border-soft); }
.vip-space .settings-row:last-child{ border-bottom:none; }
.vip-space .settings-row__label{ font-size:13.5px; color:#fff; }
.vip-space .settings-row__hint{ font-size:11.5px; color:var(--vip-text-muted); margin-top:2px; }
.vip-space .toggle{ position:relative; width:40px; height:23px; flex:none; }
.vip-space .toggle input{ opacity:0; width:0; height:0; }
.vip-space .toggle .track{ position:absolute; inset:0; background:var(--vip-border); border-radius:999px; cursor:pointer; transition:.2s; }
.vip-space .toggle .track::before{ content:''; position:absolute; left:3px; top:3px; width:17px; height:17px; background:#fff; border-radius:50%; transition:.2s; }
.vip-space .toggle input:checked + .track{ background: linear-gradient(135deg, var(--gold-soft), var(--gold)); }
.vip-space .toggle input:checked + .track::before{ transform: translateX(17px); }
.vip-space .logout-link{ font-size:12.5px; color:var(--vip-text-muted); text-decoration:underline; cursor:pointer; }

.vip-space .danger-zone{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding-top:16px; border-top:1px solid var(--vip-border-soft); }
.vip-space .danger-link{ font-size:12.5px; color:#e0a08a; text-decoration:underline; cursor:pointer; white-space:nowrap; flex:none; }
.vip-space .danger-confirm{
  margin-top:14px; padding:14px; border-radius:9px; background:rgba(224,160,138,.08); border:1px solid rgba(224,160,138,.3);
}
.vip-space .danger-confirm p{ font-size:12.5px; color:#e0a08a; margin:0 0 10px; }
.vip-space .danger-confirm__actions{ display:flex; gap:10px; }
.vip-space .danger-confirm__actions span{
  font-size:12.5px; font-weight:700; cursor:pointer; border-radius:6px; padding:7px 12px;
}
#deleteConfirmYes{ background:#e0a08a; color:#2a130c; }
#deleteConfirmNo{ background:transparent; color:var(--vip-text-muted); border:1px solid var(--vip-border); }