/* =========================================================================
   POTENTIEEL — passage à l'encre des pages encore sur styles.css
   À charger APRÈS styles.css, et uniquement sur les pages publiques.
   Les pages applicatives (application / auth / espace-client / reset) ne
   chargent pas ce fichier et gardent leur thème clair.

   Le fichier ne redessine rien : il rebranche les jetons de styles.css sur la
   palette de ink.css, puis rattrape les quelques couleurs codées en dur.
   ========================================================================= */

:root {
  --bg:           #0D1B24;
  --bg-card:      #162C39;
  --bg-card-2:    #1C3745;
  --bg-card-3:    #23404F;

  /* Un seul accent : le laiton. L'orange et le vert d'origine disparaissent
     pour que Google reste le seul événement de couleur du site. */
  --orange:       #D2A54C;
  --orange-light: #E8BC63;
  --orange-btn:   #D2A54C;
  --lime:         #B9C8D0;
  --lime-dim:     #8FA6B2;

  --white:        #E9EFF2;
  --gray-light:   #9FB3BE;
  --gray:         #7E99A6;
  --gray-dark:    #2A4552;
  --border:       rgba(159, 179, 190, 0.16);
  --border-card:  #24404F;

  --radius:       10px;
  --radius-sm:    6px;
}

html, body { background: var(--bg); color: var(--white); }

/* Barre de navigation : fond codé en blanc, et elle devient flottante —
   détachée des bords, en pilule, comme sur l'accueil. */
.navbar {
  left: 50%; right: auto; top: 14px;
  transform: translateX(-50%);
  width: calc(100% - 40px); max-width: 1180px;
  padding: 0 14px 0 26px; height: 60px;
  border-radius: 999px;
  background: rgba(13, 27, 36, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(159, 179, 190, 0.16);
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .75);
}
@media (max-width: 900px) {
  .navbar { width: calc(100% - 28px); top: 10px; height: 54px; padding: 0 10px 0 18px; }
}
.mobile-tabbar {
  background: rgba(9, 19, 25, 0.95) !important;
  border: 1px solid rgba(159, 179, 190, 0.16) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Lien d'évitement : texte sombre sur laiton */
.skip-link { color: #0D1B24; }

/* Les pastilles et onglets qui posaient du blanc sur l'orange : le laiton est
   clair, il leur faut un texte sombre. */
.profile-tab.active,
.type-tab.active .type-tab-icon,
.btn-primary,
.badge-title,
.pricing-eyebrow { color: #0D1B24; }

.btn-primary { background: var(--orange); border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-light); border-color: var(--orange-light); }

/* Ombres calibrées pour un fond clair : inopérantes et sales sur l'encre */
.tilt-card, .pricing-card, .testimonial-card, .blog-card {
  box-shadow: none;
}

/* La photo d'équipe en version encre : plus de calque à 45 % qui la délave */
.hero-image {
  content: url("assets/team-ink.png");
  opacity: 0.92;
  object-position: 88% 16%;
  width: 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.26) 13%, rgba(0,0,0,.78) 34%, #000 55%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.26) 13%, rgba(0,0,0,.78) 34%, #000 55%);
}
@media (max-width: 900px) {
  .hero-image { display: none; }
}

/* Les étincelles du hero : retirées, elles faisaient « fond d'écran animé » */
.sparkles { display: none; }

/* Texte blanc posé sur ce qui est devenu un fond sombre */
.cta-banner h3 { color: var(--white); }
.cta-banner p  { color: var(--gray-light); }
.btn-white { background: var(--orange); color: #0D1B24; }
.btn-white:hover { background: var(--orange-light); box-shadow: none; }

/* Les aplats qui comptaient sur un fond clair */
.social-proof, .stats-bar { background: var(--bg-card); }

::selection { background: #D2A54C; color: #0D1B24; }

/* ---------------------------------------------------------------------
   Rattrapages hérités : ces règles étaient calibrées pour un fond clair.
   --------------------------------------------------------------------- */

/* Halo orange sous les cartes : sur l'encre, c'est le « glow » générique */
.tilt-card, .pricing-card, .testimonial-card, .blog-card,
.pricing-option-card, .offer-type-panel, .badge-card {
  box-shadow: none !important;
}

/* La bulle de la barre d'onglets mobile n'a plus d'ombre colorée */
.mobile-tabbar { box-shadow: 0 10px 32px rgba(0,0,0,.5) !important; }

/* Les listes à puces et petits textes hérités passaient sous le seuil AA
   une fois le fond devenu sombre. */
.pricing-list li, .faq-answer, .footer p, .footer a,
.pricing-option-eyebrow, .offer-price-note { color: var(--gray-light); }
.footer a:hover { color: var(--white); }

/* Le dégradé obligatoire entre deux teintes de section (règle maison) */
.social-proof, .stats-bar, .wa-carousel-section {
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-card) 10%,
                              var(--bg-card) 90%, var(--bg) 100%);
}

/* Les sections héritées posent leur fond en style inline. Sur l'encre, la
   coupure franche se voit : on la remplace par un fondu (règle maison). */
section[style*="var(--bg-card)"],
div[style*="var(--bg-card)"].section-band {
  background: linear-gradient(to bottom,
              var(--bg) 0%, var(--bg-card) 8%,
              var(--bg-card) 92%, var(--bg) 100%) !important;
}

/* Les « blobs » colorés dérivants : sur fond clair ils passaient inaperçus,
   sur l'encre ils deviennent un halo de fond d'écran. On les retire, et avec
   eux le vert acide qui n'appartient plus à la palette. */
.blob, .blob.b1, .blob.b2, .blob.b3 { display: none !important; }
.mock-bars span.b-lime { background: linear-gradient(180deg, var(--lime), var(--lime-dim)) !important; }

/* La flèche du logo est codée en orange dans le SVG inline de chaque page */
.navbar-logo svg line, .navbar-logo svg polyline,
.arrow-icon svg line, .arrow-icon svg polyline { stroke: #D2A54C !important; }

/* Les étoiles d'avis gardent leur or, mais calé sur le laiton */
.sp-stars, .stars { color: #D2A54C !important; }

/* Champs de formulaire : les indications de saisie devenaient illisibles */
input, textarea, select {
  background: #11222C !important;
  border: 1px solid var(--border-card) !important;
  color: var(--white) !important;
}
input::placeholder, textarea::placeholder { color: #7E99A6 !important; opacity: 1; }
input:focus, textarea:focus, select:focus {
  border-color: var(--orange) !important;
  outline: 2px solid rgba(210,165,76,.35); outline-offset: 1px;
}
select option { background: #11222C; color: var(--white); }
label { color: var(--white); }

/* ---------------------------------------------------------------------
   Conséquences du passage à l'encre, relevées à l'audit
   --------------------------------------------------------------------- */

/* --gray sur --bg-card-2 tombait à 4,16:1. Relevé à 4,55:1, teinte conservée. */
:root { --gray: #87A0AC; }

/* Ombres et halos orange hérités : invisibles sur fond clair, ils deviennent
   un halo coloré sur l'encre. Neutralisés en élévation sobre. */
.btn-primary, .btn-lime, .process-badge, .badge-card,
.pricing-card.featured, .tilt-card, .cta-banner, .wa-screenshot-card {
  box-shadow: none !important;
}
.hero::before, .page-header::before,
.bg-glow-soft::before, .bg-glow-soft::after { background: none !important; }

/* Barre d'onglets mobile : 9,5 px sur des cibles tactiles */
.mobile-tab span { font-size: 11.5px !important; }

/* Ces pages chargeaient Archivo sans jamais s'en servir : elles rendaient en
   Inter pendant que l'accueil rendait en Archivo. Une seule police sur le
   site. Le serif d'accentuation des pages héritées est conservé tel quel. */
body, .navbar, .footer, button, input, textarea, select {
  font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6, .serif, .pricing-price, .stat-item .num, .hero-stat .val {
  font-family: 'Spectral', 'Iowan Old Style', Georgia, serif;
}
/* Playfair portait les accents en italique : Spectral reprend le role. */
.serif { font-style: italic; font-weight: 400; }

/* Halo radial encore rendu derrière la bande d'appel à l'action : décoration
   sans contenu, et sur l'encre ça fait « lueur ». */
.cta-section { background-image: none !important; }

/* Les titres de carte étaient des <h4> sous un <h2> : saut de niveau, et les
   lecteurs d'écran s'en servent pour naviguer. Passés en <h3>, avec les mêmes
   styles rejoués ici pour que rien ne bouge visuellement. */
.process-step-new h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  line-height: 1.3;}
.process-flip .tool-flip-front h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;}
.footer-col h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 20px;}
.step-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px;}
.adv-card--orange h3 { color: var(--orange);}
.adv-card--lime h3 { color: var(--lime-dim);}
.adv-card--purple h3 { color: #7c3aed;}
.adv-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px;}
.included-card h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 24px;}
.value-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px;}

/* Micro-libellés hérités sous le plancher de 11 px : illisibles en capitales
   traquées, et ce sont des libellés fonctionnels, pas des mentions légales. */
.pricing-eyebrow, .pricing-option-eyebrow, .hero-stat .lbl,
.mock-stat-label, .mock-back-title { font-size: 11px !important; }
/* Et sur téléphone, 11 px ne suffit plus : l'écran est tenu plus loin et
   l'écran est plus petit. */
@media (max-width: 600px) {
  .pricing-eyebrow, .pricing-option-eyebrow, .hero-stat .lbl,
  .mock-stat-label, .mock-back-title { font-size: 12.5px !important; letter-spacing: 0.08em; }
  .mobile-tab span { font-size: 12px !important; }
  /* le lien du pied de page se vise au pouce */
  .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-logo, .navbar-logo { min-height: 44px; }
}

/* Les rangées de boutons des pages héritées étaient à 14 px quand l'accueil
   est passé à 28 px : même écart partout, sur ordinateur. */
.hero-ctas, .cta-section .container > div { gap: 28px; }
@media (max-width: 860px) {
  .hero-ctas, .cta-section .container > div { gap: 12px; }
}

/* Le vrai logo, en masque recolorable. La flèche garde la couleur de la
   marque ; l'accent du site reste le laiton. */
.brand-mark {
  display: block; flex: none;
  width: 19px; height: 20px;
  background: #E08A66;
  -webkit-mask: url("assets/logo-arrow.png") center / contain no-repeat;
          mask: url("assets/logo-arrow.png") center / contain no-repeat;
}
.footer .brand-mark { width: 21px; height: 22px; }
.arrow-icon { display: inline-flex; align-items: center; }


/* ---- lisibilité sur téléphone ------------------------------------------
   Les intitulés de colonne du pied de page tenaient en 11 px capitales
   espacées : illisibles sur un écran de téléphone. */
@media (max-width: 600px) {
  .footer-col h3 { font-size: 12.5px; letter-spacing: 0.1em; margin-bottom: 16px; }
}