/* ═══════════════════════════════════════════════════════════════════════════
   FRBTP Guyane - VAGUE 2F - Monétisation (Tarifs, Espace annonceur, Adhérent)
   Direction FRBTP Clair. Scope : ce fichier ne charge que sur ces 3 pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filet de compat (variables manquantes du socle, non redéfinies ailleurs
      dans le thème : grays, statuts, radius, ombres). Additif uniquement,
      ne touche pas variables.css / main.css (propriété Vague 1A). ────────── */
:root {
  --frbtp-gray-50:  var(--bg-2);
  --frbtp-gray-100: #E9EDF3;
  --frbtp-gray-200: var(--line);
  --frbtp-gray-400: #A8B3C2;
  --frbtp-gray-600: var(--muted);
  --frbtp-danger:   #C0392B;
  --frbtp-info:     var(--blue);
  --frbtp-warning:  var(--orange-fill);
  --shadow-sm:      0 1px 2px rgba(22,32,46,.06);
  --shadow-md:      var(--shadow-card);
  --shadow-lg:      var(--shadow-hover);
}

/* ── Chamfer + filet bleu, signature 1D-D1 (remplace le radius gadget) ──── */
.frbtp-v2f-card {
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
  /* VAGUE 4 pt.9 : cartes en colonne, CTA aligné en bas quel que soit le
     contenu (badge/features en nombre variable) - fix boutons "Publier"
     désalignés entre cards de /tarifs/ (et /espace-annonceur/, même
     classe). Alignement de grille légitime (Leçon 28 vise le centrage
     vertical d'une section, pas l'alignement bas d'un bouton dans des
     cards de hauteur égale). */
  display: flex;
  flex-direction: column;
}
.frbtp-v2f-card > .frbtp-btn {
  margin-top: auto;
}
.frbtp-v2f-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--blue);
  transition: width var(--transition);
}
.frbtp-v2f-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.frbtp-v2f-card:hover::before { width: 5px; }
.frbtp-v2f-card--featured {
  border-color: var(--blue-tint-line);
  background: var(--bg-blue-tint);
}
.frbtp-v2f-card--featured::before { background: var(--orange); }

/* ── Badge épinglé en haut d'une card (formules "Recommandé"/"Populaire") :
      modificateur de position sur la classe canonique .frbtp-badge--gold,
      pas un composant séparé ni un style inline (TOKENS.md "Bordure
      vivante" §3 - une seule implémentation par concept).
      IN-FLOW et non position:absolute avec débord négatif : le clip-path
      chamfer des cards clippe toute la descendance, un badge à top:-10px
      était rendu coupé en deux (constaté capture réelle 2026-07-23). ──────── */
.frbtp-badge--pin {
  align-self: center;          /* parents flex (.frbtp-v2f-card)            */
  margin-bottom: var(--space-2);
}

/* ── Badge "Sur devis" (au lieu d'un montant inventé) ────────────────────── */
.frbtp-v2f-devis {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.frbtp-v2f-devis--muted {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--muted);
  font-style: italic;
}
.frbtp-v2f-per-day {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-top: 2px;
}

/* ── CTA orange accessible (blanc sur orange-fill = 4.96:1 AA, jamais
      blanc sur orange plein qui échoue le contraste, G1) ──────────────────── */
.frbtp-annonceur-cta-block .frbtp-btn--primary,
.frbtp-pricing-card .frbtp-btn--primary,
.frbtp-formule-card .frbtp-btn--primary,
.frbtp-org-branch .frbtp-btn--primary,
.frbtp-v2f-card .frbtp-btn--primary {
  background: var(--orange-fill);
  border-color: var(--orange-fill);
  color: #fff;
}
.frbtp-annonceur-cta-block .frbtp-btn--primary:hover,
.frbtp-pricing-card .frbtp-btn--primary:hover,
.frbtp-formule-card .frbtp-btn--primary:hover,
.frbtp-org-branch .frbtp-btn--primary:hover,
.frbtp-v2f-card .frbtp-btn--primary:hover {
  background: var(--orange-text);
  border-color: var(--orange-text);
  color: #fff;
}

/* ── CTA final espace annonceur : bande bleue de marque, texte blanc AAA
      (seule déclaration : la redéfinition legacy dans le <style> embarqué de
      page-espace-annonceur.php a été retirée, zéro !important requis, G10) ── */
.frbtp-annonceur-cta-section {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
}
.frbtp-annonceur-cta-block { color: #fff; }
.frbtp-annonceur-cta-block h2 { color: #fff; }
.frbtp-annonceur-cta-block p { color: rgba(255,255,255,.92); }

/* ── Adhésion : paliers de CA sans montant (TAR1) ────────────────────────── */
.frbtp-v2f-adhesion-tier {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}
.frbtp-v2f-adhesion-tier__kicker {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.frbtp-v2f-adhesion-tier__ca {
  font-family: var(--font-numbers);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--blue);
  line-height: 1.25;
  margin-bottom: var(--space-6);
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frbtp-v2f-adhesion-tier__benefits {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--ink);
}
.frbtp-v2f-adhesion-tier__benefits li {
  padding: var(--space-1) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.frbtp-v2f-adhesion-tier__benefits li::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Réductions adhérents : mention brève, sans détail (TAR4) ────────────── */
.frbtp-v2f-reduction-note {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--bg-blue-tint);
  border: 1px solid var(--blue-tint-line);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
  padding: var(--space-6) var(--space-8);
  margin-top: var(--space-10);
  max-width: 760px;
}
.frbtp-v2f-reduction-note__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
}
.frbtp-v2f-reduction-note p { margin: 0; color: var(--ink); font-size: var(--font-size-md); }
.frbtp-v2f-reduction-note strong { color: var(--blue); }

/* ── Espace adhérent : bandeau tarifs (ADH1, remplace l'ancienne grille) ── */
.frbtp-v2f-tarifs-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  background: var(--bg-blue-tint);
  border: 1px solid var(--blue-tint-line);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
  padding: var(--space-8);
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.frbtp-v2f-tarifs-banner__text h2 { margin: 0 0 var(--space-2); color: var(--blue); font-size: var(--font-size-xl); }
.frbtp-v2f-tarifs-banner__text p { margin: 0; color: var(--muted); }
.frbtp-v2f-tarifs-banner .frbtp-btn { flex-shrink: 0; }

/* ── Espace adhérent : grille Connexion / Devenir adhérent ───────────────
      Corrige un débordement mobile pré-existant (grid-template-columns:1fr 1fr
      en style inline, sans breakpoint - texte tronqué sur petit écran). ──── */
.frbtp-v2f-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  max-width: 900px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Vocabulaire partagé des espaces connectés (2F-R2, 2026-07-23)
   Source unique pour Espace annonceur ET Espace adhérent (TOKENS.md
   "Bordure vivante" pt.3 : une seule implémentation par concept).
   Déplacé depuis le <style> scopé de page-espace-annonceur.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Auth Card ────────────────────────────────────────────────────────────── */
.frbtp-auth-section { padding: var(--space-16) 0; }
.frbtp-auth-card {
  background: var(--bg); box-shadow: var(--shadow-lg);
  padding: var(--space-10) var(--space-8); border: 1px solid var(--frbtp-gray-100);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
}
.frbtp-auth-card__header { text-align: center; margin-bottom: var(--space-8); }
.frbtp-auth-card__title { font-family: var(--font-display); font-size: var(--font-size-3xl); margin: 0 0 var(--space-2); color: var(--frbtp-primary); }
.frbtp-auth-card__subtitle { color: var(--frbtp-text-muted); margin: 0; }
.frbtp-auth-card__footer { text-align: center; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--frbtp-gray-200); }
.frbtp-auth-card__footer p { margin: 0; color: var(--frbtp-text-muted); }
.frbtp-auth-card__footer a { color: var(--frbtp-primary); font-weight: 600; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.frbtp-form-group { margin-bottom: var(--space-5); }
.frbtp-form-label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--frbtp-text); margin-bottom: var(--space-2); }
.frbtp-required { color: var(--frbtp-danger); }
.frbtp-form-input,
.frbtp-form-select,
.frbtp-form-textarea {
  display: block; width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--font-size-md);
  border: 1px solid var(--frbtp-gray-200); border-radius: 6px; background: #fff;
  color: var(--frbtp-text); transition: border-color var(--transition), box-shadow var(--transition);
  font-family: var(--font-sans); box-sizing: border-box;
}
.frbtp-form-input:focus,
.frbtp-form-select:focus,
.frbtp-form-textarea:focus { outline: none; border-color: var(--frbtp-primary); box-shadow: 0 0 0 3px rgba(4,68,155,0.1); }
.frbtp-form-textarea { resize: vertical; min-height: 100px; }
.frbtp-form-file { font-size: var(--font-size-sm); }
.frbtp-form-help { font-size: var(--font-size-xs); color: var(--frbtp-text-muted); margin-top: var(--space-1); }
.frbtp-form-checkbox { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--font-size-sm); }
.frbtp-form-checkbox input { margin-top: 3px; flex-shrink: 0; }
.frbtp-form-link { font-size: var(--font-size-sm); color: var(--frbtp-primary); text-decoration: none; }
.frbtp-form-link:hover { text-decoration: underline; }
.frbtp-form-row { display: flex; gap: var(--space-5); }
.frbtp-form-row--2col > * { flex: 1; }
.frbtp-form-row--between { justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
.frbtp-form-actions { display: flex; gap: var(--space-4); justify-content: flex-end; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--frbtp-gray-200); }
.frbtp-form-section {
  border: 1px solid var(--frbtp-gray-200); padding: var(--space-8) var(--space-6); margin-bottom: var(--space-6); background: #fff;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
}
.frbtp-form-section__title { font-size: var(--font-size-lg); font-weight: 700; display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: 0; }
.frbtp-form-section__number {
  width: 32px; height: 32px; border-radius: 50%; background: var(--frbtp-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: 700; flex-shrink: 0;
}

/* ── Dashboard (stats / actions / sections) ───────────────────────────────── */
.frbtp-dashboard__header h1 { font-size: var(--font-size-3xl); margin: 0 0 var(--space-1); }
.frbtp-dashboard__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin: var(--space-8) 0; }
.frbtp-stat-card {
  background: #fff; padding: var(--space-6);
  display: flex; align-items: center; gap: var(--space-4); box-shadow: var(--shadow-sm);
  border: 1px solid var(--frbtp-gray-100);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
}
.frbtp-stat-card__icon {
  width: 48px; height: 48px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.frbtp-stat-card__icon--primary { background: rgba(4,68,155,0.1); color: var(--frbtp-primary); }
.frbtp-stat-card__icon--success { background: rgba(17,148,71,0.1); color: var(--frbtp-success); }
.frbtp-stat-card__icon--warning { background: rgba(243,151,25,0.1); color: var(--frbtp-warning); }
.frbtp-stat-card__icon--info    { background: rgba(4,68,155,0.1); color: var(--frbtp-info); }
.frbtp-stat-card__number { display: block; font-size: var(--font-size-2xl); font-weight: 800; color: var(--frbtp-text); }
.frbtp-stat-card__label { font-size: var(--font-size-xs); color: var(--frbtp-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.frbtp-dashboard__section-title { font-size: var(--font-size-xl); font-weight: 700; margin: 0 0 var(--space-5); }
.frbtp-dashboard__actions { margin-bottom: var(--space-8); }
.frbtp-dashboard__actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.frbtp-action-card {
  position: relative; isolation: isolate;
  background: #fff; border: 1px solid var(--frbtp-gray-200);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
  padding: var(--space-6); text-align: center; text-decoration: none; color: var(--frbtp-text);
  transition: all var(--transition); display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.frbtp-action-card:hover { border-color: var(--frbtp-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.frbtp-action-card span { font-weight: 600; font-size: var(--font-size-sm); }

/* ── Activity list ────────────────────────────────────────────────────────── */
.frbtp-activity-list {
  background: #fff; border: 1px solid var(--frbtp-gray-100); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
}
.frbtp-activity-item {
  display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--frbtp-gray-100);
}
.frbtp-activity-item:last-child { border-bottom: none; }
.frbtp-activity-item__info strong { display: block; font-size: var(--font-size-sm); }
.frbtp-activity-item__info span { font-size: var(--font-size-xs); }
.frbtp-activity-item__meta { display: flex; align-items: center; gap: var(--space-3); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.frbtp-empty-state {
  text-align: center; padding: var(--space-16) var(--space-8);
  background: #fff; border: 2px dashed var(--frbtp-gray-200);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
}
.frbtp-empty-state p { color: var(--frbtp-text-muted); margin: var(--space-4) 0; }

/* ── Filter tabs ──────────────────────────────────────────────────────────── */
.frbtp-filter-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.frbtp-filter-tab {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--font-size-sm);
  font-weight: 500; text-decoration: none; color: var(--frbtp-text-muted); background: #fff;
  border: 1px solid var(--frbtp-gray-200); transition: all var(--transition);
}
.frbtp-filter-tab:hover { border-color: var(--frbtp-primary); color: var(--frbtp-primary); }
.frbtp-filter-tab--active { background: var(--frbtp-primary); color: #fff; border-color: var(--frbtp-primary); }

/* ── Table ────────────────────────────────────────────────────────────────── */
.frbtp-annonces-table-wrap {
  background: #fff; border: 1px solid var(--frbtp-gray-100); overflow-x: auto;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-card)) 0, 100% var(--chamfer-card), 100% 100%, 0 100%);
}
.frbtp-annonces-table { width: 100%; border-collapse: collapse; }
.frbtp-annonces-table th {
  text-align: left; padding: var(--space-4) var(--space-5); font-size: var(--font-size-xs);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--frbtp-text-muted);
  background: var(--frbtp-gray-50); border-bottom: 1px solid var(--frbtp-gray-200);
}
.frbtp-annonces-table td { padding: var(--space-4) var(--space-5); font-size: var(--font-size-sm); border-bottom: 1px solid var(--frbtp-gray-100); }
.frbtp-annonces-table tr:last-child td { border-bottom: none; }
.frbtp-annonces-table__actions { display: flex; gap: var(--space-2); }
.frbtp-btn-icon {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--frbtp-gray-200); background: #fff;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-sm, 6px)) 0, 100% var(--chamfer-sm, 6px), 100% 100%, 0 100%);
  color: var(--frbtp-text-muted); cursor: pointer; transition: all var(--transition);
}
.frbtp-btn-icon:hover { border-color: var(--frbtp-primary); color: var(--frbtp-primary); }
.frbtp-btn-icon--danger:hover { border-color: var(--frbtp-danger); color: var(--frbtp-danger); }

/* ── Review summary ───────────────────────────────────────────────────────── */
.frbtp-review-summary { padding: var(--space-4); background: var(--frbtp-gray-50); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }

/* ── Espace adhérent : layout dashboard (2F-R2) ───────────────────────────── */
.frbtp-dashboard__stats--3 { grid-template-columns: repeat(3, 1fr); }
.frbtp-adherent-layout { display: grid; grid-template-columns: 250px 1fr; gap: var(--space-8); align-items: start; }
.frbtp-adherent-nav ul { list-style: none; margin: 0; padding: 0; }
.frbtp-adherent-nav a {
  display: block; padding: var(--space-3) var(--space-3); font-size: var(--font-size-sm); font-weight: 500;
  color: var(--frbtp-text-muted); text-decoration: none; border-left: 3px solid transparent;
  transition: all var(--transition);
}
.frbtp-adherent-nav a:hover { color: var(--frbtp-primary); background: rgba(4,68,155,0.04); border-left-color: var(--frbtp-primary); text-decoration: none; }
.frbtp-adherent-anchor { scroll-margin-top: 110px; }
.frbtp-adherent-welcome { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.frbtp-adherent-welcome__meta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* ── Responsive (G6 mobile app-like : cartes empilées, lisibles) ─────────── */
@media (max-width: 1024px) {
  .frbtp-dashboard__stats { grid-template-columns: repeat(2, 1fr); }
  .frbtp-adherent-layout { grid-template-columns: 1fr; }
  .frbtp-adherent-nav { display: none; }
}
@media (max-width: 768px) {
  .frbtp-v2f-auth-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .frbtp-v2f-reduction-note { flex-direction: column; align-items: flex-start; text-align: left; }
  .frbtp-v2f-tarifs-banner { flex-direction: column; text-align: center; }
  .frbtp-v2f-tarifs-banner__text { text-align: center; }
  .frbtp-v2f-adhesion-tier__ca { font-size: var(--font-size-lg); }
  .frbtp-form-row--2col { flex-direction: column; }
  .frbtp-dashboard__stats { grid-template-columns: 1fr; }
  .frbtp-dashboard__actions-grid { grid-template-columns: 1fr; }
  .frbtp-filter-tabs { overflow-x: auto; }
  .frbtp-annonces-table thead { display: none; }
  .frbtp-annonces-table tr { display: block; margin-bottom: var(--space-3); border: 1px solid var(--frbtp-gray-200); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
  .frbtp-annonces-table td { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4); }
  .frbtp-annonces-table td::before { content: attr(data-label); font-weight: 600; color: var(--frbtp-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; }
  .frbtp-form-actions { flex-direction: column; }
  .frbtp-auth-card { padding: var(--space-6) var(--space-5); }
}