/* ============================================================
   home.css — Grizee
   Styles spécifiques à la page d'accueil (index.html)
   ============================================================ */

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 380vh;
  background: #000;
}
.hero__panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* ⚠ La garde est DEDUITE de la hauteur du menu, jamais ecrite en dur :
     un menu qui change de taille ne doit plus pouvoir recouvrir le hero. */
  padding: calc(var(--nav-h) + 16px) 0 20px;
}
.hero__panel::before {
  content: '';
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 560px;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,184,0,.22) 0%, rgba(245,184,0,.06) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero__panel > .container { position: relative; z-index: 1; }
.hero__badge { margin-bottom: 20px; }

/* Zone texte — seule cette zone est swappée au scroll (CSS grid overlap) */
.hero__text-zone {
  display: grid;
  max-width: 900px;
  margin: 0 auto 22px;
}
.hero__tstate {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
}
.hero__tstate.active { opacity: 1; }

/* Story texts dans la zone swap */
.hero__story-text {
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.03em;
  color: #fff;
  max-width: 860px;
  margin: 0;
}
.hero__story-text .text-brand {
  background: linear-gradient(135deg, var(--brand) 10%, var(--brand-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* ── Logo état dans la text-zone ────────────────────────── */
.hero__logo-state {
  height: clamp(80px, 12vw, 160px);
  width: auto;
  max-width: 80%;
}

.hero__story-sub {
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.03em;
  color: #fff;
  margin-top: 0;
}

/* ── Pulse dot (badge) ───────────────────────────────────── */
.pulse-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
}
.pulse-dot::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: var(--danger);
  opacity: .35;
  animation: pulse-ring 1.8s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .40; }
  65%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── H1 gradient textuel ─────────────────────────────────── */
.hero__h1 {
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.03em;
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(160deg, #FFFFFF 0%, rgba(245,245,247,.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__h1 .text-brand {
  background: linear-gradient(135deg, var(--brand) 10%, var(--brand-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__sub {
  font-size: clamp(16px, 2vw, 20px); color: rgba(245,245,247,.6);
  max-width: 560px; margin: 0 auto 40px; line-height: 1.65;
}
.hero__ctas {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 28px;
}
/* Bouton outline adapté au fond noir du hero */
.hero .btn--outline {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: rgba(245,245,247,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (hover: hover) and (pointer: fine) {
  .hero .btn--outline:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.38);
    color: #fff;
    transform: translateY(-2px);
  }
}
.hero__trust {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: rgba(245,245,247,.5);
}
.trust-item svg { color: var(--brand); flex-shrink: 0; }

/* ── Fenetres courtes : le hero ne doit rien couper ──────────
   `.hero__panel` fait 100vh avec `overflow: hidden`, et son contenu demande
   environ 840 px de haut. Sur tout ecran plus court — c'est-a-dire la plupart
   des portables une fois la barre du navigateur deduite — les quatre piliers
   etaient tranches net a la limite du fond noir. On compacte progressivement
   plutot que de masquer : tout reste visible jusqu'a 640 px de hauteur. */
@media (max-height: 880px) {
  .hero__panel { padding-top: calc(var(--nav-h) + 14px); }
  .hero__badge { margin-bottom: 12px; }
  .hero__text-zone { margin-bottom: 16px; }
  .hero__tstate { padding: 8px 0; }
  .hero__story-text, .hero__story-sub { font-size: clamp(30px, 3.6vw, 46px); }
  .hero__logo-state { height: clamp(64px, 9vw, 108px); }
  .hero__sub   { margin-bottom: 22px; }
  .hero__ctas  { margin-bottom: 16px; }
  .hero__trust { gap: 18px; }
  .pilier      { padding: 13px 16px; }
}
@media (max-height: 800px) {
  .hero__panel { padding-top: calc(var(--nav-h) + 12px); padding-bottom: 14px; }
  .hero__tstate { padding: 4px 0; }
  .hero__story-text, .hero__story-sub { font-size: clamp(27px, 3.1vw, 40px); }
  .hero__logo-state { height: clamp(56px, 7.5vw, 92px); }
  .hero__text-zone { margin-bottom: 12px; }
  .hero__ctas  { margin-bottom: 12px; }
  .hero__trust { display: none; }          /* redondant avec le bas de page */
  .pilier      { padding: 11px 14px; }
  .pilier__title { font-size: 13.5px; margin-bottom: 2px; }
  .pilier__desc  { font-size: 12.5px; line-height: 1.4; }
}
@media (max-height: 700px) {
  /* ⚠ La garde du menu ayant ete rendue (elle etait descendue sous sa hauteur
     et le bandeau passait dessous), on reprend la place sur les marges, qui
     elles sont decoratives. */
  .hero__panel { padding-top: calc(var(--nav-h) + 12px); padding-bottom: 10px; }
  .hero__badge { margin-bottom: 8px; }
  .hero__text-zone { margin-bottom: 8px; }
  .hero__ctas  { margin-bottom: 8px; }
  .hero__sub   { margin-bottom: 14px; }
  .hero__story-text, .hero__story-sub { font-size: clamp(24px, 2.7vw, 34px); }
  .hero__logo-state { height: clamp(48px, 6vw, 76px); }
  .hero__piliers { max-width: 720px; }
  .pilier      { padding: 9px 12px; }
  .pilier__desc { display: none; }         /* on garde les titres des piliers */
}
@media (max-height: 600px) {
  .hero__panel { padding-top: calc(var(--nav-h) + 12px); padding-bottom: 8px; }
  .hero__badge { margin-bottom: 6px; }
  .hero__text-zone { margin-bottom: 6px; }
  .hero__ctas  { margin-bottom: 6px; }
  .hero__piliers { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
  .hero__story-text, .hero__story-sub { font-size: clamp(21px, 2.3vw, 28px); }
}

/* ── HERO PILIERS ────────────────────────────────────────── */
.hero__piliers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}
.pilier {
  background: rgba(255,255,255,.03);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pilier:hover { background: rgba(255,255,255,.06); }
}
.pilier__icon {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: rgba(245,184,0,.16);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); flex-shrink: 0;
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pilier:hover .pilier__icon { transform: scale(1.08); }
}
.pilier__title {
  display: block;
  font-size: 14px; font-weight: 700; color: rgba(245,245,247,.92);
  line-height: 1.3; margin-bottom: 4px;
}
.pilier__desc {
  font-size: 13px; color: rgba(245,245,247,.48); line-height: 1.55;
}

@media (max-width: 900px) {
  .hero__piliers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .hero__piliers { grid-template-columns: 1fr; }
  .pilier { flex-direction: row; align-items: flex-start; }
}

/* ── HERO MOCKUP ─────────────────────────────────────────── */
.hero__mockup {
  margin: 60px auto 0; max-width: 900px;
  background: var(--white); border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 20px 60px rgba(0,0,0,.10);
  overflow: hidden;
}
.mockup__bar {
  display: flex; align-items: center; gap: 8px; padding: 14px 20px;
  background: var(--white); border-bottom: 1px solid var(--border);
}
.mockup__dot { width: 12px; height: 12px; border-radius: 50%; }
.mockup__dot:nth-child(1) { background: #FF5F57; }
.mockup__dot:nth-child(2) { background: #FFBD2E; }
.mockup__dot:nth-child(3) { background: #28C840; }
.mockup__url {
  flex: 1; background: #F1F5F9; border-radius: 6px; height: 28px;
  max-width: 300px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted);
}
.mockup__body {
  background: linear-gradient(135deg, #FAFAFA 0%, #F0F4FF 100%);
  min-height: 340px; padding: 28px;
  display: grid; grid-template-columns: 220px 1fr; gap: 20px;
}
.mockup__sidebar {
  background: var(--white); border-radius: var(--r-sm);
  border: 1px solid var(--border); padding: 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--muted);
}
.sidebar-item--active { background: var(--brand-light); color: #92650A; }
.sidebar-item svg { flex-shrink: 0; opacity: .6; }
.sidebar-item--active svg { opacity: 1; }
.mockup__main { display: flex; flex-direction: column; gap: 14px; }
.mockup__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mockup__stat {
  background: var(--white); border-radius: var(--r-sm);
  border: 1px solid var(--border); padding: 14px;
}
.mockup__stat-val { font-size: 20px; font-weight: 800; color: var(--dark); }
.mockup__stat-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mockup__stat-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: #15803D; background: #DCFCE7; padding: 2px 7px;
  border-radius: 100px; margin-top: 4px;
}
.mockup__rdv-list { display: flex; flex-direction: column; gap: 8px; }
.mockup__rdv {
  background: var(--white); border-radius: 10px;
  border: 1px solid var(--border); padding: 11px 14px;
  display: flex; align-items: center; gap: 12px;
}
.rdv-time {
  font-size: 12px; font-weight: 700; color: var(--brand-dark);
  background: var(--brand-light); padding: 4px 8px; border-radius: 6px;
  white-space: nowrap;
}
.rdv-name { font-size: 13px; font-weight: 600; color: var(--dark); }
.rdv-detail { font-size: 12px; color: var(--muted); }
.rdv-status { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 100px; }
.rdv-status--ok  { background: #DCFCE7; color: #15803D; }
.rdv-status--wait { background: #FEF9C3; color: #854D0E; }

@media (max-width: 720px) {
  .mockup__body { grid-template-columns: 1fr; }
  .mockup__sidebar { display: none; }
}

/* ── POUR QUI ────────────────────────────────────────────── */
.verticals { padding: 100px 0; }
.vertical-card {
  background: var(--white); border-radius: var(--r);
  border: 1.5px solid var(--border); padding: 32px;
  display: flex; flex-direction: column;
  transition:
    border-color 200ms var(--ease-out),
    box-shadow   200ms var(--ease-out),
    transform    200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .vertical-card:hover {
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}
/* Press feedback sur touch */
.vertical-card:active { transform: scale(0.98); transition-duration: 80ms; }
.vertical-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--brand-light); display: flex; align-items: center;
  justify-content: center; margin-bottom: 20px; flex-shrink: 0;
}
.vertical-card__icon svg { color: var(--brand-dark); }
.vertical-card__title {
  font-size: 20px; font-weight: 800; color: var(--dark);
  margin-bottom: 10px; letter-spacing: -.015em;
}
.vertical-card__sub { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }
.vertical-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: auto; }
.v-tag {
  font-size: 12px; font-weight: 500; color: var(--muted);
  background: #F8FAFC; border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 100px;
}
.vertical-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--brand-dark);
  text-decoration: none; margin-top: 20px;
  transition: gap .2s;
}
.vertical-card__link:hover { gap: 10px; }

/* ── FEATURES ────────────────────────────────────────────── */
.features {
  padding: 100px 0;
  background: linear-gradient(180deg, #F8FAFF 0%, var(--bg) 100%);
}
.features__grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 2px;
  margin-top: 56px;
  background: var(--border); border-radius: var(--r);
  overflow: hidden; border: 1px solid var(--border);
}
.feature-item {
  background: var(--white); padding: 36px 30px;
  transition:
    background-color 160ms var(--ease-out),
    box-shadow       160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .feature-item:hover {
    background: #FAFBFE;
    box-shadow: inset 0 0 0 1px rgba(245,184,0,.2);
  }
}
.feature-item__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-light); display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px;
}
.feature-item__icon svg { color: var(--brand-dark); }
.feature-item__title { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 8px; letter-spacing: -.01em; }
.feature-item__desc  { font-size: 14px; color: var(--muted); line-height: 1.65; }
@media (max-width: 900px) { .features__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features__grid { grid-template-columns: 1fr; } }

/* ── URGENCE RÉFORME ─────────────────────────────────────── */
.reforme { padding: 80px 0; }
.reforme__inner {
  background: var(--panel-dark); border-radius: 24px; padding: 64px;
  position: relative; overflow: hidden;
}
.reforme__inner::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(245,184,0,.2) 0%, transparent 70%);
  pointer-events: none;
}
.reforme__inner::after {
  content: ''; position: absolute; bottom: -100px; left: 20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(245,184,0,.1) 0%, transparent 70%);
  pointer-events: none;
}
.reforme__content { position: relative; z-index: 1; }
.reforme__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.reforme__title {
  font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; color: var(--panel-dark-text);
  letter-spacing: -.025em; margin-bottom: 18px;
}
.reforme__sub { font-size: 16px; color: var(--panel-dark-muted); line-height: 1.7; margin-bottom: 30px; }
.timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 18px; padding-bottom: 28px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:last-child .timeline-line { display: none; }
.timeline-left { display: flex; flex-direction: column; align-items: center; }
.timeline-dot {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px; font-weight: 800;
}
.timeline-dot--past   { background: rgba(255,255,255,.1); color: #64748B; }
.timeline-dot--now    { background: var(--brand); color: var(--dark); }
.timeline-dot--future { background: rgba(245,184,0,.2); color: var(--brand); border: 1.5px solid rgba(245,184,0,.4); }
.timeline-line { width: 2px; flex: 1; margin: 6px 0; background: rgba(255,255,255,.1); }
.timeline-body { padding-top: 6px; }
.timeline-date   { font-size: 12px; font-weight: 700; color: var(--brand); margin-bottom: 4px; }
.timeline-event  { font-size: 15px; font-weight: 600; color: #FFF; margin-bottom: 4px; }
.timeline-detail { font-size: 13px; color: #64748B; line-height: 1.5; }
.timeline-alert {
  display: inline-block; font-size: 11px; font-weight: 700; color: #FCA5A5;
  background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3);
  padding: 2px 9px; border-radius: 100px; margin-top: 6px;
}
@media (max-width: 900px) {
  .reforme__inner { padding: 40px 28px; }
  .reforme__grid  { grid-template-columns: 1fr; gap: 40px; }
}

/* ── STATS ───────────────────────────────────────────────── */
.stats { padding: 80px 0; background: var(--bg-alt); }
.stat-item { padding: 40px 28px; text-align: center; }
.stat-number {
  font-size: clamp(32px, 4vw, 48px); font-weight: 800; color: var(--dark);
  letter-spacing: -.03em; line-height: 1; margin-bottom: 8px;
}
.stat-label { font-size: 15px; color: var(--muted); font-weight: 500; }

/* ── TARIFS ──────────────────────────────────────────────── */
.tarifs { padding: 100px 0; }
/* Grille des offres. L'accueil utilisait .grid-2 et n'affichait donc que deux
   cartes, alors que l'application en propose QUATRE (Free, Solo, Pro, Equipe).
   .grid-4 existe deja mais sert un autre visuel, en tableau avec un filet de
   1 px, d'ou cette grille dediee. */
/* ⚠ PAS DE NOMBRE DE COLONNES FIGÉ. La grille était en repeat(4, 1fr) alors
   que l'administration publiait cinq offres : la cinquième passait seule à la
   ligne. Le nombre d'offres se règle depuis l'application et peut encore
   changer, `auto-fit` suit sans qu'on y revienne.
   ⚠ `stretch` et non `start` : les cartes faisaient 716 à 1436 px de haut,
   la rangée était bancale. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 20px; align-items: stretch;
}
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 640px)  { .pricing-grid { grid-template-columns: 1fr; } }

/* ⚠ CINQ OFFRES NE TIENNENT PAS DANS 1140 px. Le conteneur du site est
   plafonné à 1140 : cinq colonnes y feraient 202 px, soit 150 px de texte
   utile une fois les marges retirées, et la cinquième carte partait seule à
   la ligne. On élargit LA SEULE section des tarifs, et seulement quand
   l'écran le permet. En dessous, la grille reprend son comportement fluide. */
@media (min-width: 1280px) {
  .tarifs .container { max-width: 1280px; }
  .pricing-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .pricing-card { padding: 30px 22px; }
}

.pricing-card {
  background: var(--white); border-radius: var(--r);
  border: 1.5px solid var(--border); padding: 32px 26px;
  display: flex; flex-direction: column;
  transition:
    border-color 200ms var(--ease-out),
    box-shadow   200ms var(--ease-out),
    transform    140ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.pricing-card:active { transform: scale(0.98); transition-duration: 80ms; }
.pricing-card--featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-dim);
}
.pricing-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-bottom: 20px;
}
.pricing-badge--pro  { background: var(--brand); color: var(--dark); }
.pricing-badge--free { background: #F1F5F9; color: var(--muted); }
.pricing-name  { font-size: 22px; font-weight: 800; color: var(--dark); margin-bottom: 6px; }
.pricing-price {
  font-size: 42px; font-weight: 800; color: var(--dark);
  letter-spacing: -.03em; line-height: 1; margin: 16px 0 6px;
}
.pricing-price sup { font-size: 20px; vertical-align: super; }
.pricing-price sub { font-size: 16px; color: var(--muted); font-weight: 500; }
.pricing-sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.pricing-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 24px; }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1 1 auto; }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); line-height: 1.5; }
.pf-check { color: #15803D; flex-shrink: 0; margin-top: 1px; }
.pf-cross  { color: #CBD5E1; flex-shrink: 0; margin-top: 1px; }
.pf-text--muted { color: var(--muted); }
/* Une fonction que l'offre AJOUTE par rapport à la précédente. Sans ce
   repère, Pro, Yves et Team affichent quinze à dix-neuf lignes presque
   identiques et l'on ne voit pas ce que le supplément achète. */
.pricing-features li.pf-new { font-weight: 700; }
.pricing-features li.pf-new .pf-check { color: var(--brand-dark); }
.pricing-features li.pf-herite { color: var(--muted); }

/* ── Le repli des fonctions héritées ──────────────────────────────────
   Tout est dans le HTML : les moteurs et les navigateurs sans script voient
   la liste entière. Le repli n'est que visuel, et il tient en CSS. */
.pricing-features li.pf-comble { color: var(--muted); }
.pf-toggle:not(:checked) + .pricing-features li.pf-herite { display: none; }
.pf-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--brand-text);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  align-self: flex-start;
}
.pf-more::after { content: "▾"; font-size: 11px; }
.pf-toggle:checked ~ .pf-more::after { content: "▴"; }
.pf-toggle:checked ~ .pf-more { color: var(--muted); }
.pf-more:hover { opacity: .78; }
/* Le clavier doit voir le focus, l'interrupteur étant masqué. */
.pf-toggle:focus-visible + .pricing-features + .pf-more,
.pf-toggle:focus-visible ~ .pf-more { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ── TESTIMONIAL ─────────────────────────────────────────── */
.testimonial { padding: 100px 0; background: var(--bg); }
.testi-inner {
  background: var(--bg-alt); border-radius: 32px;
  border: none; padding: 64px 72px; text-align: center;
}
.stars { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 24px; color: var(--brand); }
.testi-quote {
  font-size: clamp(18px, 2.5vw, 26px); font-weight: 600; color: var(--dark);
  line-height: 1.5; max-width: 700px; margin: 0 auto 28px; letter-spacing: -.01em;
}
.testi-author { display: flex; align-items: center; justify-content: center; gap: 12px; }
.testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--dark);
}
.testi-name { font-size: 15px; font-weight: 700; color: var(--dark); }
.testi-role { font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .testi-inner { padding: 36px 24px; } }

/* ── CTA FINAL ───────────────────────────────────────────── */
.cta-final { padding: 0 0 120px; background: var(--bg-alt); }
.cta-box {
  background: #000; border-radius: 32px; padding: 100px 64px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-box::before {
  content: ''; position: absolute; top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 480px;
  background: radial-gradient(ellipse at 50% 0%, rgba(245,184,0,.22) 0%, transparent 60%);
  pointer-events: none;
}
.cta-box__content { position: relative; z-index: 1; }
.cta-box__title {
  font-size: clamp(28px, 4vw, 48px); font-weight: 800; color: var(--panel-dark-text);
  letter-spacing: -.025em; line-height: 1.2; margin-bottom: 14px;
}
.cta-box__sub { font-size: 18px; color: #94A3B8; margin-bottom: 40px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-box__actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-box__trust { margin-top: 24px; font-size: 13px; color: #64748B; }
.btn--cta-outline {
  font-family: inherit; font-size: 16px; font-weight: 600; color: #94A3B8;
  background: transparent; border: 1.5px solid rgba(255,255,255,.15);
  padding: 16px 36px; border-radius: var(--r-sm); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition:
    border-color 160ms var(--ease-out),
    color        160ms var(--ease-out),
    transform    140ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .btn--cta-outline:hover { border-color: rgba(255,255,255,.4); color: #FFF; }
}
.btn--cta-outline:active { transform: scale(0.97); transition-duration: 80ms; }
@media (max-width: 700px) { .cta-box { padding: 56px 28px; } }

/* ── AIGUILLAGE MÉTIER ───────────────────────────────────── */
.aiguillage { padding: 100px 0 120px; background: var(--bg); }

.aiguillage__header { text-align: center; margin-bottom: 72px; }
.aiguillage__header .section-sub { margin: 0 auto; }

.vblocks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.vblock {
  background: var(--white);
  border: none;
  border-radius: var(--r);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.05);
  transition:
    box-shadow   240ms var(--ease-out),
    transform    200ms var(--ease-out);
}

.vblock::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .vblock:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
  }
  .vblock:hover::after { transform: scaleX(1); }
}
.vblock:active { transform: scale(0.98); transition-duration: 80ms; }

.vblock__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.vblock__icon svg { color: var(--brand-dark); }

.vblock__label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-dark); margin-bottom: 8px;
}

.vblock__title {
  font-size: 22px; font-weight: 800; color: var(--dark);
  letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px;
}

.vblock__tagline {
  font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 22px;
}

.vblock__features {
  list-style: none;
  display: flex; flex-direction: column; gap: 9px;
  margin-bottom: auto;
}

.vblock__features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--text); line-height: 1.5;
}
.vblock__features li svg { color: var(--brand); flex-shrink: 0; margin-top: 2px; }

.vblock__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--brand-dark);
  text-decoration: none; margin-top: 26px;
  transition: color 160ms var(--ease-out);
}
.vblock__cta svg {
  flex-shrink: 0;
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .vblock:hover .vblock__cta svg { transform: translateX(5px); }
}

@media (max-width: 900px) {
  .vblocks-grid { grid-template-columns: 1fr; }
  .vblock { padding: 28px 24px; }
}

/* ── La ligne des quantites incluses ────────────────────────────
   ⚠ SMS et analyses IA seulement. Afficher les quatre compteurs (e-mails et
   Factur-X compris) transformerait la grille en forfait mobile et donnerait
   envie de compter au lieu d'acheter. Personne ne se demande combien d'e-mails
   il peut envoyer ; tout le monde sait que les SMS coutent.
   Le texte est reecrit par assets/js/tarifs.js si l'administration change les
   quotas, mais il reste JUSTE dans le HTML, pour les moteurs de recherche et
   les navigateurs sans script. */
.pricing-quotas {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin: -18px 0 24px;
  padding: 8px 12px;
  border-left: 2px solid var(--gray-100, rgba(0,0,0,.08));
  background: rgba(0,0,0,.02);
  border-radius: 0 6px 6px 0;
}