@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500;1,6..72,600&display=swap');

/* =====================================================================
   DeifieD — Design system "évasion éditoriale" (papier crème)
   D'après le comp DeifieD.dc.html : papier #F5F1E9, Newsreader + Hanken
   Grotesk, accent indigo #3B3EFF, cartes sombres, grain + dérive.
   Thème clair ET sombre (auto selon prefers-color-scheme).
   Chargé APRÈS tous les CSS de page → surcharge non destructive.
   ===================================================================== */

:root{
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ----- thème clair (défaut) ----- */
  --paper:#F5F1E9;      /* fond papier */
  --paper-2:#EFE9DD;    /* sous-cartes */
  --dark:#0B0B0B;       /* cartes question sombres */
  --ink:#171613;        /* texte */
  --ink-2:#0B0B0B;      /* titres */
  --muted:rgba(23,22,19,.6);
  --muted-2:rgba(23,22,19,.45);
  --line:rgba(23,22,19,.13);
  --line-strong:rgba(23,22,19,.24);
  --card:rgba(255,255,255,.42);   /* cartes translucides sur papier */
  --surface:#ffffff;              /* champs, items, sous-surfaces */
  --accent:#3B3EFF;               /* aplats (boutons, surlignage) */
  --accent-press:#2A2ED6;
  --accent-ink:#3B3EFF;           /* accent en TEXTE (eyebrow, liens, chiffres) */
  --btn-dark-bg:#0B0B0B; --btn-dark-fg:#ffffff;  /* bouton primaire (s'inverse en sombre) */
  --warm:#C8452F;
  --nav-bg:rgba(245,241,233,.82);
  --noise-blend:multiply; --noise-op:.05;

  --r-pill:999px; --r-lg:22px; --r-md:16px;
  --sh-card:0 22px 44px -22px rgba(11,11,11,.32);
  --sh-dark:0 2px 6px rgba(0,0,0,.14), 0 34px 66px -20px rgba(0,0,0,.46);
}

/* ----- thème sombre (automatique) ----- */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#14130E; --paper-2:#1E1C15; --dark:#050506;
    --ink:#ECE6D9; --ink-2:#FAF6EC;
    --muted:rgba(236,230,217,.62);
    --muted-2:rgba(236,230,217,.42);
    --line:rgba(236,230,217,.14);
    --line-strong:rgba(236,230,217,.3);
    --card:rgba(255,255,255,.045);
    --surface:rgba(255,255,255,.06);
    --accent:#4F52FF; --accent-press:#7174FF; --accent-ink:#9EA0FF;
    --btn-dark-bg:#ECE6D9; --btn-dark-fg:#14130E;
    --warm:#EE7C67;
    --nav-bg:rgba(18,17,12,.82);
    --noise-blend:overlay; --noise-op:.05;
    --sh-card:0 24px 48px -22px rgba(0,0,0,.6);
    --sh-dark:0 2px 6px rgba(0,0,0,.4), 0 34px 66px -20px rgba(0,0,0,.7);
  }
}

/* ---------- keyframes ---------- */
@keyframes dfdRise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:none}}
@keyframes dfdReveal{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:none}}
@keyframes dfdFloat{0%,100%{transform:var(--r) translateY(0)}50%{transform:var(--r) translateY(-12px)}}
@keyframes dfdDrift{0%{background-color:#F5F1E9}38%{background-color:#E9EDE7}70%{background-color:#F1E8DA}100%{background-color:#F3EDE2}}
@keyframes dfdDeal{0%{opacity:0;transform:translateY(44px) scale(.93) rotate(-2deg)}58%{transform:translateY(-7px) scale(1.02) rotate(0)}100%{opacity:1;transform:none}}
@keyframes dfdGlare{0%{opacity:0;transform:translateX(-150%) skewX(-16deg)}30%{opacity:.85}100%{opacity:0;transform:translateX(320%) skewX(-16deg)}}

/* =====================================================================
   BASE : fond papier + grain, neutralisation photo & voile
   ===================================================================== */
html{background:var(--paper);}
body,
body.index-page, body.questions-page, body.auth-page, body.account-page,
body.plan-page, body[data-daily-background]{
  background:transparent!important;
  background-image:none!important;
  color:var(--ink)!important;
  font-family:var(--sans)!important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:''!important; position:fixed!important; inset:0!important; z-index:-2!important;
  pointer-events:none!important; background:var(--paper)!important; opacity:1!important;
  filter:none!important; -webkit-filter:none!important;
  animation:dfdDrift 1ms linear both; animation-timeline:scroll(root);
}
body::after{
  content:''!important; position:fixed!important; inset:0!important; z-index:-1!important;
  pointer-events:none!important; opacity:var(--noise-op)!important; mix-blend-mode:var(--noise-blend)!important;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E")!important;
}
@media (prefers-color-scheme:dark){
  body::before{ animation:none!important; }  /* pas de dérive claire en sombre */
}

/* On retire l'affordance "changer le fond" (hors comp) */
.background-changer, .background-change-link, .background-change-button, .footer-center{
  display:none!important;
}

/* =====================================================================
   TYPOGRAPHIE
   ===================================================================== */
h1,h2,h3,h4,h5,
.section-title, .mode-header h2, .guest-title, .cta-content h2,
.ready-section h2, .post-how-it-works-cta h2, .why-different-section h2{
  font-family:var(--serif)!important; font-weight:500!important; color:var(--ink-2)!important;
  letter-spacing:-.01em; line-height:1.06; text-wrap:balance;
}
p, li, label, .hero-text, .mode-description p, .message{ font-family:var(--sans); }
a{ color:var(--accent-ink); text-decoration:none; text-underline-offset:3px; }
a:hover{ color:var(--accent-press); }
::selection{ background:var(--accent); color:#fff; }
.highlight-text{ color:var(--accent-ink)!important; font-style:italic; font-family:var(--serif)!important; }

/* pictogrammes SVG (remplacent les emoji) */
.picto{ width:24px; height:24px; display:inline-block; vertical-align:middle;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* =====================================================================
   NAVIGATION
   ===================================================================== */
header.top-nav, .top-nav{
  background:var(--nav-bg)!important;
  -webkit-backdrop-filter:blur(14px)!important; backdrop-filter:blur(14px)!important;
  border-bottom:1px solid var(--line)!important; box-shadow:none!important;
  height:64px!important; padding:0 clamp(18px,5vw,56px)!important;
}
.nav-brand, .auth-brand{
  color:var(--ink)!important; text-decoration:none!important;
  font-family:var(--sans)!important; font-weight:700!important;
  letter-spacing:.16em!important; text-transform:uppercase!important;
  font-size:.92rem!important; gap:11px!important; align-items:center;
}
.nav-logo, .auth-logo{
  width:32px!important; height:32px!important; border-radius:50%!important;
  object-fit:cover!important; border:1px solid var(--line)!important;
}
.nav-link, header .nav-link{
  color:var(--ink)!important; opacity:.6; background:none!important;
  font-weight:600!important; font-size:.76rem!important;
  letter-spacing:.09em!important; text-transform:uppercase!important;
  border-radius:var(--r-pill)!important; transition:opacity .2s, background .2s, transform .2s;
}
.nav-link:hover, header .nav-link:hover{
  opacity:1; color:var(--ink)!important; background:rgba(127,127,127,.12)!important; transform:none!important;
}
.nav-link.active{ opacity:1; }
.nav-link .picto{ width:17px; height:17px; }
.share-button, header .share-button{
  background:transparent!important; color:var(--ink)!important; opacity:1!important;
  border:1px solid var(--line-strong)!important; border-radius:var(--r-pill)!important;
  font-weight:600!important; letter-spacing:.02em!important; text-transform:none!important;
  padding:9px 18px!important; box-shadow:none!important;
  transition:background .2s, border-color .2s;
}
.share-button:hover, header .share-button:hover{ background:rgba(127,127,127,.08)!important; border-color:var(--ink)!important; color:var(--ink)!important; box-shadow:none!important; transform:none; filter:none; }
.language-toggle{
  color:var(--ink)!important; background:none!important;
  border:1px solid var(--line)!important; border-radius:var(--r-pill)!important;
}
.language-toggle:hover{ background:rgba(127,127,127,.12)!important; transform:none!important; }
.logout-button, header .logout-button{ color:var(--accent-ink)!important; }
.logout-button:hover, header .logout-button:hover{ background:rgba(79,82,255,.14)!important; }
.menu-toggle, header .menu-toggle{ color:var(--ink)!important; }
.nav-link.contact-icon{ color:var(--ink)!important; }
/* nav conditionnelle : CTA connexion / pastille profil */
.nav-signin{ display:inline-flex; align-items:center; background:var(--accent)!important; color:#fff!important;
  border-radius:var(--r-pill)!important; font-family:var(--sans); font-weight:700!important; font-size:.78rem!important;
  letter-spacing:.03em; text-transform:none!important; padding:10px 20px!important; text-decoration:none!important;
  white-space:nowrap; transition:transform .2s, filter .2s; }
.nav-signin:hover{ filter:brightness(1.08); transform:translateY(-1px); color:#fff!important; }
.nav-profile{ display:flex; align-items:center; gap:9px; padding:3px 4px 3px 13px; border:1px solid var(--line);
  border-radius:var(--r-pill); text-decoration:none!important; transition:border-color .2s; }
.nav-profile:hover{ border-color:var(--line-strong); }
.nav-profile-name{ font-size:13px; font-weight:600; color:var(--ink)!important; max-width:120px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.nav-profile-avatar{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff!important;
  display:grid; place-items:center; font-family:var(--sans); font-size:12px; font-weight:800; letter-spacing:.3px; }

@media screen and (max-width:768px){
  header .nav-right{ background-color:var(--nav-bg)!important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  header .nav-right .nav-link{ background:rgba(127,127,127,.1)!important; color:var(--ink)!important; opacity:1; }
  header .nav-right .logout-button{ background:rgba(79,82,255,.14)!important; color:var(--accent-ink)!important; }
  header .nav-right .nav-signin, header .nav-right .nav-profile{ width:100%; max-width:300px; justify-content:center; margin:.3rem 0; }
}
.auth-nav{ background:transparent!important; border:none!important; box-shadow:none!important; }
.auth-brand span{ color:var(--ink)!important; }

/* =====================================================================
   BOUTONS — pastilles
   ===================================================================== */
.cta-button, .primary-button, .submit-button, .purchase-button, .plan-button,
.send-button, .auth-button, .nav-button, .upgrade-button, .banner-button,
.save-button, .record-button, .view-answers-button, .cancel-button,
.google-sign-in, .google-button, .google-signin-button, .switch-button,
.delete-account-button, #preRegisterButton, #purchaseButton, #exportDataBtn,
.step-cta .cta-button{
  font-family:var(--sans)!important; font-weight:700!important; letter-spacing:.02em!important;
  border-radius:var(--r-pill)!important;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), filter .25s, background .2s, box-shadow .25s!important;
  text-decoration:none;
}
/* primaire (s'inverse en sombre) */
.cta-button, .save-button, .record-button{
  background:var(--btn-dark-bg)!important; color:var(--btn-dark-fg)!important; border:none!important;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.5)!important;
}
.cta-button:hover, .save-button:hover, .record-button:hover{
  filter:none; transform:translateY(-3px) scale(1.015);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.55)!important; background:var(--btn-dark-bg)!important;
}
/* accent indigo */
.submit-button, .purchase-button, .plan-button, .send-button, .auth-button,
.upgrade-button, .banner-button, .next-button, #preRegisterButton, #purchaseButton,
#exportDataBtn, .contact-container button[type=submit]{
  background:var(--accent)!important; color:#fff!important; border:none!important;
  box-shadow:0 14px 30px -14px rgba(59,62,255,.55)!important;
}
.submit-button:hover, .purchase-button:hover, .plan-button:hover, .send-button:hover,
.auth-button:hover, .upgrade-button:hover, .banner-button:hover, .next-button:hover,
#preRegisterButton:hover, #purchaseButton:hover, #exportDataBtn:hover{
  filter:brightness(1.07); transform:translateY(-2px);
  box-shadow:0 18px 36px -14px rgba(59,62,255,.6)!important; background:var(--accent)!important;
}
/* secondaire contour */
.primary-button, .view-answers-button, .cancel-button, .switch-button,
.google-sign-in, .google-button, .google-signin-button, .prev-button, .delete-account-button{
  background:transparent!important; color:var(--ink)!important;
  border:1px solid var(--line-strong)!important; box-shadow:none!important;
}
.primary-button:hover, .view-answers-button:hover, .cancel-button:hover, .switch-button:hover,
.google-sign-in:hover, .google-button:hover, .prev-button:hover{
  background:rgba(127,127,127,.08)!important; border-color:var(--ink)!important;
  color:var(--ink)!important; transform:translateY(-2px); box-shadow:none!important;
}
.switch-button{ border:none!important; color:var(--accent-ink)!important; padding:0 .3em!important; }
.switch-button:hover{ background:none!important; text-decoration:underline; }
.delete-account-button{ color:var(--warm)!important; border-color:color-mix(in srgb,var(--warm) 55%,transparent)!important; }
.delete-account-button:hover{ background:color-mix(in srgb,var(--warm) 10%,transparent)!important; border-color:var(--warm)!important; color:var(--warm)!important; }
.record-button .picto, .view-answers-button .picto, .nav-button .picto{ width:18px; height:18px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;
}

/* =====================================================================
   CARTE QUESTION (page questions) — carte sombre sur papier
   ===================================================================== */
.questions-content{ margin-top:74px!important; }
.question-counter{
  color:var(--muted)!important; text-transform:uppercase; letter-spacing:.18em;
  font-size:.72rem!important; font-weight:600;
}
.questions-page .question-card,
.landscape-question-section .question-card{
  background:var(--dark)!important; border:1px solid rgba(255,255,255,.08)!important;
  border-radius:var(--r-lg)!important; box-shadow:var(--sh-dark)!important;
}
.question-text h1, .question-content{
  font-family:var(--sans)!important; font-weight:800!important; color:#fff!important;
  text-transform:uppercase!important; letter-spacing:.2px!important; line-height:1.32!important;
  text-shadow:none!important;
}
/* Tirage de carte : deal-in + reflet (adapté du comp, carte non-flip) */
.questions-page .question-card{ position:relative; overflow:hidden; }
.questions-page .question-card .question-text{ position:relative; z-index:3; }
.questions-page .question-card.dealing{ animation:dfdDeal .72s cubic-bezier(.2,.66,.24,1) both; }
.questions-page .question-card::after{ content:''; position:absolute; top:0; left:0; width:42%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-150%) skewX(-16deg); opacity:0; pointer-events:none; z-index:2; }
.questions-page .question-card.dealing::after{ animation:dfdGlare 1s ease .12s both; }
.question-content span, .question-text .highlight, .highlight{
  background:var(--accent)!important; color:#fff!important;
  font-style:normal!important; font-weight:800!important;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:.02em .16em!important; border-radius:0!important; margin:0 .04em!important; display:inline;
}
.question-reminder{
  background:var(--dark)!important; border:1px solid rgba(255,255,255,.08)!important;
  border-radius:var(--r-md)!important; box-shadow:none!important;
}
.question-reminder h2{ color:#fff!important; font-family:var(--sans)!important; font-weight:800!important; }
.nav-button{ background:var(--btn-dark-bg)!important; color:var(--btn-dark-fg)!important; box-shadow:none!important; }
.next-button{ background:var(--accent)!important; color:#fff!important; }
.nav-button.premium-button, .next-button.premium-button{ background:var(--accent)!important; }

/* =====================================================================
   POP-INS
   ===================================================================== */
.popin-content, .premium-popin-content{
  background:var(--paper)!important; color:var(--ink)!important;
  border:1px solid var(--line)!important; border-radius:var(--r-lg)!important;
  box-shadow:0 44px 100px -50px rgba(0,0,0,.6)!important;
}
.popin-header, .premium-popin-header{ border-bottom:1px solid var(--line)!important; }
.popin-header h2, .premium-popin-header h2{ color:var(--ink-2)!important; font-family:var(--serif)!important; }
.popin-footer{ border-top:1px solid var(--line)!important; }
.close-button{ color:var(--muted)!important; }
.close-button:hover{ color:var(--ink)!important; background:rgba(127,127,127,.12)!important; }
.answer-input, .popin-content textarea{
  background:var(--surface)!important; color:var(--ink)!important; border:1px solid var(--line)!important;
  border-radius:var(--r-md)!important; font-family:var(--sans)!important;
}
.answer-input::placeholder{ color:var(--muted-2)!important; }
.answer-input:focus{ border-color:var(--accent)!important; }
.answers-list{ scrollbar-color:var(--accent) rgba(127,127,127,.15); }
.answer-item{
  background:var(--surface)!important; border:1px solid var(--line)!important; color:var(--ink)!important;
  border-radius:var(--r-md)!important;
}
.answer-item:hover{ border-color:var(--line-strong)!important; background:var(--surface)!important; }
.answer-text{ color:var(--ink)!important; }
.answer-date{ color:var(--muted)!important; }
.answer-item .question-text{
  color:var(--accent-ink)!important; border-bottom:1px solid var(--line)!important; font-family:var(--serif)!important;
}
.premium-features .feature{ background:var(--paper-2)!important; }
.premium-features .feature-text h3{ color:var(--ink-2)!important; }
.premium-features .feature-text p{ color:var(--muted)!important; }
.premium-features .feature-icon{ background:rgba(59,62,255,.12)!important; }
.price-tag, .premium-price .price-tag{ color:var(--ink-2)!important; }
.price-note{ color:var(--muted)!important; }

.premium-banner{
  background:var(--paper)!important; border:1px solid var(--line)!important; color:var(--ink)!important;
  box-shadow:var(--sh-card)!important; border-radius:var(--r-md)!important;
}
.banner-text{ color:var(--ink)!important; opacity:1; }
.banner-button{ background:var(--accent)!important; color:#fff!important; }
.upgrade-message{ background:var(--paper-2)!important; border:1px solid var(--line)!important; }
.upgrade-message p{ color:var(--ink)!important; }
.toast{ border-radius:var(--r-pill)!important; box-shadow:0 14px 40px rgba(0,0,0,.28)!important; }

/* =====================================================================
   PAGES SECONDAIRES — wrappers transparents / cartes papier
   ===================================================================== */
body .auth-container, body .contact-container, body .share-content, body .plans-container,
body .account-content, body .plan-content, body .success-content,
body .privacy-content, body .contact-content,
body .share-preview, body .preview-frame{
  background:transparent!important; border:none!important; box-shadow:none!important;
  border-radius:0!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
body .signup-form, body .login-form, body .error-container, body .account-card,
body .account-section, body .plan-card, body .premium-status-card, body .success-card,
body .contact-form, body .share-container, body .preview-content, body .guest-content,
body .legal-content, body .legal-section, body .privacy-container, body .pre-register-section,
body .price-section, body .feature-card, body .answers-content{
  background:var(--paper)!important; color:var(--ink)!important; border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important; box-shadow:0 40px 90px -52px rgba(0,0,0,.5)!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
body .account-section{ background:var(--paper-2)!important; box-shadow:none!important; }

body .signup-form :is(h1,h2,h3,h4,p,label,span,li),
body .login-form :is(h1,h2,h3,h4,p,label,span,li),
body .account-card :is(h1,h2,h3,h4,p,label,span,li),
body .plan-card :is(h1,h2,h3,h4,p,li), body .premium-status-card :is(h1,h2,h3,h4,p,li),
body .contact-form :is(h1,h2,h3,h4,p,label), body .success-card :is(h1,h2,h3,h4,p),
body .share-container :is(h1,h2,h3,h4,p), body .guest-content :is(h1,h2,h3,h4,p,li),
body .legal-content :is(h1,h2,h3,h4,p,li,strong), body .legal-section :is(h1,h2,h3,h4,p,li,strong),
body .privacy-container :is(h1,h2,h3,h4,p,li,strong){ color:var(--ink)!important; }
body :is(.signup-form,.login-form,.account-card,.plan-card,.contact-form,.success-card,
  .legal-content,.privacy-container,.share-container) h1,
body :is(.signup-form,.login-form,.account-card,.plan-card) h2,
body .legal-section h2, body .privacy-container h2{ color:var(--ink-2)!important; font-family:var(--serif)!important; }
body .form-help, body .form-hint, body .guest-note, body .price-note, body .separator{ color:var(--muted)!important; }
body .signup-form a, body .login-form a, body .cgv-link, body .legal-content a,
body .legal-section a, body .privacy-container a, body .account-card a{ color:var(--accent-ink)!important; }

body .email-input, body .answer-input, body .form-group input, body .form-group textarea,
body .form-group select, body .contact-form input, body .contact-form textarea, body .contact-form select,
body .account-card input, body input[type=text], body input[type=email], body input[type=tel], body textarea{
  background:var(--surface)!important; color:var(--ink)!important; border:1px solid var(--line)!important;
  border-radius:12px!important; font-family:var(--sans)!important;
}
body input::placeholder, body textarea::placeholder{ color:var(--muted-2)!important; }
body input:focus, body textarea:focus, body select:focus{ border-color:var(--accent)!important; outline:none; }
.checkbox-container label{ color:var(--ink)!important; }
.checkbox-container input[type=checkbox]{ accent-color:var(--accent); }
.separator::before, .separator::after{ border-bottom:1px solid var(--line)!important; }
.error-message{ color:var(--warm)!important; }

body .share-container h1, body .share-container h2, body .preview-content h1,
body .account-card h1, body .success-card h1, body .mode-card h2, body .cta-card h2,
body .error-container h1{
  background:none!important; -webkit-text-fill-color:var(--ink-2)!important;
  color:var(--ink-2)!important; font-family:var(--serif)!important;
}
.danger-zone{ background:color-mix(in srgb,var(--warm) 8%,transparent)!important; border-color:color-mix(in srgb,var(--warm) 30%,transparent)!important; }
.gami-stat, .gami-card{ background:var(--surface)!important; border:1px solid var(--line)!important; }
.gami-value{ color:var(--ink-2)!important; font-family:var(--serif)!important; } .gami-label{ color:var(--muted)!important; }

.guest-container{
  background:var(--nav-bg)!important; -webkit-backdrop-filter:blur(14px)!important; backdrop-filter:blur(14px)!important;
  border-top:1px solid var(--line)!important;
}
.guest-content{ color:var(--ink)!important; }
.guest-title, .guest-features li{ color:var(--ink)!important; }
.guest-description, .guest-note{ color:var(--muted)!important; }
.guest-features .picto{ color:var(--accent-ink); width:18px; height:18px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer, footer{
  background:transparent!important; border-top:1px solid var(--line)!important;
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:none!important;
}
.footer-link, .footer-copyright, .footer-separator{ color:var(--muted)!important; }
.footer-link:hover{ color:var(--ink)!important; transform:none!important; }
.footer-bottom{ border-top:1px solid var(--line)!important; }

/* =====================================================================
   PAGE D'ACCUEIL (index reconstruit) — classes .dfd-*
   ===================================================================== */
.dfd{ position:relative; z-index:1; }
.dfd-wrap{ max-width:1260px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }

.dfd-hero{ padding:clamp(96px,12vh,150px) 0 56px; }
.dfd-hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
.dfd-hero-copy{ animation:dfdRise .7s ease both; }
.dfd-eyebrow{ display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.dfd-eyebrow span.line{ width:34px; height:1px; background:var(--accent-ink); display:inline-block; }
.dfd-eyebrow span.txt{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:1; color:var(--accent-ink); }
.dfd-headline{
  font-family:var(--serif)!important; font-weight:500!important; color:var(--ink-2)!important;
  font-size:clamp(46px,7vw,94px); line-height:.96; margin:0; letter-spacing:-1.5px;
}
.dfd-headline em{ font-style:italic; font-weight:400; color:var(--accent-ink); }
.dfd-sub{ font-size:clamp(16px,1.5vw,18.5px); line-height:1.68; color:var(--muted); max-width:460px; margin:26px 0 34px; }
.dfd-cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.dfd-btn{
  cursor:pointer; font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.4px;
  border-radius:var(--r-pill); padding:17px 34px; white-space:nowrap; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, background .2s, filter .2s;
}
.dfd-btn-dark{ background:var(--btn-dark-bg); color:var(--btn-dark-fg); border:none; box-shadow:0 12px 28px -12px rgba(0,0,0,.5); }
.dfd-btn-dark:hover{ color:var(--btn-dark-fg); transform:translateY(-3px) scale(1.015); box-shadow:0 20px 40px -14px rgba(0,0,0,.55); }
.dfd-btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
.dfd-btn-ghost:hover{ color:var(--ink); background:rgba(127,127,127,.08); border-color:var(--ink); }
.dfd-btn-accent{ background:var(--accent); color:#fff; border:none; box-shadow:0 14px 30px -14px rgba(59,62,255,.55); }
.dfd-btn-accent:hover{ color:#fff; filter:brightness(1.08); transform:translateY(-3px) scale(1.015); }

.dfd-stats{ display:flex; margin-top:48px; }
.dfd-stat{ padding:0 32px; border-left:1px solid var(--line); }
.dfd-stat:first-child{ padding-left:0; border-left:none; }
.dfd-stat b{ font-family:var(--serif); font-weight:500; font-size:40px; line-height:1; color:var(--ink-2); display:block; }
.dfd-stat span{ font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted-2); margin-top:5px; display:block; }

.dfd-hero-cards{ position:relative; height:clamp(400px,48vw,540px); animation:dfdRise .9s ease both; }
.dfd-qcard{
  position:absolute; width:64%; aspect-ratio:3/4.05; border-radius:18px; background:var(--dark);
  border:1px solid rgba(255,255,255,.08); display:grid; place-items:center; padding:30px;
  transform:var(--r);
}
.dfd-qcard.one{ --r:rotate(-6deg); left:0; top:6%; width:66%; box-shadow:0 2px 6px rgba(0,0,0,.14),0 34px 66px -20px rgba(0,0,0,.46);
  animation:dfdFloat 7s ease-in-out infinite; }
.dfd-qcard.two{ --r:rotate(7deg); right:0; top:24%; box-shadow:0 2px 6px rgba(0,0,0,.16),0 40px 78px -22px rgba(0,0,0,.5);
  animation:dfdFloat 8.5s ease-in-out infinite .5s; }
.dfd-qtext{ font-family:var(--sans); font-weight:800; text-transform:uppercase; text-align:center;
  color:#fff; line-height:1.28; letter-spacing:.2px; font-size:clamp(15px,1.85vw,21px); margin:0; }
.dfd-qtext mark{ background:var(--accent); color:#fff; padding:.02em .16em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

.dfd-section{ padding:clamp(56px,8vh,104px) 0; }
.dfd-head{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px;
  margin-bottom:40px; border-bottom:1px solid var(--line); padding-bottom:22px;
}
.dfd-head h2{ font-family:var(--serif)!important; font-weight:500!important; color:var(--ink-2)!important;
  font-size:clamp(32px,4.5vw,54px); margin:0; line-height:1; letter-spacing:-.5px; }
.dfd-head .kicker{ font-size:12px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:var(--accent-ink); }

.dfd-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.dfd-step{ padding-left:26px; border-left:1px solid var(--line); padding-right:26px; animation:dfdReveal .7s ease both; }
.dfd-step .num{ font-family:var(--serif); font-weight:500; font-size:32px; color:var(--accent-ink); line-height:1; }
.dfd-step h3{ font-family:var(--sans)!important; font-weight:700!important; color:var(--ink-2)!important;
  font-size:16px; letter-spacing:.2px; text-transform:uppercase; margin:16px 0 10px; }
.dfd-step p{ font-size:15px; line-height:1.62; color:var(--muted); margin:0; }

.dfd-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dfd-card{
  position:relative; padding:26px; min-height:170px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column;
  justify-content:space-between; text-decoration:none; color:var(--ink);
  transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s, border-color .32s;
}
.dfd-card:hover{ transform:translateY(-5px) scale(1.015); border-color:var(--line-strong); box-shadow:var(--sh-card); color:var(--ink); }
.dfd-card .row{ display:flex; align-items:center; justify-content:space-between; }
.dfd-card .picto{ width:26px; height:26px; color:var(--ink-2); }
.dfd-card .tag{ font-family:var(--serif); font-size:20px; color:var(--muted-2); }
.dfd-card h3{ font-family:var(--serif)!important; font-weight:500!important; color:var(--ink-2)!important;
  font-size:29px; margin:14px 0 5px; letter-spacing:-.5px; }
.dfd-card p{ font-size:13.5px; line-height:1.48; color:var(--muted); margin:0; }

.dfd-quote{ padding:clamp(70px,11vh,140px) 0; text-align:center; }
.dfd-quote .q{
  font-family:var(--sans); font-weight:800; text-transform:uppercase; color:var(--ink-2);
  font-size:clamp(30px,5.2vw,64px); line-height:1.14; letter-spacing:-.5px; margin:0 auto; max-width:16ch;
}
.dfd-quote .q em{ font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none; color:var(--accent-ink); }
.dfd-quote .cap{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; color:var(--accent-ink); }
.dfd-quote .cap span.line{ width:30px; height:1px; background:var(--accent-ink); }
.dfd-quote .cap span.txt{ font-family:var(--serif); font-style:italic; font-size:18px; }

.dfd-final{ text-align:center; padding:clamp(70px,10vh,130px) 0; border-top:1px solid var(--line); }
.dfd-final h2{ font-family:var(--serif)!important; font-weight:500!important; color:var(--ink-2)!important;
  font-size:clamp(36px,5.5vw,68px); line-height:1.02; letter-spacing:-.5px; margin:0 0 8px; }
.dfd-final h2 em{ font-style:italic; color:var(--accent-ink); }
.dfd-final p{ color:var(--muted); font-size:17px; margin:0 0 30px; }

.dfd-modes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dfd-mode{ padding:36px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); }
.dfd-mode .badge{ font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent-ink); }
.dfd-mode h3{ font-family:var(--serif)!important; font-weight:500!important; color:var(--ink-2)!important; font-size:34px; margin:12px 0 10px; letter-spacing:-.5px; }
.dfd-mode p{ color:var(--muted); font-size:15.5px; line-height:1.6; margin:0 0 24px; }

@media (max-width:900px){
  .dfd-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .dfd-hero-cards{ height:auto; max-width:320px; margin:6px auto 0; }
  .dfd-qcard.one{ position:relative; --r:rotate(0deg); left:auto; top:auto; width:100%;
    margin:0 auto; animation:none; box-shadow:0 30px 60px -24px rgba(0,0,0,.5); }
  .dfd-qcard.two{ display:none; }
  .dfd-hero-cards .dfd-qtext{ font-size:clamp(18px,4.8vw,23px); }
  .dfd-steps{ grid-template-columns:1fr; gap:26px; }
  .dfd-step{ border-left:none; border-top:1px solid var(--line); padding:22px 0 0; }
  .dfd-cards{ grid-template-columns:1fr 1fr; }
  .dfd-modes{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .dfd-hero{ padding-top:112px; }
  .dfd-cards{ grid-template-columns:1fr; }
  .dfd-stat{ padding:0 18px; }
  .dfd-stat b{ font-size:32px; }
  .dfd-cta-row .dfd-btn{ flex:1; justify-content:center; }
}

/* =====================================================================
   CORRECTIFS lisibilité & neutralisation des photos (pages secondaires)
   ===================================================================== */
body .message, body .signup-form .message, body .login-form .message,
body .plan-description p, body .premium-status-card p, body .guest-description{ color:var(--muted)!important; }
.plan-image{ display:none!important; }
.plan-header{ background:transparent!important; margin-top:0!important; padding-top:34px!important; }
.plan-header h2, .premium-header h2{ color:var(--ink-2)!important; font-family:var(--serif)!important; }
.plan-price{ color:var(--accent-ink)!important; text-shadow:none!important; }
.plan-features li, .premium-features li, .plan-card li, .premium-status-card li{ color:var(--ink)!important; }

/* overlays sombres plein écran des pages → supprimés (fond crème) */
.share-content::before, .account-content::before, .contact-content::before,
.plan-content::before, .success-content::before{ display:none!important; content:none!important; }
/* intros / sous-titres restés en blanc → lisibles */
body .contact-intro, body .share-description, body .share-hint,
body .guest-description, body .account-subtitle, body .success-subtitle{ color:var(--muted)!important; }
body .preview-text, body .success-card p, body .contact-header p{ color:var(--ink)!important; }

/* tailles des pictogrammes décoratifs (remplacent les emoji) */
.icon .picto, .button-icon .picto, .plan-toast-icon .picto, .checkmark .picto{ width:18px; height:18px; vertical-align:middle; }
.privacy-icon .picto, .card-icon .picto{ width:28px; height:28px; color:var(--accent-ink); }
.premium-icon .picto, .success-icon .picto, .success-icon-wrap .picto{ width:30px; height:30px; color:var(--accent-ink); }
.right-card .card-icon, .privacy-icon{ display:inline-flex; }

/* privacy : sous-blocs sombres → sous-cartes crème */
body .privacy-card, body .right-card{
  background:var(--paper-2)!important; border:1px solid var(--line)!important; color:var(--ink)!important;
  box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
}
body .privacy-card :is(h1,h2,h3,h4,p,li,strong,span,td,th),
body .right-card :is(h3,p){ color:var(--ink)!important; }
body .privacy-card h3, body .right-card h3{ color:var(--ink-2)!important; }

/* plan-couple : pictogrammes Font Awesome accentués + espacés */
.plan-features .feature{ display:flex!important; align-items:center; gap:12px; }
.plan-features .feature i, .feature-card > i, .feature-card i.fas{ color:var(--accent-ink)!important; margin-right:8px; }
.coming-soon-badge{ color:var(--muted)!important; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; font-weight:600; }
#preRegisterButton{ padding:14px 30px!important; }
.price-section .price, body .price{ color:var(--ink-2)!important; font-family:var(--serif)!important; }
.price-type, .price-section .price-type{ color:var(--muted)!important; }

/* =====================================================================
   PAGE CONNEXION — flux email-first (.dfd-auth)
   ===================================================================== */
.auth-page .auth-nav{ display:flex; align-items:center; padding:16px clamp(20px,5vw,56px); background:transparent!important; }
.auth-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.auth-logo-badge{ width:31px; height:31px; border-radius:50%; object-fit:cover; display:inline-block; border:1px solid var(--line); }

.dfd-auth{ min-height:calc(100vh - 72px); display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vh,48px) clamp(18px,5vw,28px) 80px; }
.dfd-auth-card{ width:100%; max-width:452px; animation:dfdRise .5s ease both; }
.dfd-auth-head{ text-align:center; margin-bottom:24px; }
.dfd-auth-badge{ display:inline-block; width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--line); margin-bottom:16px; }
.dfd-auth-title{ font-family:var(--serif)!important; font-weight:500!important; color:var(--ink-2)!important;
  font-size:clamp(28px,4.6vw,40px); letter-spacing:-.5px; margin:0 0 8px; line-height:1.05; }
.dfd-auth-sub{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:0 auto; max-width:344px; }

.dfd-auth-fields{ display:flex; flex-direction:column; gap:13px; }
.dfd-auth-input{ width:100%; padding:15px 16px; border-radius:13px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); font-family:var(--sans); font-size:15.5px; outline:none; transition:border-color .2s; }
.dfd-auth-input::placeholder{ color:var(--muted-2); }
.dfd-auth-input:focus{ border-color:var(--accent); }

.dfd-auth-consent{ display:flex; flex-direction:column; gap:12px; padding:2px; }
.dfd-auth-consent[hidden]{ display:none!important; }
.dfd-check{ position:relative; display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:13px; line-height:1.45; color:var(--muted); }
.dfd-check input{ position:absolute; opacity:0; width:1px; height:1px; }
.dfd-check-box{ flex:none; width:19px; height:19px; margin-top:1px; border-radius:6px; border:1.5px solid var(--line-strong);
  display:grid; place-items:center; transition:background .15s, border-color .15s; }
.dfd-check input:checked + .dfd-check-box{ background:var(--accent); border-color:var(--accent); }
.dfd-check input:checked + .dfd-check-box::after{ content:''; width:5px; height:9px; margin-top:-2px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.dfd-check input:focus-visible + .dfd-check-box{ outline:2px solid var(--accent); outline-offset:2px; }
.dfd-check a{ color:var(--accent-ink); text-decoration:underline; }

.dfd-auth-error{ font-size:13px; color:var(--warm); font-weight:600; line-height:1.4; }

.dfd-auth-primary{ cursor:pointer; font-family:var(--sans); font-weight:700; font-size:14.5px; color:#fff;
  background:var(--accent); border:none; border-radius:13px; padding:16px; margin-top:2px;
  transition:transform .25s, filter .25s, opacity .2s; }
.dfd-auth-primary:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.dfd-auth-primary:disabled{ opacity:.65; cursor:default; transform:none; filter:none; }
.dfd-auth-note{ text-align:center; font-size:12.5px; color:var(--muted-2); margin:2px 0 0; }

.dfd-auth-or{ display:flex; align-items:center; gap:14px; margin:8px 0; }
.dfd-auth-or span{ flex:1; height:1px; background:var(--line); }
.dfd-auth-or em{ font-style:normal; font-size:12px; color:var(--muted-2); }

.dfd-auth-google{ cursor:pointer; display:flex; align-items:center; justify-content:center; gap:11px;
  font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:13px; padding:14px; transition:background .2s, border-color .2s; }
.dfd-auth-google:hover{ background:rgba(127,127,127,.08); border-color:var(--ink); }
.dfd-auth-google img{ width:18px; height:18px; }
.dfd-auth-pulse{ box-shadow:0 0 0 3px rgba(59,62,255,.3); }

.dfd-auth-legal{ text-align:center; font-size:12px; color:var(--muted-2); line-height:1.5; margin:6px 0 0; }
.dfd-auth-legal a{ color:var(--accent-ink); }

.dfd-auth-envelope{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:rgba(59,62,255,.12); color:var(--accent-ink); margin-bottom:20px; }
.dfd-auth-sent-email{ color:var(--ink); }
.dfd-auth-sent-actions{ display:flex; justify-content:center; gap:22px; margin-top:22px; }
.dfd-auth-link{ cursor:pointer; background:none; border:none; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--accent-ink); padding:0; }
.dfd-auth-link.muted{ color:var(--muted); }
.dfd-auth-link:hover{ text-decoration:underline; }

.dfd-auth-gate{ max-width:452px; margin:18px auto 0; display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:14px; background:var(--dark); color:#fff; }
.dfd-auth-gate strong{ font-weight:700; font-size:13px; letter-spacing:.3px; display:block; }
.dfd-auth-gate p{ font-size:13px; color:rgba(255,255,255,.68); margin:2px 0 0; line-height:1.45; }
.dfd-auth-gate-icon{ flex:none; }
.dfd-auth-gate-icon .picto{ width:18px; height:18px; color:#fff; }

/* =====================================================================
   PAGE COMPTE — en-tête profil éditorial (.dfd-acc-*)
   ===================================================================== */
.account-page .account-content{ max-width:760px; margin:0 auto!important; padding:88px clamp(18px,5vw,24px) 90px!important; }
.account-page .account-card{ background:transparent!important; border:none!important; box-shadow:none!important; padding:0!important; border-radius:0!important; }
.account-header{ margin-bottom:16px!important; border:none!important; }
.dfd-acc-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.dfd-acc-eyebrow .line{ width:30px; height:1px; background:var(--accent-ink); display:inline-block; }
.dfd-acc-eyebrow .txt{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1; color:var(--accent-ink)!important; }
.account-page .dfd-acc-heading{ font-family:var(--serif)!important; font-weight:500!important; color:var(--ink-2)!important;
  font-size:clamp(32px,5vw,52px)!important; letter-spacing:-.5px!important; margin:0 0 22px!important; line-height:1.04!important; text-align:left; }
.dfd-acc-profile{ display:flex; align-items:center; gap:20px; padding:22px 24px; border-radius:18px;
  border:1px solid var(--line); background:var(--surface); }
.dfd-acc-avatar{ flex:none; width:60px; height:60px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-family:var(--sans); font-size:21px; font-weight:800; letter-spacing:.4px; }
.dfd-acc-id{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.dfd-acc-id .user-email{ font-size:16px; font-weight:600; color:var(--ink-2)!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dfd-acc-id .account-status{ font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted)!important; }
.dfd-acc-id .account-status.premium{ color:var(--accent-ink)!important; }
.dfd-acc-since{ font-size:12.5px; color:var(--muted-2)!important; }
.account-page .account-section{ margin-bottom:14px!important; }
/* surcharges de spécificité (le groupe .account-card span->ink capturait avatar/statut) */
body .account-card .dfd-acc-avatar{ color:#fff!important; }
.dfd-acc-id .account-status{ color:var(--muted)!important; background:none!important; padding:0!important; }
.dfd-acc-id .account-status.premium{ background:var(--accent)!important; color:#fff!important;
  padding:3px 11px!important; border-radius:999px!important; display:inline-block; align-self:flex-start;
  font-size:10px!important; letter-spacing:1.2px; }
/* Historique des paiements lisible sur crème */
.payment-item{ background:var(--surface)!important; border:1px solid var(--line)!important; border-radius:14px!important; }
.payment-date{ color:var(--ink-2)!important; font-weight:600; }
.payment-amount{ color:var(--ink)!important; }
.no-payments{ color:var(--muted)!important; }
.invoice-button{ background:transparent!important; color:var(--ink)!important;
  border:1px solid var(--line-strong)!important; border-radius:999px!important; }
.invoice-button:hover{ background:rgba(127,127,127,.08)!important; border-color:var(--ink)!important; }
.invoice-button .picto{ width:16px; height:16px; }

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