/* Styles propres à index.html.
   Extraits des 7 bloc(s) <style> de la page, dans leur ordre d'origine.
   Chargé au même rang qu'avant dans la cascade : après le socle, avant responsive.css. */
/* Partagé par 2 page(s) : en/index.html, index.html */

/* ==== bloc 1 — extrait de index.html ==== */
  :root{ --ink:#0E1726; --ink2:#5a6478; --gold:#C8922A; --goldb:#ECB845; --navy:#0E1726; --line:#e8ebf0; --soft:#F5F7FA; }
  *{margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
  .front *,.real *,.method *,.about *,.faq *,.contact *,footer *,nav *{box-sizing:border-box;}
  body{font-family:'Inter',sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif; letter-spacing:-0.02em; line-height:1.06;}
  a{text-decoration:none; color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 2rem;}
  .eyebrow{display:inline-flex; align-items:center; gap:0.7rem; font-size:0.74rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold);}
  .eyebrow::before{display:none;}
  .btn{display:inline-flex; align-items:center; gap:0.55rem; font-family:'Space Grotesk'; font-weight:600; border-radius:11px; transition:transform .18s, box-shadow .18s; cursor:pointer;}
  .btn svg{transition:transform .2s;} .btn:hover svg{transform:translateX(4px);}

  .btn-gold{background:var(--goldb); color:var(--navy); font-size:0.96rem; padding:0.9rem 1.5rem;}
  .btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(236,184,69,0.45);}
  .btn-line{font-family:'Space Grotesk'; font-weight:600; font-size:0.94rem; color:var(--ink); border-bottom:2px solid var(--gold); padding-bottom:2px;}

  /* NAV (clair) */
  nav{position:sticky; top:0; z-index:30; background:rgba(155, 21, 21, 0.58); backdrop-filter:blur(20px) saturate(10%); -webkit-backdrop-filter:blur(18px) saturate(10%); border-bottom:1px solid rgba(115, 33, 33, 0.55); box-shadow:0 6px 26px rgba(14,23,38,0.07); transition:background .3s, box-shadow .3s;}
  nav.scrolled{background:rgba(255,255,255,0.9); box-shadow:0 10px 32px rgba(225, 233, 246, 0.12);}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:75px;}
  .nav-logo img{height:70px; display:block;}
  .nav-logo .lg-mark{display:none;}
  .nav-mid{display:flex; gap:2rem;}
  .nav-mid a{font-weight:500; font-size:0.94rem; color:var(--ink); position:relative; padding:0.2rem 0;}
  .nav-mid a::after{content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:var(--gold); transition:width .25s;}
  .nav-mid a:hover::after{width:100%;}
  .nav-right{display:flex; align-items:center; gap:1.2rem;}
  .lang{font-size:0.84rem; color:var(--ink2);} .lang b{color:var(--ink);}
  .nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0; border:none; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none;}
  .nav-toggle span{display:block; width:24px; height:2px; margin:0 auto; border-radius:2px; background:var(--ink); transition:transform .28s ease, opacity .2s ease;}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.is-open span:nth-child(2){opacity:0;}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* HERO (clair, fond bleu pale provisoire) */
  .herowrap{position:sticky; top:0; z-index:0; overflow:hidden; margin-top:-75px;
    background:
      linear-gradient(95deg, rgba(247,250,255,0.62) 0%, rgba(247,250,255,0.18) 42%, rgba(247,250,255,0) 72%),
      url('/files/hero-bg.jpg') center/cover no-repeat;}
  .page-rest{position:relative; z-index:1; background:#fff; border-radius:30px 30px 0 0; box-shadow:0 -26px 60px -22px rgba(14,23,38,0.22);}
  .hero{min-height:100vh; min-height:100svh; display:grid; grid-template-columns:1.16fr 0.94fr; gap:2.4rem; align-items:center;}
  .hero h1{font-size:clamp(2.2rem,4.4vw,46px); font-weight:700; line-height:1.16; letter-spacing:-0.01em; color:var(--ink); margin:0;}
  .hero h1 .ser{color:var(--gold);}

  .hero-cta{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;}
  .kicker{display:inline-flex; align-items:center; gap:0.6rem; margin-bottom:1.4rem; font-size:0.88rem; font-weight:500; color:var(--ink2);}
  .kicker .kf{display:flex; align-items:center; gap:5px;}
  .kicker .kfc{height:14px; border-radius:2.5px; overflow:hidden; display:flex; box-shadow:0 1px 2px rgba(14,23,38,0.16), inset 0 0 0 0.5px rgba(14,23,38,0.10);}
  .kicker .kfc.fr{width:21px;}
  .kicker .kfc.fr i{flex:1;} .kicker .kfc.fr .b{background:#0055A4;} .kicker .kfc.fr .w{background:#fff;} .kicker .kfc.fr .r{background:#EF4135;}
  .kicker .kfc.ch{width:14px; background:#D52B1E; position:relative;}
  .kicker .kfc.ch::before{content:""; position:absolute; left:50%; top:50%; width:8px; height:2.4px; background:#fff; border-radius:0.5px; transform:translate(-50%,-50%);}
  .kicker .kfc.ch::after{content:""; position:absolute; left:50%; top:50%; width:2.4px; height:8px; background:#fff; border-radius:0.5px; transform:translate(-50%,-50%);}

  .reassure{font-size:0.85rem; color:var(--ink2); margin-bottom:1.1rem;}

  /* COMPOSITION (sur fond clair) */

  @keyframes groundPulse{0%,100%{opacity:0.9; transform:translateX(-50%) scaleX(1);} 50%{opacity:0.55; transform:translateX(-50%) scaleX(0.86);}}

  @keyframes floatY{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
  @keyframes popIn{from{opacity:0; transform:scale(.93)} to{opacity:1; transform:none}}
  @keyframes riseUp{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}
  .hero .kicker{animation:riseUp .7s .05s both;}
  .hero h1{animation:riseUp .7s .15s both;}

  .hero .hero-cta{animation:riseUp .7s .35s both;}

  /* ============ SERVICES ============ */
  .services{padding:50px 0 6.5rem;}
  .s-head{text-align:center; margin:0 0 3.4rem; padding-top:0.6rem;}

  .s-head h2{font-size:2.9rem; font-weight:700; line-height:1.1; letter-spacing:-0.02em; color:var(--ink); max-width:660px; margin:0 auto;}
  .s-head h2 .hl{color:var(--gold);}
  .s-lead{margin:1.4rem auto 0; max-width:56ch; color:var(--ink2); font-size:1.05rem; line-height:1.6;}

  /* FRONTALIER (2 colonnes éditorial + image Genève) */
  .front{background:var(--soft); padding:5.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;}
  .front-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:4.2rem; align-items:center; max-width:1120px; margin:0 auto;}
  .front-txt .eyebrow{margin-bottom:1.1rem;}
  .front h2{font-size:2.4rem; font-weight:700; line-height:1.12; margin:0 0 0.9rem;}
  .front h2 em{font-style:normal; color:var(--gold);}
  .front .lead{color:var(--ink2); font-size:1.05rem; line-height:1.62; max-width:48ch; margin:0 0 2.1rem;}

  /* deux lignes pays */
  .front-rows{display:flex; flex-direction:column; gap:1.35rem; margin-bottom:2.1rem;}
  .frow{display:flex; align-items:flex-start; gap:1rem;}
  .frow .flagchip{margin:0.2rem 0 0; flex:0 0 auto;}
  .frow h3{font-size:1.12rem; font-weight:700; margin-bottom:0.25rem;}
  .frow p{color:var(--ink2); font-size:0.94rem; line-height:1.55; max-width:44ch;}
  .flagchip{width:42px; height:29px; border-radius:5px; overflow:hidden; display:flex; box-shadow:0 4px 12px rgba(14,23,38,0.12);}
  .flagchip.fr i{flex:1;} .flagchip.fr .b{background:#0055A4;} .flagchip.fr .w{background:#fff;} .flagchip.fr .r{background:#EF4135;}
  .flagchip.ch{background:#D52B1E; position:relative;}
  .flagchip.ch::before{content:""; position:absolute; left:50%; top:50%; width:16px; height:4.5px; background:#fff; transform:translate(-50%,-50%);}
  .flagchip.ch::after{content:""; position:absolute; left:50%; top:50%; width:4.5px; height:16px; background:#fff; transform:translate(-50%,-50%);}

  /* comparaison tarif (✗/✓ plus claire) */
  .front-cmp{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2.1rem;}
  .cc{position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.15rem 1.25rem; text-align:left;}
  .cc span{display:block; font-size:0.78rem; color:var(--ink2); margin-bottom:0.3rem;}
  .cc b{font-family:'Space Grotesk'; font-size:1.45rem; display:block; line-height:1.1;}
  .cc.old b{color:var(--ink2); text-decoration:line-through; text-decoration-color:#c9303077;}
  .cc.new{border-color:var(--goldb); background:linear-gradient(180deg,#fffdf6,#fff); box-shadow:0 14px 34px -20px rgba(200,146,42,0.5);}
  .cc.new b{color:var(--gold);}
  .cc.new .tag{display:block; margin-top:0.4rem; font-size:0.74rem; color:var(--gold); font-weight:600;}
  .cc .mk{position:absolute; top:-10px; right:13px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 12px rgba(14,23,38,0.16);}
  .cc.old .mk{background:#eef1f6; color:var(--ink2);}
  .cc.new .mk{background:var(--goldb); color:var(--navy);}
  .cc .mk svg{width:13px; height:13px;}
  .front .ctac{margin-top:0.2rem;}

  /* media Genève — fenêtre navigateur inclinée, même langage que la scène méthode */
  .front-media{position:relative; perspective:1100px;}
  .fm-win{position:relative; border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line);
    transform:rotateX(4deg) rotateY(-9deg); transform-style:preserve-3d; will-change:transform;
    box-shadow:0 46px 90px -34px rgba(14,23,38,0.55), 0 0 0 1px rgba(255,255,255,0.6) inset;
    transition:transform .55s cubic-bezier(.2,.65,.2,1), box-shadow .55s cubic-bezier(.2,.65,.2,1);}
  .front-media:hover .fm-win{transform:rotateX(0deg) rotateY(0deg) translateY(-6px);
    box-shadow:0 60px 110px -36px rgba(14,23,38,0.6);}
  .fm-bar{display:flex; align-items:center; gap:0.45rem; height:38px; padding:0 0.95rem;
    background:#f6f8fb; border-bottom:1px solid var(--line);}
  .fm-bar i{width:9px; height:9px; border-radius:50%;}
  .fm-url{margin-left:0.7rem; font-size:0.7rem; color:var(--ink2); background:#fff; border:1px solid var(--line);
    border-radius:6px; padding:0.22rem 0.85rem; letter-spacing:0.02em; white-space:nowrap;}
  .fm-win img{width:100%; display:block;}
  @media (prefers-reduced-motion:reduce){ .fm-win{transition:none; transform:none;} .front-media:hover .fm-win{transform:none;} }

  /* scroll reveal — directionnel et marqué, rejoue à l'entrée ET à la sortie */
  .reveal,.reveal-l,.reveal-r,.reveal-t{opacity:0;
    transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);}
  .reveal{transform:translateY(80px);}
  .reveal-t{transform:translateY(-80px);}
  .reveal-l{transform:translateX(-110px);}
  .reveal-r{transform:translateX(110px);}
  /* le glissement lateral n'a de place que sur tres grand ecran : partout
     ailleurs il poussait la page de 110px vers la droite (defilement horizontal) */
  @media (max-width:1600px){ .reveal-l,.reveal-r{transform:translateY(80px);} }
  /* la section contact est pleine largeur : jamais de glissement lateral */
  .contact-card .reveal-l,.contact-card .reveal-r{transform:translateY(80px);}
  .reveal.in,.reveal-l.in,.reveal-r.in,.reveal-t.in{opacity:1; transform:none;}
  .reveal.d1,.reveal-l.d1,.reveal-r.d1{transition-delay:.09s;}
  .reveal.d2,.reveal-l.d2,.reveal-r.d2{transition-delay:.18s;}
  .reveal.d3,.reveal-l.d3{transition-delay:.27s;}
  .reveal.d4{transition-delay:.36s;}
  .reveal:not(.in),.reveal-l:not(.in),.reveal-r:not(.in),.reveal-t:not(.in){transition-delay:0s;} /* sortie sans délai */
  @media (prefers-reduced-motion:reduce){ .reveal,.reveal-l,.reveal-r,.reveal-t{opacity:1 !important; transform:none !important; transition:none !important;} }

  /* ============ REALISATIONS ============ */
  .real{padding:6.2rem 0; background:var(--soft); border-top:1px solid var(--line);}
  .real .r-head{text-align:center; margin:0 0 3.6rem;}

  .real .r-head p{max-width:600px; margin-left:auto; margin-right:auto;}
  .real h2{font-size:2.5rem; font-weight:700; margin:0.8rem 0 0.7rem; line-height:1.08;}
  .real h2 em{font-style:normal; color:var(--gold);}
  .real .r-head p{color:var(--ink2); font-size:1.04rem; line-height:1.62;}

  /* ============ METHODE / CARROUSEL HORIZONTAL (sombre) ============ */
  .method{position:relative; color:#fff; overflow:hidden; padding:4.5rem 0 5rem;
    background:#0a111e url('/files/abstract-liquid-fluid-art-with-gold-veins.jpg') center/cover no-repeat;}
  .method::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(10,17,30,0.82) 0%, rgba(10,17,30,0.6) 38%, rgba(10,17,30,0.64) 62%, rgba(10,17,30,0.86) 100%);}
  .method .wrap{position:relative; z-index:1;}

  /* ============ ABOUT ============ */
  .about{padding:6rem 0; overflow:hidden;}
  .about-grid{display:grid; grid-template-columns:330px 1fr; gap:4.6rem; align-items:center;}
  .about .photo{position:relative;}
  /* grille de points or derrière la photo, même vocabulaire que le hero */
  .about .photo::before{content:""; position:absolute; left:-34px; top:-34px; width:150px; height:150px; z-index:0;
    background-image:radial-gradient(rgba(200,146,42,0.4) 1.4px, transparent 1.4px); background-size:13px 13px;
    -webkit-mask-image:radial-gradient(closest-side, #000, transparent); mask-image:radial-gradient(closest-side, #000, transparent);}
  .about .photo::after{content:""; position:absolute; right:-22px; bottom:34px; width:120px; height:1px; z-index:0;
    background:linear-gradient(90deg, rgba(200,146,42,0.5), transparent);}
  .about .photo img{position:relative; z-index:1; width:100%; border-radius:18px; display:block; border:1px solid var(--line);
    box-shadow:0 30px 60px -28px rgba(14,23,38,0.5); transform:rotate(-1.6deg);
    transition:transform .55s cubic-bezier(.2,.65,.2,1), box-shadow .55s cubic-bezier(.2,.65,.2,1);}
  .about .photo:hover img{transform:rotate(0deg) translateY(-6px); box-shadow:0 44px 80px -30px rgba(14,23,38,0.55);}
  @media (prefers-reduced-motion:reduce){ .about .photo img{transition:none; transform:none;} .about .photo:hover img{transform:none;} }
  .about .txt h2{font-size:2.45rem; font-weight:700; line-height:1.12; margin:1.1rem 0 1.3rem;}
  .about .txt h2 em{font-style:normal; color:var(--gold);}
  .about .txt p{color:#45516b; font-size:1.02rem; line-height:1.72; margin-bottom:1.1rem; max-width:54ch;}
  .about .txt p.lead{font-size:1.16rem; color:var(--ink); font-weight:500;}
  /* devise / slogan (remplace les stats) */
  .about .txt .about-devise{font-family:'Space Grotesk'; font-weight:600; font-size:1.55rem; line-height:1.32; color:var(--ink); margin:2rem 0; max-width:24ch; letter-spacing:-0.01em;}
  .about .txt .about-devise em{font-style:normal; color:var(--gold);}
  .about-facts{display:flex; gap:2.2rem; margin:0 0 2rem; flex-wrap:wrap;}
  .about-facts div{display:flex; flex-direction:column; gap:0.15rem; padding-left:0.9rem; border-left:2px solid var(--goldb);}
  .about-facts b{font-family:'Space Grotesk'; font-size:1.35rem; font-weight:700; color:var(--ink); line-height:1.1;}
  .about-facts span{font-size:0.84rem; color:var(--ink2); max-width:16ch; line-height:1.4;}
  .about-cta{display:flex; align-items:center; gap:1.7rem; flex-wrap:wrap; margin-top:0.2rem;}
  .about-more{display:inline-flex; align-items:center; gap:0.5rem; font-family:'Space Grotesk'; font-weight:600; font-size:0.98rem; color:var(--ink); border-bottom:2px solid var(--goldb); padding-bottom:3px; transition:color .25s, gap .25s;}
  .about-more svg{transition:transform .3s cubic-bezier(.34,.7,.3,1);}
  .about-more:hover{color:var(--gold);} .about-more:hover svg{transform:translateX(4px);}

  /* ============ FAQ ============ */
  .faq{padding:6.2rem 0; background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .faq-grid{display:grid; grid-template-columns:0.82fr 1.18fr; gap:3.4rem; align-items:stretch;}
  .faq .f-head{display:flex; flex-direction:column;}
  .faq .f-head h2{font-size:2.4rem; font-weight:700; margin:1rem 0 1rem; line-height:1.1;}
  .faq .f-head h2 em{font-style:normal; color:var(--gold);}
  .faq .f-head p{color:var(--ink2); font-size:1rem; line-height:1.62; max-width:30ch; margin-bottom:1.6rem;}
  .faq-help{margin-top:0.4rem; background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.55rem; box-shadow:0 20px 44px -30px rgba(14,23,38,0.34); max-width:330px;}
  .faq-help b{font-family:'Space Grotesk'; font-size:1.1rem; color:var(--ink); display:block; margin-bottom:0.45rem;}
  .faq .f-head .faq-help p{color:var(--ink2); font-size:0.93rem; line-height:1.55; margin:0 0 1rem; max-width:none;}
  .qa{border-top:1px solid var(--line); border-left:3px solid transparent; padding-left:0; transition:background .3s, border-color .3s, padding .3s;}
  .qa:last-child{border-bottom:1px solid var(--line);}
  .qa[open]{border-left-color:var(--goldb); padding-left:1rem; background:linear-gradient(90deg, rgba(236,184,69,0.06), rgba(236,184,69,0) 65%);}
  .qa .q{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.45rem 0.2rem; cursor:pointer; font-family:'Space Grotesk'; font-weight:600; font-size:1.08rem; color:var(--ink); list-style:none;}
  .qa .q::-webkit-details-marker{display:none;}
  .qa .ic{flex:0 0 auto; width:26px; height:26px; position:relative;}
  .qa .ic::before,.qa .ic::after{content:""; position:absolute; left:50%; top:50%; width:13px; height:2px; background:var(--gold); border-radius:2px; transform:translate(-50%,-50%); transition:transform .3s;}
  .qa .ic::after{transform:translate(-50%,-50%) rotate(90deg);}
  .qa[open] .ic::after{transform:translate(-50%,-50%) rotate(0);}
  .qa .a{color:var(--ink2); line-height:1.68; font-size:0.97rem; max-width:56ch; padding:0 0.2rem 1.5rem; margin-top:-0.2rem;}
  .qa[open] .q{color:var(--gold);}
  .qa[open] .a{animation:faqIn .4s ease;}
  @keyframes faqIn{from{opacity:0; transform:translateY(-7px);} to{opacity:1; transform:none;}}

  /* ============ CONTACT (clair, vraie carte) ============ */
  #contact{position:relative; padding:6.2rem 0 6.6rem;
    background:
      radial-gradient(50% 60% at 86% 8%, rgba(236,184,69,0.09), transparent 65%),
      radial-gradient(45% 55% at 6% 92%, rgba(14,23,38,0.05), transparent 60%),
      var(--soft);
    clip-path:polygon(
      0 26px, 5% 12px, 11% 24px, 18% 6px, 26% 22px, 33% 14px, 41% 27px, 49% 9px,
      57% 21px, 64% 5px, 72% 25px, 79% 13px, 86% 23px, 93% 8px, 100% 18px,
      100% calc(100% - 22px), 95% calc(100% - 8px), 88% calc(100% - 24px), 81% calc(100% - 11px),
      73% calc(100% - 26px), 66% calc(100% - 6px), 58% calc(100% - 20px), 50% calc(100% - 10px),
      42% calc(100% - 25px), 35% calc(100% - 12px), 27% calc(100% - 23px), 19% calc(100% - 7px),
      12% calc(100% - 21px), 6% calc(100% - 13px), 0 calc(100% - 25px));}
  /* pleine largeur : infos à gauche sur le fond, carte collée au bord droit et aux déchirures */
  .contact .wrap{max-width:none; padding:0;}
  .contact-card{display:grid; grid-template-columns:1.02fr 1fr; align-items:stretch; gap:0 3.4rem;}
  .cinfo{padding:0 0 0 max(2rem, calc((100vw - 1180px)/2 + 2rem)); align-self:center;}
  .contact .eyebrow{margin-bottom:0.5rem;}
  .contact h2{font-size:2.05rem; font-weight:700; line-height:1.1; margin:0 0 0.7rem; color:var(--ink);}
  .contact h2 em{font-style:normal; color:var(--gold);}
  .contact .clede{color:var(--ink2); font-size:1.02rem; line-height:1.6; max-width:40ch; margin-bottom:1.5rem;}
  .cctas{display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; margin-bottom:0.9rem;}
  .btn-outline{display:inline-flex; align-items:center; gap:0.5rem; font-family:'Space Grotesk'; font-weight:600; font-size:0.95rem;
    color:var(--ink); padding:0.9rem 1.35rem; border-radius:11px; border:1.5px solid var(--line); background:#fff; cursor:pointer;
    transition:border-color .2s, background .2s, transform .18s;}
  .btn-outline:hover{border-color:var(--gold); background:#fffdf6; transform:translateY(-2px);}
  .btn-outline svg{width:17px; height:17px; color:var(--gold);}
  .ctrust-line{display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--ink2); margin-bottom:1.5rem;}
  .ctrust-line svg{width:16px; height:16px; color:var(--gold); flex:0 0 auto;}
  .cinfo-list{list-style:none; display:flex; flex-direction:column; gap:0.7rem; padding-top:1.5rem; border-top:1px solid var(--line); margin-bottom:1.6rem;}
  .cinfo-list li{display:flex; align-items:center; gap:0.7rem; font-size:0.95rem; color:var(--ink);}
  .cinfo-list li svg{width:18px; height:18px; color:var(--gold); flex:0 0 auto;}
  .cinfo-list a{color:var(--ink); transition:color .2s;} .cinfo-list a:hover{color:var(--gold);}
  .cperson{display:flex; align-items:center; gap:0.85rem;}
  .cperson img{width:50px; height:50px; border-radius:50%; object-fit:cover; object-position:center top; flex:0 0 auto; border:2px solid rgba(236,184,69,0.7);}
  .cperson b{font-family:'Space Grotesk'; font-size:0.98rem; color:var(--ink); display:block; margin-bottom:0.1rem;}
  .cperson span{font-size:0.85rem; color:var(--ink2); line-height:1.4; display:block; max-width:36ch;}

  /* vraie carte (Leaflet) */
  .cmapwrap{position:relative; min-height:430px; background:#eef1f6;
    margin:-6.2rem 0 -6.6rem; /* la carte remonte jusqu'aux déchirures de la section */
    box-shadow:-24px 0 48px -30px rgba(14,23,38,0.25);}
  #contactMap{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
  .leaflet-container{font-family:'Inter',sans-serif; background:#eef1f6;}
  .map-badge{position:absolute; z-index:500; top:1rem; left:1rem; display:inline-flex; align-items:center; gap:0.5rem;
    font-family:'Space Grotesk'; font-weight:600; font-size:0.74rem; letter-spacing:0.02em; color:var(--ink);
    background:rgba(255,255,255,0.92); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:0.45rem 0.8rem; border-radius:30px; box-shadow:0 6px 18px -8px rgba(14,23,38,0.3);}
  .map-badge svg{width:14px; height:14px; color:var(--gold);}
  .mk-wrap .mk-dot{position:absolute; left:0; top:0; width:16px; height:16px; border-radius:50%; background:var(--goldb); border:3px solid #fff; box-shadow:0 0 0 4px rgba(236,184,69,0.3), 0 2px 6px rgba(14,23,38,0.35);}
  .mk-wrap .mk-lab{position:absolute; left:23px; top:-3px; font-family:'Space Grotesk'; font-weight:700; font-size:12px; color:var(--ink); background:#fff; padding:2px 8px; border-radius:20px; box-shadow:0 3px 10px -2px rgba(14,23,38,0.25); white-space:nowrap;}
  .mk-city .mk-cdot{position:absolute; left:0; top:0; width:11px; height:11px; border-radius:50%; background:#5a6478; border:2px solid #fff; box-shadow:0 2px 5px rgba(14,23,38,0.3);}
  .mk-city .mk-clab{position:absolute; left:17px; top:-5px; font-family:'Inter'; font-weight:600; font-size:11px; color:var(--ink); background:rgba(255,255,255,0.92); padding:1px 6px; border-radius:14px; white-space:nowrap; box-shadow:0 2px 6px -2px rgba(14,23,38,0.25);}
  .mk-city.mk-left .mk-clab{left:auto; right:17px;}

  /* ============ FOOTER ============ */
  footer{position:relative; background:#0E1726; color:#aeb8c9; padding:4.2rem 0 2rem;}
  .foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.09);}
  .foot-brand img{height:100px; max-width:100%; margin-bottom:1.2rem; margin-left:-25px;}
  .foot-brand p{font-size:0.92rem;max-width:30ch; color:#8b96a8;}
  .foot-soc{display:flex; gap:0.7rem; margin-top:1.4rem;}
  .foot-soc a{width:42px; height:42px; border-radius:11px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); color:#aeb8c9; display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s;}
  .foot-soc a svg{width:19px; height:19px;}
  .foot-soc a:hover{transform:translateY(-3px);}
  .foot-soc a[aria-label="Instagram"]:hover{background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5); color:#fff; border-color:transparent; box-shadow:0 12px 24px -8px rgba(214,41,118,0.55);}
  .foot-soc a[aria-label="LinkedIn"]:hover{background:#0A66C2; color:#fff; border-color:#0A66C2; box-shadow:0 12px 24px -8px rgba(10,102,194,0.6);}

  .foot-col h4{color:#fff; font-family:'Space Grotesk'; font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:1.1rem;}
  .foot-col a{display:block; font-size:0.92rem; color:#9aa4b4; padding:0.36rem 0; transition:color .2s, padding-left .2s;}
  .foot-col a:hover{color:var(--goldb); padding-left:4px;}
  .foot-col.contact a{display:flex; align-items:center; gap:0.6rem;}
  .foot-col.contact a svg{width:16px; height:16px; color:var(--gold); flex:0 0 auto; transition:color .2s;}
  .foot-col.contact a:hover svg{color:var(--goldb);}
  .foot-region{display:inline-flex; align-items:center; gap:0.55rem; margin-top:1.2rem; font-size:0.82rem; color:#cdd5e1;}
  .foot-region .ff{display:inline-flex; gap:4px;}
  .foot-region .fc{height:12px; border-radius:2px; overflow:hidden; display:inline-flex; box-shadow:0 1px 2px rgba(0,0,0,0.35);}
  .foot-region .fc.fr{width:18px;} .foot-region .fc.fr i{flex:1;} .foot-region .fc.fr .b{background:#0055A4;} .foot-region .fc.fr .w{background:#fff;} .foot-region .fc.fr .r{background:#EF4135;}
  .foot-region .fc.ch{width:12px; background:#D52B1E; position:relative;}
  .foot-region .fc.ch::before{content:""; position:absolute; left:50%; top:50%; width:6.5px; height:2px; background:#fff; transform:translate(-50%,-50%);}
  .foot-region .fc.ch::after{content:""; position:absolute; left:50%; top:50%; width:2px; height:6.5px; background:#fff; transform:translate(-50%,-50%);}
  .foot-bot{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding-top:1.8rem; font-size:0.82rem; color:#7c879b;}
  .foot-bot .fb-l{justify-self:start;}
  .foot-bot .fb-c{justify-self:center; text-align:center;}
  .foot-bot .fb-r{justify-self:end;}
  .foot-bot a{color:#9aa4b4; transition:color .2s;} .foot-bot a:hover{color:var(--goldb);}

  @media (max-width:1024px){
    .about-grid{grid-template-columns:minmax(0,1fr); gap:2.6rem;} .about .photo{max-width:420px;}
    .front-grid{grid-template-columns:minmax(0,1fr); gap:2.8rem;} .front-media{order:-1; max-width:480px; margin:0 auto;}
    .faq-grid{grid-template-columns:minmax(0,1fr); gap:1.4rem;}
    .contact-card{grid-template-columns:minmax(0,1fr); gap:2.2rem 0;} .cmapwrap{min-height:330px; margin:0;}
    .cinfo{padding:0 2rem;}

    .foot-top{grid-template-columns:1fr 1fr; gap:2rem;}
  }

  @media (max-width:900px){
    /* Hero collant + recouvrement comme en desktop, empilé et compacté pour tenir dans l'écran */
    .hero{grid-template-columns:minmax(0,1fr); gap:0.8rem; min-height:auto; padding-top:calc(75px + 0.6rem); padding-bottom:0.8rem; align-items:start; align-content:start;} .hero h1{font-size:2.05rem; white-space:normal;}

    .hero-cta{gap:1rem; margin-bottom:0;}

    .s-head h2,.real h2,.method h2,.about .txt h2,.faq .f-head h2{font-size:2rem;}
    .contact h2{font-size:2.05rem;}
    .s-head{grid-template-columns:minmax(0,1fr); gap:1.7rem; align-items:start;}

    .nav-toggle{display:flex;}
    .nav-right{margin-left:auto;}
    .nav-mid{position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0;
      background:#fff; border-bottom:1px solid var(--line); box-shadow:0 22px 40px -22px rgba(14,23,38,0.35);
      padding:0.3rem 0; max-height:0; overflow:hidden; opacity:0; visibility:hidden;
      transition:max-height .32s ease, opacity .25s ease, visibility .32s;}
    .nav-mid.open{max-height:75vh; max-height:75dvh; opacity:1; visibility:visible; overflow-y:auto; -webkit-overflow-scrolling:touch;}
    .nav-mid a{font-size:1rem; padding:0.95rem 1.6rem; width:100%;}
    .nav-mid a::after{display:none;}
    .nav-mid a:hover{background:var(--soft);}
    .method{padding:3.5rem 0 4rem;}

  }

  @media (max-width:560px){
    .wrap{padding:0 1.3rem;}
    .hero{padding-top:calc(64px + 0.4rem); padding-bottom:0.8rem;}
    .kicker{line-height:1.4;}
    .nav-logo .lg-full{display:none;} .nav-logo .lg-mark{display:block; height:42px;}
    .nav-in{height:64px;} .lang{display:none;}
    .nav-right .btn-gold{padding:0.58rem 0.9rem; font-size:0.82rem;}
    .hero h1{font-size:1.95rem;}
    .s-head h2,.real h2,.method h2,.about .txt h2,.faq .f-head h2,.front h2,.contact h2{font-size:1.72rem;}
    .about .txt h2{font-size:1.85rem;}
    .s-head h2{max-width:none;}

    .cinfo{padding:1.9rem 1.6rem;} .cmapwrap{min-height:280px;}
    .cctas{gap:0.6rem;} .cctas .btn,.cctas .btn-outline{flex:1; justify-content:center;}
    .front-cmp{grid-template-columns:minmax(0,1fr); gap:0.9rem;}
    .foot-top{grid-template-columns:minmax(0,1fr); gap:1.9rem;} .foot-soc{margin-top:1rem;}
    .foot-brand img{margin-left:0;}

    .foot-bot{grid-template-columns:minmax(0,1fr); justify-items:center; gap:0.6rem;} .foot-bot .fb-l,.foot-bot .fb-c,.foot-bot .fb-r{justify-self:center; text-align:center;}

  }

/* ==== bloc <style id="hero-v2"> — extrait de index.html ==== */
/* ===== HERO v2 — section hero refaite le 2026-08-29 (centré sur image + intro traversée) ===== */
.herowrap{
  background-color:#fff;
  background-image:
    radial-gradient(60% 80% at 0% 100%,rgba(14,23,38,.045),rgba(14,23,38,0) 60%),
    radial-gradient(55% 70% at 100% 90%,rgba(14,23,38,.04),rgba(14,23,38,0) 58%),
    radial-gradient(45% 55% at 88% 0%,rgba(200,146,42,.05),rgba(200,146,42,0) 62%);
}
/* --- éléments 3D flottants : découpés nets, posés sur le fond flou (profondeur de champ) --- */
.hero-els{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hels-c{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  aspect-ratio:1717/916;
  /* la largeur suit la HAUTEUR REELLE du hero (parent), plus le viewport :
     geometrie identique, mais insensible a la barre d'URL d'iOS Safari */
  height:100%; width:auto; min-width:100%;
}
.hel{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  transform:translate3d(calc(var(--px,0px)*var(--d,1)),calc(var(--py,0px)*var(--d,1)),0);
  will-change:transform;
  animation:var(--in,hel-in-l) 1s cubic-bezier(.19,1,.22,1) var(--indel,.55s) both;
}
.hel:nth-of-type(1){--in:hel-in-t;--indel:.7s}   /* losange, du haut */
.hel:nth-of-type(2){--in:hel-in-l;--indel:.55s}  /* groupe gauche */
.hel:nth-of-type(3){--in:hel-in-r;--indel:.62s}  /* groupe droit */
.hel:nth-of-type(4){--in:hel-in-r;--indel:.82s}  /* tablette code, de droite */
.hel:nth-of-type(5){--in:hel-in-l;--indel:.92s}  /* cube, de gauche */
@keyframes hel-in-l{from{opacity:0;transform:translate3d(-190px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hel-in-r{from{opacity:0;transform:translate3d(190px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hel-in-t{from{opacity:0;transform:translate3d(0,-150px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.hel img{width:100%;height:auto;display:block;animation:hel-float var(--fdur,7s) ease-in-out var(--fdel,0s) infinite alternate}
@keyframes hel-float{
  from{transform:translateY(calc(var(--amp,7px)*-1)) rotate(calc(var(--rot,.5deg)*-1))}
  to{transform:translateY(var(--amp,7px)) rotate(var(--rot,.5deg))}
}
.hels-deco{position:absolute;inset:0;width:100%;height:100%}
@media (prefers-reduced-motion: reduce){
  .hel img{animation:none}
  .hel{transform:none;animation:none;opacity:1}
}
.hero--ct2{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;z-index:1;gap:0}
.hero--ct2 .kicker{margin-bottom:0}
.hero--ct2 h1{font-size:clamp(2rem,3.8vw,2.95rem);line-height:1.1;letter-spacing:-.012em;margin:1.4rem 0 0;max-width:16em}
.hero--ct2 .hero-cta{justify-content:center;margin-top:2.2rem;gap:1.4rem}
.hero--ct2 .reassure{margin:1.6rem 0 0}

/* --- l'intro : rideau marine, le mark se construit, plongée dans le T, le blanc devient la page --- */
.ct2i{display:none;pointer-events:none}
html.ct-intro-run .ct2i{
  display:grid!important;place-items:center;position:fixed;inset:0;z-index:99990;background:#0E1726;
  pointer-events:none;
  animation:ct2i-out 320ms linear 640ms forwards, ct2i-kill 1ms linear 1000ms forwards;
}
@keyframes ct2i-out{to{opacity:0}}
@keyframes ct2i-kill{to{visibility:hidden;pointer-events:none}}
html.ct-intro-run .ct2i svg{width:min(300px,52vw);height:auto;overflow:visible;will-change:transform;
  animation:ct2i-dive 420ms cubic-bezier(.76,0,.24,1) 560ms forwards}
@keyframes ct2i-dive{to{transform:translate(calc(min(300px,52vw)*-7.71),calc(min(300px,52vw)*-2.394)) scale(125)}}
.ct2i path{transform-box:fill-box;transform-origin:center}
html.ct-intro-run .ct2i path{opacity:0}
html.ct-intro-run .ct2i .pi-lt{animation:ct2i-lt 300ms cubic-bezier(.19,1,.22,1) 40ms forwards}
html.ct-intro-run .ct2i .pi-gt{animation:ct2i-gt 300ms cubic-bezier(.19,1,.22,1) 40ms forwards}
html.ct-intro-run .ct2i .pi-c{animation:ct2i-y70 260ms cubic-bezier(.19,1,.22,1) 150ms forwards}
html.ct-intro-run .ct2i .pi-t{animation:ct2i-y70 260ms cubic-bezier(.19,1,.22,1) 200ms forwards}
html.ct-intro-run .ct2i .pi-sl{animation:ct2i-y130 240ms cubic-bezier(.19,1,.22,1) 280ms forwards}
@keyframes ct2i-lt{from{opacity:0;transform:translateX(-120px)}to{opacity:1;transform:none}}
@keyframes ct2i-gt{from{opacity:0;transform:translateX(120px)}to{opacity:1;transform:none}}
@keyframes ct2i-y70{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes ct2i-y130{from{opacity:0;transform:translateY(130px)}to{opacity:1;transform:none}}
/* entrées du contenu : JAMAIS le h1 (candidat LCP, toujours peint) */
html.ct-intro-run .ct2a{opacity:0;transform:translateY(14px);animation:ct2i-rise 420ms cubic-bezier(.19,1,.22,1) forwards}
html.ct-intro-run .ct2a-1{animation-delay:780ms}
html.ct-intro-run .ct2a-2{animation-delay:890ms}
html.ct-intro-run .ct2a-3{animation-delay:1000ms}
@keyframes ct2i-rise{to{opacity:1;transform:none}}
/* skip : tout saute à l'état final */
html.ct2i-skip .ct2i{display:none!important;visibility:hidden!important}
html.ct2i-skip .ct2a{animation:none!important;opacity:1!important;transform:none!important}

/* ==== bloc <style id="nav-v2"> — extrait de index.html ==== */
/* ===== NAV v2 — capsule flottante détachée (2026-08-29) : transparente au repos, verre au scroll ===== */
/* repos : nav nue pleine largeur, éléments larges — scroll : contraction en capsule verre fumé */
nav{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:min(1240px, 100%);
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:0; border:1px solid transparent; border-radius:999px; box-shadow:none;
  transition:width .38s cubic-bezier(.4,0,.2,1), top .38s cubic-bezier(.4,0,.2,1),
    background .3s, box-shadow .3s, border-color .3s, backdrop-filter .3s;
}
nav.scrolled{
  top:14px; width:min(1116px, calc(100% - 28px));
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-color:var(--line);
  box-shadow:0 2px 6px rgba(14,23,38,0.08), 0 18px 42px -12px rgba(14,23,38,0.30), inset 0 1px 0 rgba(255,255,255,0.9);
}
.nav-in{height:80px; padding:0 2rem; transition:height .38s cubic-bezier(.4,0,.2,1), padding .38s cubic-bezier(.4,0,.2,1);}
nav.scrolled .nav-in{height:58px; padding:0 1.1rem 0 1.6rem;}
.nav-logo img{height:52px; transition:height .38s cubic-bezier(.4,0,.2,1);}
nav.scrolled .nav-logo img{height:40px;}
.nav-mid a{font-size:1rem;}
.nav-right .btn-gold{white-space:nowrap;}
/* scroll normal : plus de hero collant recouvert — le contenu mord juste ses coins arrondis sur le hero */
.herowrap{margin-top:0; position:relative;}
.page-rest{margin-top:0; border-radius:0; box-shadow:none;}
@media (min-width:901px){
  .nav-mid{gap:2.6rem; transition:gap .38s cubic-bezier(.4,0,.2,1);}
  nav.scrolled .nav-mid{gap:2rem;}
}
@media (max-width:900px){
  .nav-mid{top:calc(100% + 10px); border-radius:20px; border:1px solid var(--line); overflow:hidden;}
}
@media (max-width:560px){
  nav{width:100%;}
  nav.scrolled{top:10px; width:calc(100% - 20px);}
  .nav-in{height:62px; padding:0 1.3rem;}
  nav.scrolled .nav-in{height:54px; padding:0 0.5rem 0 1rem;}
  .nav-logo .lg-mark{height:38px;}
  nav.scrolled .nav-logo .lg-mark{height:34px;}
  .hero{padding-top:calc(64px + 1.1rem);}
}

/* ===== jonction hero → services : ombre adoucie, pastille </> flottante, constellation or ===== */
.seam-chip{
  position:absolute; top:-24px; left:50%;
  width:48px; height:48px; border-radius:50%; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(200,146,42,0.45);
  box-shadow:0 10px 24px -8px rgba(14,23,38,0.20);
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.92rem; color:var(--gold);
  animation:seam-bob 2.6s ease-in-out infinite;
}
@keyframes seam-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
.seam-net{position:absolute; top:0; left:0; right:0; height:110px; overflow:hidden; pointer-events:none;}
.seam-net svg{width:100%; height:100%; display:block;}
.seam-net line{stroke:var(--goldb); stroke-opacity:.20; stroke-width:1;}
.seam-net circle{fill:var(--goldb); animation:seam-tw 3.4s ease-in-out infinite;}
.seam-net circle:nth-of-type(2n){animation-delay:1.2s}
.seam-net circle:nth-of-type(3n){animation-delay:2.1s}
@keyframes seam-tw{0%,100%{opacity:.18}50%{opacity:.6}}
@media (prefers-reduced-motion: reduce){.seam-chip,.seam-net circle{animation:none}}

/* ==== bloc <style id="services-v2"> — extrait de index.html ==== */
/* ===== SERVICES v4 — rangée de 5 vitrines produit, clair premium (2026-09-02) ===== */
#services .s-pill{display:inline-flex; align-items:center; padding:.42rem 1.1rem; border:1px solid rgba(200,146,42,.45); border-radius:999px; background:#fff; color:var(--gold); font-family:'Space Grotesk'; font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.2rem;}
#services .s-head{margin-bottom:2.8rem;}
.svgrid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.1rem;}
.scard{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; padding:.85rem .85rem 1.25rem; box-shadow:0 10px 30px -20px rgba(14,23,38,.16); transition:transform .3s cubic-bezier(.215,.61,.355,1), box-shadow .3s, border-color .3s;}
.scard:hover{transform:translateY(-6px); box-shadow:0 30px 55px -24px rgba(14,23,38,.30); border-color:#E8DCC2;}
.scard .sv{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1/1; background:linear-gradient(150deg, var(--sva,#FFF3D9), var(--svb,#F0F3F8));}
/* visuel plein : le rendu IA du service (files/service-XX.png) ; tant que le fichier
   n'existe pas, onerror masque l'img et le dégradé + mockup CSS restent visibles */
.scard .sv .pleine{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .9s cubic-bezier(.16,1,.30,1);}
.scard:hover .sv .pleine{transform:scale(1.05);}
.scard .sv .mock{position:absolute; left:8%; right:-16%; top:13%; bottom:-8%; background:#fff; border-radius:9px 9px 0 0; box-shadow:0 24px 44px -18px rgba(14,23,38,.35); overflow:hidden; transform:rotate(-2.5deg); transform-origin:bottom left; transition:transform .5s cubic-bezier(.215,.61,.355,1);}
.scard:hover .sv .mock{transform:rotate(-1deg) translateY(-5px);}
.scard .sv .mbar{display:flex; gap:4px; align-items:center; height:20px; padding:0 9px; background:#EDF1F7; border-bottom:1px solid #E4E9F0;}
.scard .sv .mbar i{width:5.5px; height:5.5px; border-radius:50%; background:#CBD4E1;}
.scard .sv .mbar i:first-child{background:var(--goldb);}
.scard .sv .mock img{display:block; width:100%; height:calc(100% - 20px); object-fit:cover; object-position:top;}
.scard .sn{font-family:'Space Grotesk'; font-weight:600; font-size:.82rem; color:var(--gold); margin:1.05rem 0 .25rem; padding:0 .4rem;}
.scard .st{font-family:'Space Grotesk'; font-weight:700; font-size:1rem; letter-spacing:.05em; text-transform:uppercase; line-height:1.25; color:var(--ink); padding:0 .4rem;}
.scard .sd{font-size:.88rem; line-height:1.55; color:var(--ink2); margin:.5rem 0 1.05rem; padding:0 .4rem; flex:1;}
.scard .sa{display:inline-flex; padding:0 .4rem; color:var(--gold);}
.scard .sa svg{width:24px; height:24px; transition:transform .25s;}
.scard:hover .sa svg{transform:translateX(6px);}
.s-more{display:flex; justify-content:center; margin-top:2.5rem;}
.s-more a{display:inline-flex; align-items:center; gap:.9rem; font-family:'Space Grotesk'; font-weight:600; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); padding-bottom:.55rem; border-bottom:1.5px solid var(--goldb); transition:color .25s;}
.s-more a svg{width:22px; height:22px; color:var(--gold); transition:transform .25s;}
.s-more a:hover{color:var(--gold);}
.s-more a:hover svg{transform:translateX(6px);}
@media (max-width:1240px){ .svgrid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:900px){ .svgrid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .svgrid{grid-template-columns:minmax(0,1fr); gap:1rem;} .scard .sv{aspect-ratio:16/9;} }

/* ==== bloc <style id="real-v2"> — extrait de index.html ==== */
/* ===== RÉALISATIONS v2 — deux cartes browser compactes (2026-08-29) ===== */
/* arrivée « page déchirée » : le blanc se déchire et révèle le gris, ombre portée le long de la déchirure */
.real{border-top:0; position:relative; overflow:hidden; margin-top:-24px; padding-top:5rem;}
.real::after{content:""; position:absolute; top:-1px; left:0; right:0; height:38px; pointer-events:none; z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,0 H1440 V20 L1418,14 L1396,26 L1371,10 L1349,23 L1326,15 L1302,28 L1278,20 L1255,9 L1232,24 L1207,12 L1185,30 L1160,17 L1138,26 L1113,8 L1090,22 L1067,14 L1045,27 L1020,10 L998,25 L973,16 L951,31 L928,20 L904,9 L881,24 L858,15 L836,28 L812,13 L789,23 L761,10 L745,17 L722,29 L699,14 L676,26 L652,8 L629,22 L607,11 L584,31 L561,16 L543,27 L518,12 L497,24 L470,9 L454,18 L431,30 L409,13 L386,26 L367,7 L341,22 L322,15 L300,28 L279,10 L255,24 L236,16 L214,32 L195,20 L168,8 L150,25 L131,14 L104,30 L88,18 L63,9 L47,26 L28,12 L0,22 Z'/%3E%3C/svg%3E") ;
  background-size:100% 100%;
  filter:drop-shadow(0 7px 7px rgba(14,23,38,0.14));}
.real::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle 1.6px at 8% 16%, rgba(236,184,69,.45) 98%, transparent),
    radial-gradient(circle 1.2px at 26% 78%, rgba(236,184,69,.32) 98%, transparent),
    radial-gradient(circle 1.8px at 44% 8%, rgba(236,184,69,.42) 98%, transparent),
    radial-gradient(circle 1.2px at 63% 88%, rgba(236,184,69,.30) 98%, transparent),
    radial-gradient(circle 1.6px at 81% 22%, rgba(236,184,69,.40) 98%, transparent),
    radial-gradient(circle 1.2px at 93% 64%, rgba(236,184,69,.34) 98%, transparent),
    radial-gradient(circle 1.4px at 15% 48%, rgba(236,184,69,.30) 98%, transparent),
    radial-gradient(circle 1.4px at 72% 52%, rgba(236,184,69,.28) 98%, transparent);
  animation:realTw 9s ease-in-out infinite alternate;}
@keyframes realTw{from{opacity:.35}to{opacity:.75}}
.real .wrap{position:relative; z-index:1;}
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem;}

@keyframes pcardIn{from{opacity:0; transform:translateY(30px) rotate(-1.4deg)}}
.pcard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  box-shadow:0 14px 34px -20px rgba(14,23,38,0.18);
  transition:transform .3s, box-shadow .35s, border-color .3s;}
.pcard:hover{transform:translateY(-8px); box-shadow:0 34px 64px -24px rgba(14,23,38,0.35); border-color:rgba(236,184,69,0.55);}
.pshot{position:relative; overflow:hidden;}
.pbar{display:flex; align-items:center; gap:5px; padding:9px 12px; background:var(--navy);}
.pbar i{width:7px; height:7px; border-radius:50%;}
.pbar i:nth-child(1){background:#ff5f57;} .pbar i:nth-child(2){background:#febc2e;} .pbar i:nth-child(3){background:#28c840;}
.pbar .purl{margin-left:8px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:#9fb3c8;}
.plive{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:500; color:#7ee2a1;}
.plive i{width:6px; height:6px; border-radius:50%; background:#34d17b; animation:livePulse 2.2s infinite;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(52,209,123,.45)}70%{box-shadow:0 0 0 7px rgba(52,209,123,0)}100%{box-shadow:0 0 0 0 rgba(52,209,123,0)}}
.pimg{aspect-ratio:16/9; background-size:cover; background-position:top center; transition:transform .8s cubic-bezier(.2,.6,.2,1), background-position .8s cubic-bezier(.2,.6,.2,1);}
.pcard:hover .pimg{transform:scale(1.06); background-position:center 35%;}
.pbody{padding:1.5rem 1.6rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; flex:1;}
.psec{font-size:.85rem; color:var(--ink2);}
.pbody h3{font-size:1.35rem; font-weight:700; letter-spacing:-0.01em; color:var(--ink); margin:0;}
.pwho{display:flex; gap:.75rem; align-items:flex-start; margin-top:.25rem; flex:1;}
.pav{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--goldb),var(--gold)); color:var(--navy);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.76rem;}
.pquote{color:var(--ink2); font-size:.93rem; line-height:1.5; font-style:italic; margin:0;}
.pcite{display:block; font-size:.78rem; color:var(--ink2); opacity:.75; margin-top:.3rem;}
@media (prefers-reduced-motion: reduce){
  .real::before,.plive i{animation:none;}

}
.pgo{display:inline-flex; align-items:center; gap:.5rem; margin-top:.5rem; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.93rem; color:var(--ink); transition:color .25s;}
.pgo .u{border-bottom:2px solid var(--goldb); padding-bottom:2px;}
.pgo svg{color:var(--gold); transition:transform .25s;}
.pcard:hover .pgo{color:var(--gold);}
.pcard:hover .pgo svg{transform:translateX(4px);}
@media (max-width:900px){
  .pgrid{grid-template-columns:minmax(0,1fr); gap:1.4rem;}
}

/* ==== bloc <style id="method-v2"> — extrait de index.html ==== */
/* ===== MÉTHODE v4 — sombre compact, cartes images en rangée libre, tilt souris (2026-08-29) ===== */
.method{background:linear-gradient(168deg,#0E1726 0%, #101d33 55%, #0E1726 100%); padding:5rem 0 5.2rem; overflow-x:clip; overflow-y:visible;}
.method .m-head{text-align:center; margin-bottom:2.6rem;}
.method h2{color:#fff;}
.method h2 em{color:var(--goldb); font-style:normal;}
.m-lead{margin:.9rem auto 0; max-width:54ch; color:#9aa6bd; font-size:1rem; line-height:1.6;}

@keyframes mcardIn{from{opacity:0; transform:translateX(60px)}}

/* ==== bloc <style id="process-v3"> — extrait de index.html ==== */
/* ===== MÉTHODE v5 — scène 3D interactive à gauche, accordéon à droite (import Claude Design 2026-08-31) ===== */
.method h2{font-size:2.5rem; font-weight:700; line-height:1.1; letter-spacing:-0.02em;}
.method .m-lead{font-size:1.05rem;}
/* --- bords déchirés : le fond sombre est découpé irrégulièrement en haut et en bas --- */
.method{
  clip-path:polygon(
    0 26px, 5% 12px, 11% 24px, 18% 6px, 26% 22px, 33% 14px, 41% 27px, 49% 9px,
    57% 21px, 64% 5px, 72% 25px, 79% 13px, 86% 23px, 93% 8px, 100% 18px,
    100% calc(100% - 22px), 95% calc(100% - 8px), 88% calc(100% - 24px), 81% calc(100% - 11px),
    73% calc(100% - 26px), 66% calc(100% - 6px), 58% calc(100% - 20px), 50% calc(100% - 10px),
    42% calc(100% - 25px), 35% calc(100% - 12px), 27% calc(100% - 23px), 19% calc(100% - 7px),
    12% calc(100% - 21px), 6% calc(100% - 13px), 0 calc(100% - 25px));
  padding-top:6.2rem; padding-bottom:6.4rem;
}
.method .m-halo{position:absolute; right:0; top:80px; width:760px; height:520px; background:radial-gradient(closest-side, rgba(236,184,69,0.12), transparent 70%); pointer-events:none;}
/* --- déchirures génériques entre sections : bande dont le bas (--tb) est découpé sur le haut (--ta) --- */
.tear{position:relative; height:30px; background:var(--ta,#fff); z-index:1; pointer-events:none;}
.tear::after{content:""; position:absolute; inset:0; background:var(--tb,#fff);
  clip-path:polygon(0 22px, 5% 10px, 12% 24px, 19% 6px, 27% 20px, 34% 12px, 42% 25px, 50% 8px,
    58% 19px, 65% 5px, 73% 23px, 80% 11px, 88% 21px, 94% 7px, 100% 16px, 100% 100%, 0 100%);}
.front,.faq{border-top:0; border-bottom:0;}
.pv3-grid{position:relative; display:flex; flex-wrap:wrap; gap:2.5rem; align-items:center; max-width:1180px; margin:2.4rem auto 0; padding:0 2rem;}
/* --- accordéon (gauche) — DOM garde la scène en premier, l'ordre visuel est inversé ici --- */
.pv3-acc{flex:1 1 340px; max-width:430px; margin:0 auto; display:flex; flex-direction:column; gap:0.65rem; order:1;}
.pv3-scene{order:2;}
.pv3-item{position:relative; border-radius:16px; border:1px solid rgba(255,255,255,0.10);
  background-size:cover; background-position:center;
  transition:border-color .35s, box-shadow .35s; cursor:pointer; overflow:hidden;
  box-shadow:0 12px 28px -18px rgba(0,0,0,0.55);}
.pv3-item .pv3-head{display:flex; align-items:center; gap:0.9rem; padding:0.95rem 1.15rem;}
.pv3-item .pv3-bar{width:6px; height:26px; border-radius:3px; background:rgba(255,255,255,0.22); transition:background .35s; flex:0 0 auto;}
.pv3-item b{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.02rem; color:#fff; transition:color .35s; flex:1; letter-spacing:-0.01em;}
.pv3-item .pv3-chev{transition:transform .35s, opacity .35s; transform:translateX(-6px); opacity:0; flex:0 0 auto;}
.pv3-item .pv3-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.19,1,.22,1);}
.pv3-item .pv3-body>div{overflow:hidden;}
.pv3-item .pv3-body p{margin:0; padding:0 3rem 1.05rem 2.5rem; color:#c6cedd; font-size:0.88rem; line-height:1.6; max-width:40ch;}
.pv3-item.on{border-color:rgba(236,184,69,0.6); box-shadow:0 22px 44px -20px rgba(0,0,0,0.75), 0 0 34px -16px rgba(236,184,69,0.45);}
.pv3-item.on .pv3-bar{background:#ECB845;}
.pv3-item.on b{color:#ECB845;}
.pv3-item.on .pv3-chev{transform:translateX(0); opacity:1;}
.pv3-item.on .pv3-body{grid-template-rows:1fr;}
.pv3-cta{margin-top:0.9rem;}
.pv3-cta .note{margin:0.8rem 0 0; font-size:0.84rem; color:#9aa6bd;}
/* --- scène 3D (gauche) --- */
.pv3-scene{flex:1 1 520px; position:relative; height:490px; perspective:1300px; perspective-origin:50% 42%; min-width:0;}
.pv3-fit{position:absolute; inset:0; transform:scale(var(--fit,.84)); transform-origin:58% 45%;}
.pv3-3d{position:absolute; left:50%; top:50%; width:620px; height:400px; margin:-200px 0 0 -310px; transform-style:preserve-3d; transform:rotateX(9deg) rotateY(-11deg); will-change:transform;}
.pv3-win{position:absolute; inset:0; border-radius:18px; background:linear-gradient(180deg,#131f36,#0e1830); border:1px solid rgba(236,184,69,0.28);
  box-shadow:0 60px 120px -40px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 80px -30px rgba(236,184,69,0.3);}
.pv3-bar-top{display:flex; align-items:center; gap:0.5rem; height:44px; padding:0 1.1rem; border-bottom:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03);}
.pv3-bar-top i{width:10px; height:10px; border-radius:50%;}
.pv3-url{margin-left:0.8rem; font-size:0.72rem; color:#9aa6bd; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:7px; padding:0.25rem 0.9rem; letter-spacing:0.02em; white-space:nowrap;}
.pv3-live{margin-left:auto; display:inline-flex; align-items:center; gap:0.4rem; font-size:0.68rem; font-weight:600; color:#7ee2a0; opacity:0; transition:opacity .45s;}
.pv3-live i{width:7px; height:7px; border-radius:50%; background:#7ee2a0; animation:pv2blink 2.2s ease-in-out infinite;}
.pv3-pane{position:absolute; left:0; right:0; top:44px; bottom:0; opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease; box-sizing:border-box; pointer-events:none;}
.pv3-pane.on{opacity:1; transform:translateY(0);}
.pv3-sat{position:absolute; border-radius:13px; box-shadow:0 24px 50px -20px rgba(0,0,0,0.8); opacity:0; transition:opacity .45s;}
.pv3-sat.on,.pv3-live.on{opacity:1;}
.pv3-kicker{font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#ECB845;}
.pv3-check{display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:rgba(236,184,69,0.15); border:1px solid rgba(236,184,69,0.5); color:#ECB845; flex:0 0 auto;}
@keyframes pv2blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes pv2floatz{0%,100%{transform:translateZ(var(--z,60px)) translateY(0)}50%{transform:translateZ(var(--z,60px)) translateY(-9px)}}
@media (max-width:1024px){
  .pv3-scene{height:430px;}
  .pv3-acc{max-width:520px;}
}
@media (max-width:768px){
  .pv3-fit{--fit:.62;}
  .pv3-scene{height:340px;}
}
@media (prefers-reduced-motion: reduce){
  .pv3-sat,.pv3-live i{animation:none!important;}
  .pv3-3d{transform:rotateX(9deg) rotateY(-11deg)!important;}
}