/* FINOPTI — feuille de style du site. Police Inter (SIL Open Font License). */
@font-face { font-display:swap; font-family:'Inter'; src:url('/assets/fonts/Inter-Regular.ttf') format('truetype'); font-weight:400; }
  @font-face { font-display:swap; font-family:'Inter'; src:url('/assets/fonts/Inter-Medium.ttf') format('truetype'); font-weight:500; }
  @font-face { font-display:swap; font-family:'Inter'; src:url('/assets/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight:600; }
  @font-face { font-display:swap; font-family:'Inter'; src:url('/assets/fonts/Inter-Bold.ttf') format('truetype'); font-weight:700; }
  @font-face { font-display:swap; font-family:'InterDisplay'; src:url('/assets/fonts/InterDisplay-ExtraBold.ttf') format('truetype'); font-weight:800; }
  @font-face { font-display:swap; font-family:'InterDisplay'; src:url('/assets/fonts/InterDisplay-Black.ttf') format('truetype'); font-weight:900; }
  :root { --red:#C0272D; --ink:#161616; --paper:#FAFAF7; --line:#E7E3DC; --mut:#6B675F; --dark:#141414; --dline:#2C2C2C; --dmut:#A6A29B; }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { font-family:'Inter',-apple-system,sans-serif; background:var(--paper); color:var(--ink); font-size:16px; line-height:1.6; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
  .display { font-family:'InterDisplay','Inter',sans-serif; font-weight:900; letter-spacing:-.02em; line-height:1.06; }
  .eyebrow { font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--red); }
  .lead { color:var(--mut); font-size:18px; }
  .btn { display:inline-block; background:var(--red); color:#fff; font-weight:600; font-size:15px; padding:14px 26px; border-radius:8px; text-decoration:none; cursor:pointer; border:none; transition:transform .15s ease, box-shadow .2s ease; }
  .btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(192,39,45,.35); }
  .btn.ghost { background:transparent; color:inherit; border:1px solid var(--line); }
  .btn.ghost:hover { box-shadow:none; border-color:var(--red); color:var(--red); }
  section { padding:80px 0; }
  .dark { background:var(--dark); color:#F2F0EC; }
  .dark .lead { color:var(--dmut); }
  .dark .btn.ghost { border-color:#3a3a3a; color:#F2F0EC; }
  h1.display { font-size:clamp(34px,5vw,58px); }
  h2.display { font-size:clamp(26px,3.6vw,40px); margin:12px 0 16px; }
  h3 { font-weight:700; }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:900px){ .grid2,.grid3,.grid4{grid-template-columns:1fr;} }
  .card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px; transition:transform .25s ease, box-shadow .25s ease; }
  .card:hover { transform:translateY(-5px); box-shadow:0 18px 44px rgba(0,0,0,.10); }
  .dark .card { background:#1D1D1D; border-color:var(--dline); }
  .num { font-family:'InterDisplay'; font-weight:900; font-size:30px; color:var(--red); }
  .statn { font-family:'InterDisplay'; font-weight:900; font-size:38px; letter-spacing:-.02em; }
  .statl { font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--dmut); margin-top:6px; font-weight:500; }
  .hr { height:1px; background:var(--line); }
  .pill { display:inline-block; border:1px solid #3a3a3a; border-radius:99px; padding:7px 16px; font-size:13px; color:var(--dmut); margin:0 8px 8px 0; }
  .hexli { list-style:none; }
  .hexli li { padding-left:34px; position:relative; margin-bottom:13px; color:var(--mut); font-size:15px; }
  .hexli li:before { content:""; position:absolute; left:0; top:1px; width:20px; height:22px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpolygon points='50,7 93,31 93,79 50,103 7,79 7,31' fill='none' stroke='%23C0272D' stroke-width='10'/%3E%3Cpath d='M32 55 L45 68 L70 40' fill='none' stroke='%23C0272D' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
  .hexli b { color:var(--ink); }
  .dark .hexli b { color:#F2F0EC; }
  .dark .hexli li { color:var(--dmut); }

  /* NAV */
  nav { position:sticky; top:0; z-index:50; background:rgba(250,250,247,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); transition:box-shadow .25s; }
  nav.scrolled { box-shadow:0 6px 24px rgba(0,0,0,.08); }
  nav .wrap { display:flex; align-items:center; justify-content:space-between; height:74px; }
  nav img { height:34px; cursor:pointer; }
  nav .links { display:flex; align-items:center; gap:6px; }
  nav .links a, nav .links .dd > span { color:var(--ink); text-decoration:none; font-weight:500; font-size:15px; padding:8px 12px; border-radius:8px; cursor:pointer; display:inline-block; transition:background .2s; }
  nav .links a:hover, nav .links .dd > span:hover { background:#F0EDE6; }
  nav .links a.on { color:var(--red); }
  nav .dd { position:relative; }
  nav .dd .menu { position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px; min-width:250px; box-shadow:0 18px 44px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform:translateY(6px); transition:all .2s; }
  nav .dd:hover .menu { opacity:1; visibility:visible; transform:none; }
  nav .dd .menu a { display:block; padding:10px 12px; font-size:14.5px; }
  nav .dd .menu small { display:block; color:var(--mut); font-size:12px; font-weight:400; }
  @media (max-width:1020px){ nav .links{display:none;} }

  main { display:block; }

  /* Animations */
  .rv { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
  .rv.in { opacity:1; transform:none; }
  @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  .marquee { overflow:hidden; }
  .marquee .track { display:flex; width:max-content; animation:marquee 34s linear infinite; }
  .marquee:hover .track { animation-play-state:paused; }
  .marquee .half { display:flex; align-items:center; gap:56px; padding-right:56px; }
  .marquee img { height:42px; width:auto; filter:grayscale(1) contrast(.9); opacity:.75; transition:all .3s; }
  .marquee img:hover { filter:none; opacity:1; }
  .marquee span { font-family:'InterDisplay'; font-weight:800; font-size:18px; color:#5A564F; white-space:nowrap; }
  @keyframes floaty { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(2deg)} }
  .hero-hex { animation:floaty 10s ease-in-out infinite; }
  @media (prefers-reduced-motion:reduce){ *,*:before,*:after{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} }

  /* Mock UI logiciel */
  .app { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 30px 70px rgba(0,0,0,.14); overflow:hidden; font-size:13px; }
  .dark .app { background:#1B1B1B; border-color:#2E2E2E; color:#F2F0EC; }
  .app .bar { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); background:#F6F4EF; }
  .dark .app .bar { background:#232323; border-color:#2E2E2E; }
  .app .bar i { width:10px; height:10px; border-radius:50%; background:#D8D4CC; display:inline-block; }
  .dark .app .bar i { background:#3a3a3a; }
  .app .bar b { margin-left:10px; font-size:12px; color:var(--mut); font-weight:500; }
  .app .body { padding:18px; }
  .kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
  .kpi div { background:#FAFAF7; border:1px solid var(--line); border-radius:10px; padding:12px; }
  .dark .kpi div { background:#232323; border-color:#2E2E2E; }
  .kpi small { display:block; color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
  .kpi b { font-family:'InterDisplay'; font-weight:800; font-size:22px; }
  .bars { display:flex; align-items:flex-end; gap:10px; height:120px; margin-top:16px; }
  .bars div { flex:1; background:#E7E3DC; border-radius:6px 6px 0 0; position:relative; }
  .dark .bars div { background:#2E2E2E; }
  .bars div.hot { background:var(--red); }
  .bars div span { position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:11px; color:var(--mut); }
  .steps { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .steps div { background:#FAFAF7; border:1px solid var(--line); border-radius:99px; padding:7px 12px; font-size:12px; white-space:nowrap; }
  .dark .steps div { background:#232323; border-color:#2E2E2E; }
  .steps div b { color:var(--red); }
  .steps .arr { border:none; background:none; color:var(--mut); padding:0 2px; }
  .rows div.r { display:grid; grid-template-columns:2fr 1.2fr 1fr 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center; }
  .rows .tagp { justify-self:start; }
  .dark .rows div.r { border-color:#2E2E2E; }
  .tagp { display:inline-block; border-radius:99px; padding:3px 10px; font-size:11px; font-weight:600; }
  .t-red { background:#FBE9EA; color:var(--red); } .t-gray { background:#EFEDE8; color:#555; } .t-green { background:#E6F4EA; color:#1E7A3C; }
  .dark .t-gray { background:#2E2E2E; color:#ccc; }

  /* Simulateur */
  .sim { background:var(--dark); color:#F2F0EC; border-radius:20px; padding:44px; position:relative; overflow:hidden; }
  .sim:before { content:""; position:absolute; right:-140px; top:-140px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(192,39,45,.35), transparent 65%); }
  .sim input[type=range] { width:100%; accent-color:var(--red); }
  .sim input[type=number] { background:#1D1D1D; border:1px solid #3a3a3a; color:#F2F0EC; border-radius:8px; padding:12px 14px; font-size:18px; width:100%; font-family:'InterDisplay'; font-weight:800; }
  .sim label { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dmut); font-weight:600; display:block; margin-bottom:8px; }
  .sim .res { font-family:'InterDisplay'; font-weight:900; font-size:clamp(40px,5vw,64px); letter-spacing:-.03em; color:#fff; line-height:1; }
  .sim .res span { color:var(--red); }

  .hexph { width:110px; height:122px; clip-path:polygon(50% 3%,95% 27%,95% 73%,50% 97%,5% 73%,5% 27%); object-fit:cover; display:block; margin:0 auto 14px; }
  .hexph.big { width:210px; height:232px; }
  .tl { position:relative; }
  .tl:before { content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:#2C2C2C; }
  .tl .step { position:relative; padding:0 0 22px 44px; }
  .tl .step:before { content:""; position:absolute; left:2px; top:4px; width:20px; height:22px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cpolygon points='50,7 93,31 93,79 50,103 7,79 7,31' fill='%23C0272D'/%3E%3C/svg%3E") no-repeat center/contain; }
  .tl .y { font-family:'InterDisplay'; font-weight:800; font-size:17px; color:var(--red); }
  .badge { position:absolute; top:-15px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:7px 18px; border-radius:99px; white-space:nowrap; box-shadow:0 8px 20px rgba(192,39,45,.4); }
  .pricecard { position:relative; border-radius:16px; padding:36px 30px 30px; display:flex; flex-direction:column; }
  .glowcard { border:2px solid var(--red) !important; box-shadow:0 24px 64px rgba(192,39,45,.22); }
  .cyc { display:flex; flex-direction:column; }
  .cyc .who { margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; color:var(--mut); }
  .cyc .who b { color:var(--ink); }
  /* ===== Fenetre de prise de rendez-vous =====================================
     Le bandeau du haut porte le logo FINOPTI ; le calendrier Google est place
     dans un cadre en creux, sur fond gris, visiblement distinct du reste. La
     hierarchie visuelle dit donc deux choses a la fois : vous etes chez FINOPTI,
     et ce rectangle-la appartient a Google. */
  .modale { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
  .modale[hidden] { display:none; }
  .modale-fond { position:absolute; inset:0; background:rgba(10,10,10,.62); backdrop-filter:blur(3px); animation:modale-fondu .25s ease; }
  .modale-panneau { position:relative; width:min(760px,100%); max-height:calc(100vh - 48px); display:flex; flex-direction:column; background:#fff; border-top:3px solid var(--red); border-radius:18px; overflow:hidden; box-shadow:0 40px 90px rgba(0,0,0,.34); animation:modale-entree .3s cubic-bezier(.2,.7,.3,1); }
  @keyframes modale-fondu { from{opacity:0} to{opacity:1} }
  @keyframes modale-entree { from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none} }
  @media (prefers-reduced-motion:reduce){ .modale-fond,.modale-panneau{animation:none} }

  /* Bandeau sombre, comme les sections d'ouverture du site : le motif hexagonal
     y installe l'identite FINOPTI avant que le visiteur n'arrive chez Google. */
  .modale-entete { position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; padding:26px 22px; background:var(--dark); }
  .modale-logo { height:26px; width:auto; display:block; position:relative; z-index:1; }
  /* Hexagones concentriques dessines a la taille du bandeau : recadrer le grand
     motif du site ne montrait que ses aretes verticales, illisibles. */
  .modale-hex { position:absolute; left:172px; bottom:0; width:220px; height:150px; pointer-events:none; }
  .modale-service { position:relative; z-index:1; margin-left:auto; padding-left:16px; border-left:1px solid var(--dline); font-size:12.5px; color:var(--dmut); letter-spacing:.02em; }
  .modale-service b { color:#F2F0EC; font-weight:600; }
  .modale-fermer { position:relative; z-index:1; flex:none; width:34px; height:34px; border:1px solid var(--dline); background:transparent; border-radius:50%; font-size:19px; line-height:1; color:var(--dmut); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
  .modale-fermer:hover { background:#fff; color:var(--ink); border-color:#fff; }

  .modale-corps { position:relative; padding:26px 26px 22px; overflow-y:auto; }
  /* Meme motif, presque efface : une texture, pas une decoration. */
  .modale-corps:before { content:""; position:absolute; left:-190px; top:-40px; width:420px; height:420px; background:url('/assets/img/hexring.png') no-repeat center/contain; opacity:.07; pointer-events:none; }
  .modale-corps > * { position:relative; }
  .modale-corps .surtitre { font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--red); }
  .modale-corps h2 { font-family:'InterDisplay','Inter',sans-serif; font-weight:900; letter-spacing:-.02em; line-height:1.1; font-size:27px; margin:8px 0 10px; }
  .modale-intro { color:var(--mut); font-size:15px; line-height:1.55; max-width:60ch; }

  /* Le cadre en creux : c'est lui qui signale « ici, c'est Google » */
  .modale-cadre { position:relative; margin-top:20px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow:inset 0 2px 10px rgba(0,0,0,.05); }
  .modale-cadre iframe { width:100%; height:clamp(520px,64vh,660px); border:0; border-radius:8px; display:block; background:#fff; }
  /* Superpose au cadre plutot qu'empile : la hauteur ne bouge pas au chargement.
     Retire apres un delai fixe cote script : l'evenement 'load' d'une iframe
     Google ne se declenche pas, s'y fier laisserait le calendrier masque. */
  .modale-attente { position:absolute; inset:10px; z-index:2; display:flex; align-items:center; justify-content:center; background:var(--paper); border-radius:8px; color:var(--mut); font-size:14px; transition:opacity .4s ease; }
  .modale-attente.parti { opacity:0; pointer-events:none; }
  .modale-pied { margin-top:14px; font-size:13px; color:var(--mut); }
  .modale-pied a { color:var(--red); font-weight:600; text-decoration:none; }

  @media (max-width:640px){
    .modale { padding:0; }
    .modale-panneau { width:100%; max-height:100vh; height:100vh; border-radius:0; }
    .modale-entete { padding:16px 18px; }
    .modale-hex { left:auto; right:52px; width:180px; height:120px; }
    .modale-corps { padding:20px 18px 18px; }
    .modale-corps h2 { font-size:23px; }
  }
  body.modale-ouverte { overflow:hidden; }

  footer { background:var(--dark); color:var(--dmut); padding:52px 0; font-size:14px; border-top:1px solid var(--dline); }
  footer a { color:#F2F0EC; text-decoration:none; cursor:pointer; }

  .tm b { display:block; font-family:'InterDisplay'; font-weight:800; font-size:18px; letter-spacing:-.01em; }
  .tm .role { display:block; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-top:4px; }
  .tm .task { display:block; font-size:13px; color:var(--mut); margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
  .tm .task:before { content:"Pour vous : "; color:var(--ink); font-weight:600; }
  .stats5 { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; border-top:1px solid var(--dline); margin-top:44px; padding-top:30px; }
  @media (max-width:900px){ .stats5{grid-template-columns:repeat(2,1fr);} }
  .factu { background:var(--dark); color:#F2F0EC; border-radius:14px; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; border-left:5px solid var(--red); }
  .factu b { font-family:'InterDisplay'; font-weight:800; font-size:18px; letter-spacing:-.01em; }
  .factu p { color:var(--dmut); font-size:14.5px; margin-top:2px; }
  .factu > div:first-child { flex:1 1 0; min-width:320px; }
  .factu.light { background:#fff; color:var(--ink); border:1px solid var(--line); border-left:5px solid var(--red); }
  .factu.light p { color:var(--mut); }
  .flow { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
  @media (max-width:900px){ .flow{grid-template-columns:1fr;} }
  .flow .st { background:#1D1D1D; border:1px solid #2E2E2E; border-radius:12px; padding:18px; position:relative; }
  .flow .st .k { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dmut); font-weight:600; }
  .flow .st h4 { font-size:15px; margin-top:6px; color:#F2F0EC; }
  .flow .st .us { margin-top:12px; padding-top:12px; border-top:1px solid #2E2E2E; font-size:13px; color:var(--dmut); }
  .flow .st .us:before { content:"FINOPTI : "; color:var(--red); font-weight:700; }

  .legal p, .legal ul, .legal h2, .legal h3 { max-width:820px; }
  .legal h2 { font-size:20px; font-weight:700; margin:34px 0 10px; }
  .legal h3 { font-size:16px; font-weight:700; margin:22px 0 8px; }
  .legal p, .legal li { color:var(--mut); font-size:15px; }
  .legal ul { padding-left:22px; margin:8px 0; }
  .legal a { color:var(--red); }