/*
 Theme Name:  IA Girlfriend FR
 Template:    generatepress
 Version:     1.0.0
 Description: Comparatif petite amie IA — ia-girlfriend.fr
 Text Domain: ia-gf
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&family=Inter:wght@400;600&display=swap');
@import './tokens.css';


/* ═══════════════════════════════════════════════════════
   BASE — reset & fondamentaux
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p { max-width: var(--measure); }

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }

img { max-width: 100%; height: auto; display: block; }

/* Accessibilité focus */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}


/* ═══════════════════════════════════════════════════════
   LAYOUT — conteneurs et grille
   ═══════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: var(--max-narrow);
}

.section {
  padding-block: var(--space-16);
}

.section--surface {
  background: var(--color-surface);
}

.section__title {
  margin-block-end: var(--space-4);
}

.section__lead {
  margin-block-end: var(--space-10);
  color: var(--color-muted);
  font-size: var(--text-small);
}


/* ═══════════════════════════════════════════════════════
   GENERATEPRESS — overrides navigation
   ═══════════════════════════════════════════════════════ */

/* Fond header */
.site-header {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Logo site */
.site-title a,
.site-title a:visited {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.125rem;
  color: var(--color-ink);
  text-decoration: none;
}

/* Nav links */
.main-navigation a {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-small);
  color: var(--color-ink);
}

.main-navigation a:hover {
  color: var(--color-accent);
}

/* CTA dans le menu : classe .nav-cta à ajouter via WP Admin → Menus → CSS class */
.main-navigation .nav-cta > a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-paper) !important;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}

.main-navigation .nav-cta > a:hover {
  background: var(--color-accent-hover);
  color: var(--color-paper) !important;
}

/* Mobile hamburger (N6 — discret) */
.menu-toggle {
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-small);
  cursor: pointer;
}

.menu-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}


/* ═══════════════════════════════════════════════════════
   HERO — typographic-only (pas d'image)
   ═══════════════════════════════════════════════════════ */

.hero {
  padding-block: var(--space-20) var(--space-16);
  text-align: center;
}

.hero .eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-block-end: var(--space-4);
  max-width: none;
}

.hero__title {
  font-size: var(--text-hero);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-block: var(--space-3) var(--space-5);
  max-width: none;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--color-muted);
  max-width: 55ch;
  margin-inline: auto;
  margin-block-end: var(--space-8);
}


/* ═══════════════════════════════════════════════════════
   DISCLAIMER BAR — above fold
   ═══════════════════════════════════════════════════════ */

.disclaimer-bar {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.disclaimer-bar p {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-align: center;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--space-6);
}


/* ═══════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-small);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition:
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-paper);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-paper);
  box-shadow: var(--shadow-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

.btn--ghost:hover {
  background: var(--color-accent);
  color: var(--color-paper);
}

.btn--text {
  background: none;
  color: var(--color-accent);
  padding-inline: var(--space-2);
  font-size: var(--text-small);
}

.btn--text:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-body);
}


/* ═══════════════════════════════════════════════════════
   WORKBENCH — grille de cartes
   ═══════════════════════════════════════════════════════ */

.workbench {
  padding-block: var(--space-16);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--gap-grid);
  margin-block-start: var(--space-10);
}

/* ─── Carte ─────────────────────────────────────────── */

.card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-hover);
}

/* En-tête carte */
.card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.card__rank {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  padding-block-start: 0.2rem;
}

/* Rang #1 gold, #2 cuivre */
.card[data-rank="1"] .card__rank { color: var(--color-gold); font-size: var(--text-small); }
.card[data-rank="2"] .card__rank { color: var(--color-gold-2); }

.card__id {
  flex: 1;
  min-width: 0;
}

.card__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.125rem;
  color: var(--color-ink);
  line-height: 1.2;
}

.card__tag {
  display: inline-block;
  margin-block-start: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-muted);
  background: var(--color-surface);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
}

/* Score — fraction tabular-nums */
.card__score {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-score);
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 0.05em;
}

.score__sep {
  opacity: 0.35;
  font-size: 0.75em;
  margin-inline: 0.05em;
}

.score__den {
  font-size: 0.6em;
  opacity: 0.6;
}

/* Score en attente */
.card__score--pending {
  color: var(--color-muted) !important;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

/* Description */
.card__desc {
  font-size: var(--text-small);
  color: var(--color-muted);
  line-height: var(--leading-snug);
  margin: 0;
  max-width: none;
}

/* Listes pros/cons */
.card__pros,
.card__cons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card__pros li,
.card__cons li {
  font-size: var(--text-small);
  padding-inline-start: var(--space-5);
  position: relative;
  line-height: var(--leading-snug);
}

.card__pros li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: var(--weight-bold);
}

.card__cons li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: var(--color-alert);
  font-weight: var(--weight-bold);
}

/* Pied carte */
.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}


/* ═══════════════════════════════════════════════════════
   MÉTHODOLOGIE
   ═══════════════════════════════════════════════════════ */

.method__steps {
  margin-block: var(--space-6);
  padding-inline-start: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.method__steps li {
  font-size: var(--text-small);
  color: var(--color-ink);
  line-height: var(--leading-snug);
}

.method__note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-style: italic;
  margin-block-start: var(--space-6);
}


/* ═══════════════════════════════════════════════════════
   FAQ — accordion details/summary
   ═══════════════════════════════════════════════════════ */

.faq .section__title {
  margin-block-end: var(--space-8);
}

.faq__item {
  border-block-end: 1px solid var(--color-border);
}

.faq__item:first-of-type {
  border-block-start: 1px solid var(--color-border);
}

.faq__q {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  color: var(--color-ink);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: var(--weight-regular);
  color: var(--color-muted);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

details[open] .faq__q::after {
  transform: rotate(45deg);
  color: var(--color-accent);
}

.faq__a {
  padding-block-end: var(--space-5);
}

.faq__a p {
  font-size: var(--text-small);
  color: var(--color-muted);
  line-height: var(--leading-body);
  max-width: var(--measure);
}


/* ═══════════════════════════════════════════════════════
   CTA FINAL
   ═══════════════════════════════════════════════════════ */

.cta-final {
  background: var(--color-surface);
  text-align: center;
}

.cta-final h2 {
  margin-block-end: var(--space-3);
}

.cta-final p {
  color: var(--color-muted);
  max-width: 48ch;
  margin-inline: auto;
  margin-block-end: var(--space-8);
}

.cta__sub {
  margin-block-start: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-block-end: 0;
}


/* ═══════════════════════════════════════════════════════
   FOOTER — Ft5 (statement + légal + disclaimer)
   ═══════════════════════════════════════════════════════ */

.site-footer {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--space-12);
}

.site-footer .footer-statement {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3);
  margin-block-end: var(--space-3);
  color: var(--color-paper);
}

.site-footer .footer-tagline {
  font-size: var(--text-small);
  color: oklch(70% 0.01 243);
  margin-block-end: var(--space-8);
  max-width: 48ch;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-block-end: var(--space-8);
  list-style: none;
  padding: 0;
  margin-inline: 0;
}

.footer-nav a {
  font-size: var(--text-xs);
  color: oklch(65% 0.01 243);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-paper);
}

.footer-disclaimer {
  font-size: var(--text-xs);
  color: oklch(55% 0.01 243);
  line-height: var(--leading-body);
  max-width: var(--measure);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid oklch(30% 0.01 243);
}

/* Override GP footer defaults */
.site-footer .copyright-bar {
  display: none;
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .container { padding-inline: var(--space-4); }
  .section   { padding-block: var(--space-12); }
  .hero      { padding-block: var(--space-16) var(--space-12); }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .card__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .card__foot .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 1.875rem;
  }
}

/* ═══════════════════════════════════════════════════════
   AGE GATE — override Age Gate plugin v3.7+
   Classe réelles : .age-gate / .age-gate__form / etc.
   ═══════════════════════════════════════════════════════ */

/* Background overlay — semi-transparent */
.age-gate__background-color {
  background: var(--color-paper) !important;
  opacity: 1 !important;
}

/* Dialog principal — centré plein écran */
.age-gate[role="dialog"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100dvh !important;
  background: var(--color-paper) !important;
  padding: var(--space-8) var(--space-6) !important;
  text-align: center !important;
}

/* Formulaire — épuré */
.age-gate__form {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  max-width: 44ch !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-6) !important;
}

/* Logo / titre de la gate */
.age-gate__heading {
  margin-bottom: var(--space-4) !important;
}

.age-gate__heading-title {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: 1.125rem !important;
  color: var(--color-ink) !important;
  letter-spacing: -0.01em !important;
}

/* Titre de la page (Age Verification) */
.age-gate__title,
.age-gate [class*="__title"] {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-h2) !important;
  color: var(--color-ink) !important;
  line-height: var(--leading-tight) !important;
  margin-bottom: var(--space-3) !important;
}

/* Description */
.age-gate__subheadline,
.age-gate p {
  font-family: var(--font-body) !important;
  font-size: var(--text-small) !important;
  color: var(--color-muted) !important;
  max-width: 40ch !important;
  line-height: var(--leading-body) !important;
  margin-bottom: var(--space-6) !important;
}

/* MASQUER les champs date + labels + remember */
.age-gate__fields,
.age-gate__form-elements,
.age-gate__input,
.age-gate__label,
.age-gate__remember-wrapper {
  display: none !important;
  visibility: hidden !important;
}

/* Bouton submit — principal CTA */
.age-gate__button-wrapper,
.age-gate [class*="__button"] {
  display: flex !important;
  justify-content: center !important;
}

.age-gate button[type="submit"],
.age-gate input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--space-4) var(--space-10) !important;
  background: var(--color-accent) !important;
  color: var(--color-paper) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-medium) !important;
  font-size: var(--text-body) !important;
  cursor: pointer !important;
  transition: background var(--dur-base) var(--ease-out) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.age-gate button[type="submit"]:hover,
.age-gate input[type="submit"]:hover {
  background: var(--color-accent-hover) !important;
}

.age-gate button[type="submit"]:active,
.age-gate input[type="submit"]:active {
  transform: translateY(1px) !important;
}

/* Masquer erreurs / messages non pertinents */
.age-gate__error { display: none !important; }

/* Accessibilité — reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
  html { scroll-behavior: auto; }
}