/* ==========================================================================
   Page tarifs RM Console — v4 « synergie SEO + GEO »
   Remplace le tableau desktop + la liste mobile de index_console_new.php par
   une mise en page unique et responsive.

   Tout est scopé sous .pricing-v4 : la feuille cohabite sans conflit avec
   pricing.css et pricing_console_v3.css, encore chargées pour les encarts
   (FAQ, moteurs IA, questions) situés sous le bloc tarifs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Largeur de la page
   Au-delà de 1600px, BootstrapXL.css élargit .container de 1170 à 1570px.
   On maintient toute la colonne au cran précédent — bloc tarifs comme encarts
   situés en dessous (FAQ, moteurs IA, questions) — pour éviter que le contenu
   s'étire au point de nuire à la lecture.

   Le plafond est posé sur la colonne et non sur .container : la feuille n'est
   chargée que sur cette page, mais .container porte aussi l'en-tête et le menu,
   qui doivent garder la largeur des autres pages du site.
   -------------------------------------------------------------------------- */
.pricing-v4-page {
  max-width: 1170px;
  /* .col-md-12 est en float:left ; sur un élément flottant les marges auto
     ne centrent pas. On repasse en bloc normal — sans effet sur la grille,
     la colonne occupant de toute façon les 12 unités. */
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.pricing-v4 {
  /* --- Surfaces --- */
  --surface-1: #f7f6f3;
  --surface-2: #ffffff;

  /* --- Texte --- */
  --text-primary:   #1c1b19;
  --text-secondary: #6c6a65;
  --text-muted:     #9b9892;
  --text-success:   #3f8a4b;

  /* --- Accent --- */
  --text-accent:    #286090;  /* icône « SEO et GEO réunis » */
  --bg-accent:      #cde2fb;  /* aplats doux : bannière d'essai, badge */
  --on-bg-accent:   #286090;  /* texte sur --bg-accent — 5,1:1, WCAG AA */
  --border-accent:  #337ab7;  /* cadre de la carte mise en avant */
  --fill-accent:    #337ab7;  /* interrupteur crédits IA (actif) */

  /* --- Bordures --- */
  --border:        #e6e3dd;
  --border-strong: #cfcbc2;

  /* --- Remplissages pleins --- */
  --fill-primary: #337ab7;  /* = .btn-primary BS3 ; #449d44 pour btn-success */
  --on-primary:   #ffffff;  /* 4,55:1 sur #337ab7 — WCAG AA */

  --radius: 8px;

  /* Facteur d'échelle typographique du bloc. Toutes les tailles du panneau
     sont exprimées en calc(Npx * var(--fs)) : une seule valeur à changer pour
     grossir ou réduire l'ensemble sans toucher aux proportions. */
  --fs: 1.08;

  color: var(--text-primary);
  font-size: calc(14px * var(--fs));
  line-height: 1.5;

  /* Redondant avec .pricing-v4-page sur la page tarifs, mais garde le
     composant autonome s'il est réutilisé hors de cette colonne. */
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

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

/* --------------------------------------------------------------------------
   Panneau + en-tête
   -------------------------------------------------------------------------- */
.pricing-v4__panel {
  background: var(--surface-1);
  border-radius: 12px;
  padding: 20px;
}

.pricing-v4__head { text-align: center; margin-bottom: 14px; }

.pricing-v4__title {
  font-size: calc(22px * var(--fs));
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}
.pricing-v4__subtitle {
  font-size: calc(13px * var(--fs));
  color: var(--text-secondary);
  margin: 4px 0 0;
}

/* --------------------------------------------------------------------------
   Bannière d'essai gratuit 60 jours (remplace l'ancienne colonne « Gratuite »)
   -------------------------------------------------------------------------- */
.pricing-v4__trial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-accent);
  color: var(--on-bg-accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.pricing-v4__trial .ti { color: inherit; font-size: calc(18px * var(--fs)); flex: none; }
.pricing-v4__trial-text { font-size: calc(13px * var(--fs)); }
.pricing-v4__trial .pricing-v4__cta {
  font-size: calc(12px * var(--fs));
  padding: 4px 10px;
  white-space: nowrap;
  flex: none;
  margin: 0;
  width: auto;
}

/* --------------------------------------------------------------------------
   Barre de contrôles : périodicité + option crédits IA
   -------------------------------------------------------------------------- */
.pricing-v4__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* --- Sélecteur mensuel / annuel --- */
.pricing-v4__seg {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.pricing-v4__seg-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pricing-v4__seg-label {
  font-size: calc(12px * var(--fs));
  font-weight: 400;
  padding: 5px 12px;
  margin: 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
/* Segment actif en noir plutôt qu'en --fill-primary : le bleu est réservé
   aux appels à l'action (bannière d'essai), ce sélecteur n'en est pas un. */
.pricing-v4__seg-input:checked + .pricing-v4__seg-label {
  background: var(--text-primary);
  color: var(--on-primary);
}
.pricing-v4__seg-input:focus-visible + .pricing-v4__seg-label {
  outline: 2px solid var(--border-accent);
  outline-offset: -2px;
}
.pricing-v4__seg-hint { opacity: .85; }

/* --- Interrupteur « Option crédits IA Standard » --- */
.pricing-v4__opt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-v4__opt-label {
  font-size: calc(12px * var(--fs));
  color: var(--text-secondary);
  margin: 0;
  cursor: pointer;
}
/* L'enveloppe est un <label for="credits_switch"> : la piste colorée est
   peinte au-dessus de l'input (elle est positionnée et vient après lui dans
   le DOM), elle intercepterait donc le clic. Le label le rattrape. */
.pricing-v4__toggle {
  margin: 0;
  display: inline-flex;
  position: relative;   /* contient l'input en position absolue */
  cursor: pointer;
}
.pricing-v4__toggle input {
  position: absolute;
  opacity: 0;
  width: 34px; height: 18px;
  margin: 0;
  cursor: pointer;
}
.pricing-v4__toggle-track,
.pricing-v4__toggle-knob { pointer-events: none; }
.pricing-v4__toggle-track {
  width: 34px; height: 18px;
  border-radius: 9px;
  background: var(--border-strong);
  position: relative;
  display: inline-block;
  transition: background .15s ease;
}
.pricing-v4__toggle-knob {
  position: absolute;
  left: 2px; top: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface-2);
  transition: transform .15s ease;
}
.pricing-v4__toggle input:checked ~ .pricing-v4__toggle-track {
  background: var(--fill-accent);
}
.pricing-v4__toggle input:checked ~ .pricing-v4__toggle-track .pricing-v4__toggle-knob {
  transform: translateX(16px);
}
.pricing-v4__toggle input:focus-visible ~ .pricing-v4__toggle-track {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Cartes de formules
   -------------------------------------------------------------------------- */
.pricing-v4__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pricing-v4__plan {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  position: relative;
}
.pricing-v4__plan--featured {
  border: 2px solid var(--border-accent);
}

.pricing-v4__badge {
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-accent);
  color: var(--on-bg-accent);
  font-size: calc(11px * var(--fs));
  padding: 2px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.pricing-v4__plan-name { font-size: calc(15px * var(--fs)); font-weight: 500; margin: 0; }

/* Poppins est importée globalement par base.css (poids 200 à 700) : rien à
   charger en plus. C'est déjà la police des prix sur l'ancienne page
   (.prix-formule dans pricing_console_v3.css). */
.pricing-v4__price {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(21px * var(--fs));
  font-weight: 500;
  margin: 6px 0 0;
}
.pricing-v4__price-freq {
  font-size: calc(11px * var(--fs));
  font-weight: 400;
  color: var(--text-muted);
}
/* Lignes affichées en périodicité annuelle. Elles encadrent le prix : le
   tarif mensuel de référence barré au-dessus, le total annuel en dessous.
   Toutes deux portent .prix-annuel et apparaissent ensemble via fadeIn(). */
.pricing-v4__price-old {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(12px * var(--fs));
  line-height: 1.4;
  color: var(--text-muted);
  margin: 6px 0 0;
}
.pricing-v4__price-year {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(11px * var(--fs));
  font-weight: 400;
  color: var(--text-muted);
  margin: 2px 0 0;
}

/* Bouton « Choisir » / « Commencer » — <a> stylé en bouton plein */
.pricing-v4__cta {
  display: block;
  width: 100%;
  margin: 10px 0;
  font-size: calc(13px * var(--fs));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--on-primary);
  background: var(--fill-primary);
  border: 0;
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s ease;
}
.pricing-v4__cta:hover,
.pricing-v4__cta:focus { color: var(--on-primary); text-decoration: none; opacity: .88; }
.pricing-v4__cta:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }

/* Boutons « Choisir » : vert .btn-success de Bootstrap 3, comme sur
   l'ancienne page. Le CTA de la bannière d'essai garde son aplat bleu — ce
   n'est pas un « Choisir », et la distinction hiérarchise les deux appels.
   Le blanc sur #5cb85c ne donne que 2,5:1, sous le seuil WCAG AA de 4,5:1
   (défaut connu de btn-success) ; #2e7d32 monterait à 5,1:1. */
.pricing-v4__plan .pricing-v4__cta {
  background: #5cb85c;
}
.pricing-v4__plan .pricing-v4__cta:hover,
.pricing-v4__plan .pricing-v4__cta:focus {
  background: #449d44;
  opacity: 1;
}

.pricing-v4__features { font-size: calc(12px * var(--fs)); line-height: 1.9; color: var(--text-primary); }
.pricing-v4__feature--off { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Message de positionnement + auteurs + logos
   -------------------------------------------------------------------------- */
/* Ce bloc vit hors des panneaux gris, sur le fond de page. Ses marges
   verticales font tout l'espacement entre les deux panneaux. */
.pricing-v4__synergy { text-align: center; margin: 26px auto; max-width: 560px; }
.pricing-v4__synergy-title {
  font-size: calc(14px * var(--fs));
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
}
.pricing-v4__synergy-title .ti {
  font-size: calc(16px * var(--fs));
  vertical-align: -2px;
  color: var(--text-accent);
}
.pricing-v4__synergy-text { font-size: calc(13px * var(--fs)); color: var(--text-secondary); margin: 4px 0 0; }

/* Hors panneau, comme le bloc synergie : ce sont ses marges qui espacent
   le message de positionnement du panneau du tableau comparatif. */
.pricing-v4__authors {
  text-align: center;
  margin: 26px auto;
  padding: 0;
}
.pricing-v4__authors-title { font-size: calc(15px * var(--fs)); font-weight: 500; margin: 0; }
.pricing-v4__authors-text { font-size: calc(13px * var(--fs)); color: var(--text-secondary); margin: 4px 0 14px; }
/* Logos clients — même traitement que le bloc de réassurance de
   /pages/perception (optimisation.css) : niveaux de gris atténués, couleur
   au survol, deux rangées de trois. */
.pricing-v4__logos-title {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: calc(12px * var(--fs));
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.pricing-v4__logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 18px;
}
.pricing-v4__logos-row:last-child { margin-bottom: 0; }

.pricing-v4__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 150px;
}
/* Logos affichés en couleur d'emblée — contrairement à /pages/perception, qui
   les désature et ne les révèle qu'au survol. */
.pricing-v4__logo img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Tableau comparatif détaillé
   -------------------------------------------------------------------------- */
/* Le tableau est le contenu le plus dense du panneau : il prend un cran de
   plus que le reste (1,08 -> 1,17, soit le même +8% appliqué une seconde
   fois). --fs étant héritée, toutes les tailles calc() de la section — titre,
   en-têtes, valeurs, précisions — se recalculent d'elles-mêmes. */
.pricing-v4__compare-title,
.pricing-v4__table-wrap {
  --fs: 1.17;
}

.pricing-v4__compare-title { font-size: calc(16px * var(--fs)); font-weight: 500; margin: 0 0 8px; }

.pricing-v4__table-wrap {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pricing-v4__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: calc(12px * var(--fs));
  margin: 0;
}
.pricing-v4__table th,
.pricing-v4__table td {
  padding: 8px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.pricing-v4__table tbody tr:last-child th,
.pricing-v4__table tbody tr:last-child td { border-bottom: 0; }

.pricing-v4__table thead th {
  text-align: center;
  font-weight: 500;
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
.pricing-v4__table thead th:first-child { text-align: left; }

.pricing-v4__table tbody tr:hover td,
.pricing-v4__table tbody tr:hover th { background: var(--surface-1); }

/* colonne des intitulés */
.pricing-v4__row-label {
  width: 34%;
  text-align: left;
  font-weight: 400;
  color: var(--text-primary);
}
.pricing-v4__table td { width: 22%; text-align: center; }

/* Seules les indications d'indisponibilité restent en gris. */
.pricing-v4__na { color: var(--text-muted); }
.pricing-v4__note { color: var(--text-primary); display: block; font-size: calc(11px * var(--fs)); }
.pricing-v4__star { color: var(--text-accent); font-weight: 700; }

.pricing-v4__footnote { font-size: calc(12px * var(--fs)); color: var(--text-secondary); margin: 10px 0 0; }

/* --------------------------------------------------------------------------
   Icônes
   Le mockup référençait Tabler (<i class="ti ti-check">), absent du site.
   Chaque icône est un SVG Tabler en masque : la couleur suit `currentColor`,
   la taille suit `font-size` — comme le ferait la fonte d'origine.
   -------------------------------------------------------------------------- */
.pricing-v4 .ti {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.135em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.pricing-v4 .ti-check { color: var(--text-success); }
.pricing-v4 .ti-x     { color: var(--text-muted); }

.pricing-v4 .ti-check {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5l10 -10'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5l10 -10'/></svg>");
}
.pricing-v4 .ti-x {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6l-12 12'/><path d='M6 6l12 12'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6l-12 12'/><path d='M6 6l12 12'/></svg>");
}
.pricing-v4 .ti-gift {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z'/><path d='M12 8v13'/><path d='M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7'/><path d='M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z'/><path d='M12 8v13'/><path d='M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7'/><path d='M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5'/></svg>");
}
.pricing-v4 .ti-arrows-join {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h5l3.5 5h9.5'/><path d='M18 15l3 -3l-3 -3'/><path d='M3 17h5l1.5 -2'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h5l3.5 5h9.5'/><path d='M18 15l3 -3l-3 -3'/><path d='M3 17h5l1.5 -2'/></svg>");
}

/* --------------------------------------------------------------------------
   Responsive — cette mise en page unique remplace le couple
   « tableau desktop / liste mobile » de l'ancienne version.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .pricing-v4__panel { padding: 14px; }

  .pricing-v4__plans { grid-template-columns: 1fr; }
  .pricing-v4__plan--featured { margin-top: 12px; }

  .pricing-v4__trial { flex-direction: column; text-align: center; }

  .pricing-v4__controls { flex-direction: column; align-items: stretch; }
  .pricing-v4__seg { justify-content: center; }
  .pricing-v4__seg-label { flex: 1; text-align: center; }
  .pricing-v4__opt { justify-content: center; }

  .pricing-v4__logos-row { flex-wrap: wrap; gap: 24px 30px; }
  .pricing-v4__logo { width: 42%; height: 40px; }
  .pricing-v4__logo img { max-height: 40px; }

  /* le tableau reste tabulaire mais devient défilable horizontalement */
  .pricing-v4__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pricing-v4__table { min-width: 620px; }
  .pricing-v4__table thead th { position: static; }
}