/* ============================================================
   Tenderia - feuille de style partagée (v2)
   Utilisée par : index.html, mentions-legales.html, cgv.html, privacy.html
   Les styles propres à une page restent dans un <style> local.
   ============================================================ */

:root {
  --forest: #2E7D32; --forest-deep: #1B5E20; --forest-soft: #66BB6A;
  --green-950: #0E3D14; --green-900: #143A18; --green-800: #1B5E20;
  --green-700: #2E7D32; --green-600: #388E3C; --green-500: #43A047;
  --blue: #1976D2; --blue-deep: #1565C0; --blue-soft: #64B5F6;
  --ink: #0F2A38; --ink-soft: #3D5867; --ink-mute: #58707D;
  --text: #3D5867; --text-mute: #58707D; --text-soft: #76858C;
  --glass-line: rgba(30, 80, 120, 0.10);
  --shadow-soft: 0 12px 40px rgba(20, 70, 110, 0.18);
  --shadow-card: 0 6px 20px rgba(20, 70, 110, 0.12);
  --wal: #C0392B; --fla: #D4A017; --bru: #6C3483; --navy: #1a1a2e;
  --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Police auto-hébergée (aucune dépendance externe) ----------
   Hanken Grotesk, licence SIL Open Font License. Grotesque humaniste :
   squelette plus proche de Frutiger (l'esprit Frutiger Aero) que les
   géométriques (Outfit, Manrope, PJS). Un seul woff2 variable couvre
   tous les poids (100-900), titres comme texte. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-var.woff2") format("woff2-variations"),
       url("/assets/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html { scroll-behavior: auto; }
@media (min-width: 821px) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  color: var(--ink); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 70% 55% at 10% 6%, rgba(100, 181, 246, 0.38) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 90% 14%, rgba(102, 187, 106, 0.30) 0%, transparent 62%),
    radial-gradient(ellipse 65% 55% at 82% 80%, rgba(25, 118, 210, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 48% at 14% 90%, rgba(76, 175, 80, 0.26) 0%, transparent 62%),
    linear-gradient(160deg, #BFE3F5 0%, #C9E9E3 40%, #D8EDD6 72%, #CCE9F2 100%);
  background-attachment: scroll; position: relative; overflow-x: hidden;
}

/* Grain très léger (2,5%) : texture premium, tue l'effet plastique */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--forest); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }

/* Titres et gros chiffres en Hanken Grotesk (poids display), texte en Hanken Grotesk (poids lecture) */
h1, h2, h3, h4, .pricing .price, .step .num { font-family: var(--font-display); }

.page { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 22px; width: 100%; }

/* ---------- Halo Frutiger Aero dérivant en fond ---------- */
.bg-blob { position: fixed; z-index: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.bg-blob.b1 {
  width: 46vw; height: 46vw; left: -12vw; top: -10vw;
  background: radial-gradient(circle at 35% 35%, rgba(102, 187, 106, 0.30), rgba(102, 187, 106, 0) 68%);
  animation: drift1 36s ease-in-out infinite alternate;
}
.bg-blob.b2 {
  width: 42vw; height: 42vw; right: -10vw; bottom: -8vw;
  background: radial-gradient(circle at 60% 40%, rgba(100, 181, 246, 0.26), rgba(100, 181, 246, 0) 68%);
  animation: drift2 44s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vh) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-5vw, -3vh) scale(1.08); } }
/* Perf : halos figés pendant le scroll (classe posée par main.js, retirée après l'arrêt).
   Moins de travail GPU pendant le défilement, reprise de la dérive une fois immobile. */
html.is-scrolling .bg-blob { animation-play-state: paused; }

/* ---------- Glass (Glassmorphism 2.0 : sobre, blur modéré) ----------
   Perf scroll : blur 12px max. Chaque surface backdrop-filter est
   re-calculée à CHAQUE image pendant le scroll : c'est la cause n°1
   des saccades. Les petites cartes internes n'en ont pas (voir règle
   "perf-cartes" plus bas), seuls panneaux, navbar et pilule hero en gardent. */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0.40) 100%);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 0 0 1px rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    var(--shadow-soft);
  position: relative; overflow: hidden;
}
.glass::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.07) 55%, transparent 100%);
  pointer-events: none; border-radius: 18px 18px 60% 60%;
}
.glass::after {
  content: ""; position: absolute; top: 1px; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  pointer-events: none;
}

/* ---------- Perf v2 : les grands panneaux n'ont plus de backdrop-filter ----------
   Le flou d'arrière-plan est re-calculé à chaque image de scroll : sur 7 grands
   panneaux, c'est la source restante de saccades. Le fond passe à une opacité
   plus élevée : l'effet verre est rendu par la translucidité, la bordure et les
   reflets (dôme ::before + ligne ::after), pas par le flou. Seuls la navbar,
   la pilule du hero et le panneau du menu mobile gardent leur blur. */
.panel.glass {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.52) 50%, rgba(255,255,255,0.64) 100%);
}

/* ---------- Navbar ---------- */
.navbar { position: sticky; top: 12px; z-index: 50; margin: 12px auto 0; max-width: 1080px; width: calc(100% - 24px);
  padding: 10px 18px 10px 20px; display: flex; align-items: center; justify-content: space-between; border-radius: 14px; }
.navbar .brand { font-size: 21px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink);
  display: flex; align-items: center; gap: 9px; text-decoration: none; }
.navbar .brand-logo { height: 28px; width: 28px; display: block; flex-shrink: 0; border-radius: 6px; }
.navbar .links { display: flex; gap: 26px; align-items: center; }
.navbar .links a { font-size: 14px; font-weight: 500; color: var(--ink-soft); text-decoration: none; padding: 6px 2px; transition: color .2s; }
.navbar .nav-cta { padding: 8px 18px; font-size: 13.5px; }
.navbar .back { font-size: 14px; font-weight: 600; color: var(--forest-deep); padding: 9px 18px; border-radius: 9px;
  background: rgba(46,125,50,0.06); border: 1px solid rgba(46,125,50,0.2); text-decoration: none; transition: background .15s; }
.navbar .back:hover { background: rgba(46,125,50,0.12); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(46,125,50,0.1); border: 1px solid rgba(46,125,50,0.25);
  color: var(--forest-deep); transition: background .2s, transform .2s; }
.nav-social:hover { background: rgba(46,125,50,0.18); text-decoration: none; transform: translateY(-2px); }

/* Lien actif dans la navbar (scrollspy / page courante) */
.navbar .links a.active { color: var(--forest-deep); font-weight: 600; }
.nav-menu .nav-panel a.active { background: rgba(46,125,50,0.08); color: var(--forest-deep); }

/* Menu mobile sans JavaScript (details/summary) */
.nav-menu { display: none; }
.nav-menu summary { list-style: none; cursor: pointer; display: inline-flex; flex-direction: column; gap: 5px;
  padding: 10px; border-radius: 10px; background: rgba(46,125,50,0.08); border: 1px solid rgba(46,125,50,0.2); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--forest-deep); transition: transform .2s, opacity .2s; }
.nav-menu[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-menu[open] summary span:nth-child(2) { opacity: 0; }
.nav-menu[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-menu .nav-panel { position: absolute; right: 0; top: calc(100% + 10px); display: flex; flex-direction: column;
  min-width: 230px; padding: 12px; gap: 2px; z-index: 60; overflow: visible;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 14px 38px rgba(20, 70, 110, 0.22), inset 0 1.5px 0 rgba(255,255,255,1); }
.nav-menu .nav-panel a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  padding: 11px 14px; border-radius: 10px; }
.nav-menu .nav-panel a:hover { background: rgba(46,125,50,0.08); color: var(--forest-deep); text-decoration: none; }
.nav-menu .nav-panel a.menu-cta { color: #fff; background: rgba(46,125,50,0.9); text-align: center; margin-top: 6px; }
.nav-menu .nav-panel a.menu-cta:hover { background: rgba(27,94,32,0.95); color: #fff; }

/* ---------- Barre de progression de lecture ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 90;
  pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--forest-soft) 0%, var(--forest) 45%, var(--blue) 100%);
  box-shadow: 0 0 10px rgba(46, 125, 50, 0.55);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
html.no-js .scroll-progress { display: none; }

/* ---------- Bouton glossy ----------
   Perf : pas de backdrop-filter (fond quasi opaque, le flou était invisible
   de toute façon : x5 surfaces de flou en moins sur la page). */
.btn-glossy { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px;
  background: rgba(46, 125, 50, 0.92);
  color: #fff; font-weight: 600; font-size: 15px; border-radius: 100px; border: 1px solid rgba(27, 94, 32, 0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 14px rgba(46,125,50,0.25);
  position: relative; overflow: hidden; transition: background .18s, transform .15s; cursor: pointer; text-decoration: none; }
.btn-glossy::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%); pointer-events: none; }
.btn-glossy::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; }
.btn-glossy:hover { background: rgba(27, 94, 32, 0.9); text-decoration: none; color: #fff; transform: translateY(-1px); }
.btn-glossy:hover::after { left: 125%; }
.btn-glossy:active { transform: translateY(1px) scale(0.99); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px rgba(46,125,50,0.25); }

/* ---------- Footer (unifié) ---------- */
footer { position: relative; z-index: 2; margin-top: auto; }
.footer-rule { height: 2px; background: var(--forest); }
.footer-bar { background: var(--green-950); color: #C8D8CC; padding: 26px 0; text-align: center; font-size: 13px; }
.footer-bar a { color: #E0EEE3; }
.footer-bar .links { margin-bottom: 12px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.footer-bar .links a { font-weight: 500; }
.footer-bar .small { margin-top: 8px; font-size: 11px; opacity: 0.78; }
.footer-bar .social-links { margin: 14px 0 16px; display: flex; gap: 14px; justify-content: center; }
.footer-bar .social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255,255,255,0.08); color: #E0EEE3; transition: background .2s, color .2s; }
.footer-bar .social-link:hover { background: rgba(255,255,255,0.18); color: #fff; text-decoration: none; }

/* ---------- Pages document (sources, mentions, cgv, privacy) ---------- */
.wrap { max-width: 980px; margin: 0 auto; padding: 24px 22px 60px; width: 100%; }
.doc { padding: 36px 36px 42px; margin-top: 18px; }
.doc h1 { font-size: 28px; font-weight: 600; color: var(--ink); letter-spacing: -0.018em; margin-bottom: 18px; line-height: 1.2; }
.doc .updated { font-size: 13px; color: var(--ink-mute); margin-bottom: 22px; }
.doc h2 { font-size: 18px; font-weight: 700; color: var(--forest-deep); margin-top: 30px; margin-bottom: 12px;
  padding-bottom: 6px; border-bottom: 2px solid rgba(46,125,50,0.18); letter-spacing: -0.01em; }
.doc h3 { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-top: 18px; margin-bottom: 8px; }
.doc p { margin-bottom: 14px; color: var(--ink-soft); }
.doc ul, .doc ol { margin: 0 0 16px 22px; color: var(--ink-soft); }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--ink); }
.doc code { background: rgba(46,125,50,0.07); padding: 2px 6px; border-radius: 4px; font-size: 13px;
  font-family: "SF Mono", Monaco, Consolas, monospace; border: 1px solid rgba(46,125,50,0.12); color: var(--forest-deep); }
.doc blockquote { border-left: 3px solid var(--green-500); padding: 12px 16px; background: rgba(46,125,50,0.04);
  border-radius: 0 8px 8px 0; margin: 16px 0; color: var(--ink-mute); font-style: italic; }
.doc table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: 14px;
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,70,110,0.04), 0 4px 14px rgba(20,70,110,0.06); border: 1px solid rgba(46,125,50,0.1); }
.doc th, .doc td { border: 1px solid rgba(46,125,50,0.1); padding: 12px 14px; text-align: left; vertical-align: top; }
.doc th { background: rgba(46,125,50,0.06); font-weight: 600; color: var(--ink); }

/* ---------- Animation au chargement (hero uniquement) ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { opacity: 0; animation: fadeUp 0.6s cubic-bezier(.2,.7,.3,1) forwards; }

/* ---------- Révélation au scroll (activée par main.js) ----------
   0.45s / 10px : perçue comme réactive. À 0.7s / 18px, le contenu
   "arrive après" le scroll et donne une impression de lenteur. */
html.js [data-reveal] { opacity: 0; transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1); }
html.js [data-reveal].in-view { opacity: 1; transform: none; }

/* ---------- Skip-link accessibilité ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; color: var(--forest-deep);
  padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600; box-shadow: var(--shadow-card); }
.skip-link:focus { left: 0; }

/* ---------- Accessibilité : focus clavier ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn-glossy:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), .btn-glossy:focus:not(:focus-visible) { outline: none; }

/* ---------- Optimisation mobile : effets coûteux désactivés ---------- */
@media (max-width: 820px) {
  html { scroll-behavior: auto; }
  body { background-attachment: scroll !important; }
  .bg-blob { display: none; }
  .glass {
    backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(20, 70, 110, 0.10);
  }
  .navbar.glass {
    backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
    background: rgba(255, 255, 255, 0.35) !important;
    overflow: visible; /* laisse le menu déroulant sortir du cadre */
  }
  .fade-up { animation: none !important; opacity: 1 !important; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  /* Menu mobile */
  .navbar .links { display: none; }
  .nav-actions { order: 2; margin-left: auto; }
  .nav-menu { display: block; position: relative; order: 3; }
}
@media (max-width: 540px) {
  .navbar { padding: 9px 14px; }
  .navbar .brand { font-size: 19px; }
  .navbar .brand-logo { height: 24px; width: 24px; }
  .navbar .nav-cta { display: none; }
  .doc { padding: 26px 20px; }
  .doc h1 { font-size: 24px; }
}

/* ---------- Perf-cartes : zéro backdrop-filter sur les petites cartes ----------
   Placée APRÈS les media queries pour gagner sur toutes les largeurs.
   Ces cartes vivent à l'intérieur d'un panneau déjà flouté : le double
   flou coûtait cher et ne se voyait pas. Fond légèrement plus opaque
   en compensation, la matière verre reste rendue par bordure + reflets. */
.pme-point, .step, details.faq, .pricing, .compare-col, .source-item {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.52);
}

@media (min-width: 821px) {
  /* Micro-interactions sobres, desktop uniquement */
  .pme-point, .step, details.faq, .pricing, .compare-col, .source-item { transition: transform .25s ease, box-shadow .25s ease; }
  .pme-point:hover, .step:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(20, 70, 110, 0.16); }
  details.faq:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 70, 110, 0.14); }
  .pricing:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(46, 125, 50, 0.18); }
  .compare-col:hover, .source-item:hover { transform: translateY(-2px); }
  /* Soulignement animé des liens de nav */
  .navbar .links a { position: relative; }
  .navbar .links a::after { content: ""; position: absolute; left: 2px; right: 100%; bottom: 0; height: 2px;
    border-radius: 2px; background: var(--forest); transition: right .22s ease; }
  .navbar .links a:hover::after, .navbar .links a.active::after { right: 2px; }
}

.footer-bar .social-link { transition: background .2s, color .2s, transform .2s; }
.footer-bar .social-link:hover { transform: translateY(-2px); }

/* ---------- Section comparaison : veille manuelle vs Tenderia ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; text-align: left; }
.compare-col { padding: 26px 24px 20px; border-radius: 18px; }
.compare-col h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 10px; }
.compare-col ul { list-style: none; }
.compare-col li { position: relative; padding: 10px 0 10px 30px; font-size: 14px; color: var(--ink-soft);
  line-height: 1.5; border-bottom: 1px solid var(--glass-line); }
.compare-col li:last-child { border-bottom: none; }
.compare-col li::before { position: absolute; left: 0; top: 10px; font-weight: 700; font-size: 14px; line-height: 1.5; }
.compare-col.nok h3 { color: var(--ink-soft); }
.compare-col.nok li::before { content: "\2715"; color: var(--wal); }
.compare-col.ok { border: 1.5px solid rgba(46, 125, 50, 0.45);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), 0 10px 28px rgba(46, 125, 50, 0.16); }
.compare-col.ok h3 { color: var(--forest-deep); }
.compare-col.ok li::before { content: "\2713"; color: var(--forest); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { animation: none !important; opacity: 1 !important; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .bg-blob { animation: none; }
  .btn-glossy::after { display: none; }
  .pme-point, .step, details.faq, .pricing, .compare-col, .source-item { transition: none; }
  .pme-point:hover, .step:hover, details.faq:hover, .pricing:hover, .compare-col:hover, .source-item:hover { transform: none; }
  .btn-glossy { transition: none; }
  .btn-glossy:hover { transform: none; }
  .btn-glossy:active { transform: none; }
  .navbar .links a::after { transition: none; }
  .nav-social, .footer-bar .social-link { transition: none; }
  .nav-social:hover, .footer-bar .social-link:hover { transform: none; }
}