:root{
      --bg:#0b1220;
      --bg-2:#111827;
      --card:rgba(255,255,255,.08);
      --card-border:rgba(255,255,255,.12);
      --muted:#c7cfdb;
      --text:#f9fafb;
      --accent:#fbbf24;
      --accent-2:#f59e0b;
      --whatsapp:#22c55e;
      --whatsapp-2:#16a34a;
      --shadow:0 14px 40px rgba(0,0,0,.35);
      --radius:18px;
      --max:1180px;
      --section-solid:#182336;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      padding:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
      color:var(--text);
      background:linear-gradient(180deg, #182336 0%, #22324a 100%);
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    a{color:inherit;text-decoration:none}

    img{
      max-width:100%;
      image-rendering:auto;
      backface-visibility:hidden;
    }

    .container{
      max-width:var(--max);
      margin:0 auto;
      padding:0 24px;
    }

    header{
      position:sticky;
      top:0;
      z-index:30;
      background:rgba(8,14,28,.56);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav{
      min-height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }

    .logo{
      height:52px;
      width:52px;
      display:block;
      object-fit:cover;
      object-position:center;
      border-radius:50%;
    }

    .links{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
    }

    .nav-link{
      color:#e8edf5;
      opacity:.92;
      font-size:15px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:48px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      color:var(--text);
      font-weight:600;
      position:relative;
      overflow:hidden;
      isolation:isolate;
      transform:translateZ(0);
      transition:
        transform .24s ease,
        border-color .24s ease,
        background .24s ease,
        box-shadow .24s ease,
        filter .24s ease;
    }

    .btn::before{
      content:"";
      position:absolute;
      inset:-2px;
      z-index:0;
      border-radius:inherit;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.34), transparent 26%),
        linear-gradient(120deg, transparent 18%, rgba(255,255,255,.30) 42%, transparent 64%);
      opacity:0;
      transform:translateX(-42%) skewX(-18deg);
      pointer-events:none;
      transition:opacity .24s ease, transform .55s ease;
    }

    .btn::after{
      content:"";
      position:absolute;
      inset:1px;
      z-index:1;
      border-radius:inherit;
      border:1px solid rgba(255,255,255,.0);
      pointer-events:none;
      transition:border-color .24s ease, box-shadow .24s ease;
    }

    .btn:hover{
      transform:translateY(-3px) scale(1.025);
      border-color:rgba(255,255,255,.24);
      background:rgba(255,255,255,.09);
      box-shadow:0 14px 34px rgba(0,0,0,.26), 0 0 22px rgba(251,191,36,.18);
    }

    .btn:hover::before{
      opacity:1;
      transform:translateX(42%) skewX(-18deg);
    }

    .btn:hover::after{
      border-color:rgba(255,255,255,.28);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
    }

    .btn:active{
      transform:translateY(-1px) scale(.99);
    }

    .btn:focus-visible{
      outline:3px solid rgba(251,191,36,.72);
      outline-offset:4px;
    }

    .btn.primary{
      background:linear-gradient(180deg,var(--accent),var(--accent-2));
      color:#111827;
      border:none;
      box-shadow:0 8px 24px rgba(245,158,11,.28);
    }

    .btn.primary:hover{
      filter:brightness(1.03);
      box-shadow:0 16px 38px rgba(245,158,11,.36), 0 0 28px rgba(251,191,36,.34);
    }

    .btn.whatsapp{
      background:linear-gradient(180deg,var(--whatsapp),var(--whatsapp-2));
      color:#fff;
      border:none;
      box-shadow:0 8px 24px rgba(22,163,74,.25);
    }

    .btn.whatsapp:hover{
      filter:brightness(1.04);
      box-shadow:0 16px 38px rgba(22,163,74,.34), 0 0 28px rgba(34,197,94,.30);
    }

    @media (prefers-reduced-motion: reduce){
      .btn,
      .btn::before,
      .btn::after{
        transition:none;
      }
    }

    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(90deg, rgba(8,14,28,.74) 0%, rgba(8,14,28,.58) 38%, rgba(8,14,28,.28) 72%, rgba(8,14,28,.14) 100%),
        linear-gradient(180deg, rgba(8,14,28,.10) 0%, rgba(8,14,28,.45) 100%),
        url("hero.jpg");
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      background-color:var(--section-solid);
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent 70%, rgba(20,31,48,.72) 100%);
      pointer-events:none;
    }

    .hero-inner{
      position:relative;
      z-index:1;
      width:100%;
      padding:70px 0 60px;
    }

    .hero-copy{
      max-width:1040px;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-bottom:18px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:#eef2f7;
      font-size:14px;
      font-weight:600;
    }

    h1{
      margin:0 0 16px;
      font-size:clamp(40px, 6vw, 72px);
      line-height:1.02;
      letter-spacing:0;
      font-weight:900;
      max-width:760px;
    }

    .accent{
      color:var(--accent);
    }

    .hero p{
      margin:0;
      max-width:660px;
      font-size:18px;
      line-height:1.65;
      color:#e5ebf5;
    }

    .hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-top:26px;
    }

    .hero-note{
      margin-top:14px;
      color:#d7deea;
      font-size:15px;
      line-height:1.6;
      max-width:700px;
    }

    .human-touch{
      position:absolute;
      left:auto;
      right:clamp(18px, 2vw, 30px);
      top:-40px;
      z-index:2;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      max-width:100%;
      /* Plus de fond/bordure pilule autour : la photo se suffit à elle-même */
      background:transparent;
      border:none;
      box-shadow:none;
      padding:0;
      color:#eef2f7;
    }

    .human-touch img{
      width:188px;
      height:188px;
      border-radius:50%;
      object-fit:cover;
      border:6px solid rgba(255,255,255,.20);
      box-shadow:
        0 0 0 2px rgba(255,255,255,.06),
        0 0 0 10px rgba(255,255,255,.04),
        0 16px 38px rgba(0,0,0,.46),
        0 0 32px rgba(251,191,36,.12);
      flex:0 0 auto;
      transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    }

    .human-touch:hover img{
      transform:translateY(-2px);
      border-color:rgba(251,191,36,.48);
      box-shadow:
        0 0 0 2px rgba(251,191,36,.10),
        0 0 0 10px rgba(251,191,36,.05),
        0 18px 42px rgba(0,0,0,.48),
        0 0 38px rgba(251,191,36,.22);
    }

    .human-touch strong{
      display:inline-block;
      padding:6px 14px;
      border-radius:999px;
      background:rgba(8,14,28,.72);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(8px);
      font-size:12.5px;
      font-weight:600;
      line-height:1.2;
      color:#fff;
      letter-spacing:.04em;
      white-space:nowrap;
      text-align:center;
      box-shadow:0 4px 14px rgba(0,0,0,.32);
    }

    .hero-kpis{
      display:grid;
      grid-template-columns:repeat(4, minmax(140px,1fr));
      gap:14px;
      margin-top:34px;
      max-width:1040px;
    }

    .kpi{
      padding:18px 18px;
      border-radius:16px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      backdrop-filter:blur(6px);
      box-shadow:var(--shadow);
    }

    .kpi,
    .tile,
    .tracking-panel,
    .deliverable,
    details,
    .tracking-list li,
    .option-list li,
    .step,
    .contact-card,
    .formule{
      position:relative;
      isolation:isolate;
    }

    .kpi > *,
    .tile > *,
    .tracking-panel > *,
    .deliverable > *,
    details > *,
    .step > *,
    .contact-card > *,
    .formule > *{
      position:relative;
      z-index:2;
    }

    .kpi::before,
    .tile::before,
    .tracking-panel::before,
    .deliverable::before,
    details::before,
    .tracking-list li::before,
    .option-list li::before,
    .step::before,
    .contact-card::before,
    .formule::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:3;
      padding:3px;
      border-radius:inherit;
      --sweep-long-start:232px;
      --sweep-cross-start:86px;
      --sweep-head-far-start:195px;
      --sweep-head-near-start:37px;
      --sweep-cross-half-start:43px;
      --sweep-long-slim:132px;
      --sweep-cross-slim:30px;
      --sweep-head-far-slim:111px;
      --sweep-head-near-slim:21px;
      --sweep-cross-half-slim:15px;
      --trace-opacity:.82;
      /* Comète : tête brillante concentrée + traînée qui s'amincit en 2 couches */
      --comet-right:
        radial-gradient(ellipse 26% 78% at 94% 50%, rgba(255,255,255,1) 0%, rgba(252,253,255,.96) 18%, rgba(205,228,255,.62) 38%, rgba(205,228,255,0) 64%),
        radial-gradient(ellipse 52% 40% at 74% 50%, rgba(225,242,255,.48) 0%, rgba(205,228,255,.22) 50%, rgba(205,228,255,0) 88%),
        radial-gradient(ellipse 110% 16% at 38% 50%, rgba(200,225,255,.26) 0%, rgba(190,220,255,.10) 50%, rgba(190,220,255,0) 92%);
      --comet-down:
        radial-gradient(ellipse 78% 26% at 50% 94%, rgba(255,255,255,1) 0%, rgba(252,253,255,.96) 18%, rgba(205,228,255,.62) 38%, rgba(205,228,255,0) 64%),
        radial-gradient(ellipse 40% 52% at 50% 74%, rgba(225,242,255,.48) 0%, rgba(205,228,255,.22) 50%, rgba(205,228,255,0) 88%),
        radial-gradient(ellipse 16% 110% at 50% 38%, rgba(200,225,255,.26) 0%, rgba(190,220,255,.10) 50%, rgba(190,220,255,0) 92%);
      --comet-left:
        radial-gradient(ellipse 26% 78% at 6% 50%, rgba(255,255,255,1) 0%, rgba(252,253,255,.96) 18%, rgba(205,228,255,.62) 38%, rgba(205,228,255,0) 64%),
        radial-gradient(ellipse 52% 40% at 26% 50%, rgba(225,242,255,.48) 0%, rgba(205,228,255,.22) 50%, rgba(205,228,255,0) 88%),
        radial-gradient(ellipse 110% 16% at 62% 50%, rgba(200,225,255,.26) 0%, rgba(190,220,255,.10) 50%, rgba(190,220,255,0) 92%);
      --comet-up:
        radial-gradient(ellipse 78% 26% at 50% 6%, rgba(255,255,255,1) 0%, rgba(252,253,255,.96) 18%, rgba(205,228,255,.62) 38%, rgba(205,228,255,0) 64%),
        radial-gradient(ellipse 40% 52% at 50% 26%, rgba(225,242,255,.48) 0%, rgba(205,228,255,.22) 50%, rgba(205,228,255,0) 88%),
        radial-gradient(ellipse 16% 110% at 50% 62%, rgba(200,225,255,.26) 0%, rgba(190,220,255,.10) 50%, rgba(190,220,255,0) 92%);
      background:var(--comet-right);
      background-repeat:no-repeat;
      background-size:var(--sweep-long-start) var(--sweep-cross-start);
      background-position:
        calc(0% - var(--sweep-head-far-start))
        calc(0% - var(--sweep-cross-half-start));
      opacity:0;
      filter:drop-shadow(0 0 16px rgba(255,255,255,.55)) drop-shadow(0 0 26px rgba(186,222,255,.32));
      will-change:background-position, opacity;
      pointer-events:none;
      animation:premium-border-trace 10s linear infinite;
      animation-delay:var(--sweep-delay, 0s);
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      mask-composite:exclude;
    }

    .kpi::after,
    .tile::after,
    .tracking-panel::after,
    .deliverable::after,
    details::after,
    .step::after,
    .contact-card::after,
    .formule::after{
      content:"";
      position:absolute;
      inset:-16px;
      z-index:0;
      border-radius:inherit;
      --sweep-long-start:302px;
      --sweep-cross-start:158px;
      --sweep-head-far-start:254px;
      --sweep-head-near-start:48px;
      --sweep-cross-half-start:79px;
      --sweep-long-slim:160px;
      --sweep-cross-slim:56px;
      --sweep-head-far-slim:134px;
      --sweep-head-near-slim:26px;
      --sweep-cross-half-slim:28px;
      --trace-opacity:.30;
      /* Glow halo de la comète : version plus floue (filter:blur appliqué après) */
      --comet-right:
        radial-gradient(ellipse 32% 86% at 92% 50%, rgba(255,255,255,.78) 0%, rgba(220,238,255,.46) 26%, rgba(190,222,255,.16) 56%, rgba(190,222,255,0) 80%),
        radial-gradient(ellipse 120% 38% at 38% 50%, rgba(210,232,255,.32) 0%, rgba(190,222,255,.12) 46%, rgba(190,222,255,0) 86%);
      --comet-down:
        radial-gradient(ellipse 86% 32% at 50% 92%, rgba(255,255,255,.78) 0%, rgba(220,238,255,.46) 26%, rgba(190,222,255,.16) 56%, rgba(190,222,255,0) 80%),
        radial-gradient(ellipse 38% 120% at 50% 38%, rgba(210,232,255,.32) 0%, rgba(190,222,255,.12) 46%, rgba(190,222,255,0) 86%);
      --comet-left:
        radial-gradient(ellipse 32% 86% at 8% 50%, rgba(255,255,255,.78) 0%, rgba(220,238,255,.46) 26%, rgba(190,222,255,.16) 56%, rgba(190,222,255,0) 80%),
        radial-gradient(ellipse 120% 38% at 62% 50%, rgba(210,232,255,.32) 0%, rgba(190,222,255,.12) 46%, rgba(190,222,255,0) 86%);
      --comet-up:
        radial-gradient(ellipse 86% 32% at 50% 8%, rgba(255,255,255,.78) 0%, rgba(220,238,255,.46) 26%, rgba(190,222,255,.16) 56%, rgba(190,222,255,0) 80%),
        radial-gradient(ellipse 38% 120% at 50% 62%, rgba(210,232,255,.32) 0%, rgba(190,222,255,.12) 46%, rgba(190,222,255,0) 86%);
      background:var(--comet-right);
      background-repeat:no-repeat;
      background-size:var(--sweep-long-start) var(--sweep-cross-start);
      background-position:
        calc(0% - var(--sweep-head-far-start))
        calc(0% - var(--sweep-cross-half-start));
      opacity:0;
      filter:blur(12px);
      mix-blend-mode:screen;
      pointer-events:none;
      will-change:background-position, opacity;
      animation:premium-border-trace 10s linear infinite;
      animation-delay:var(--sweep-delay, 0s);
    }

    .hero-kpis > :nth-child(2),
    .grid > :nth-child(2),
    .audience-grid > :nth-child(2),
    .process > :nth-child(2),
    .deliverables-grid > :nth-child(2),
    .tracking-list > :nth-child(2),
    .option-list > :nth-child(2),
    .faq-list > :nth-child(2),
    .formules-grid > :nth-child(2){
      --sweep-delay:.08s;
    }

    .hero-kpis > :nth-child(3),
    .grid > :nth-child(3),
    .audience-grid > :nth-child(3),
    .process > :nth-child(3),
    .deliverables-grid > :nth-child(3),
    .tracking-list > :nth-child(3),
    .option-list > :nth-child(3),
    .faq-list > :nth-child(3),
    .formules-grid > :nth-child(3){
      --sweep-delay:.16s;
    }

    .hero-kpis > :nth-child(4),
    .grid > :nth-child(4),
    .audience-grid > :nth-child(4),
    .process > :nth-child(4),
    .deliverables-grid > :nth-child(4),
    .tracking-list > :nth-child(4),
    .option-list > :nth-child(4),
    .faq-list > :nth-child(4){
      --sweep-delay:.24s;
    }

    .grid > :nth-child(5),
    .process > :nth-child(5),
    .tracking-list > :nth-child(5),
    .option-list > :nth-child(5),
    .faq-list > :nth-child(5){
      --sweep-delay:.32s;
    }

    .grid > :nth-child(6),
    .tracking-list > :nth-child(6){
      --sweep-delay:.40s;
    }

    @keyframes premium-border-trace{
      0%{
        opacity:0;
        background:var(--comet-right);
        background-repeat:no-repeat;
        background-size:var(--sweep-long-start) var(--sweep-cross-start);
        background-position:
          calc(0% - var(--sweep-head-far-start))
          calc(0% - var(--sweep-cross-half-start));
      }
      3%{
        opacity:var(--trace-opacity);
        background-size:var(--sweep-long-start) var(--sweep-cross-start);
        background-position:
          calc(0% - var(--sweep-head-far-start))
          calc(0% - var(--sweep-cross-half-start));
      }
      5.2%{
        opacity:var(--trace-opacity);
        background-size:var(--sweep-long-slim) var(--sweep-cross-slim);
        background-position:
          calc(44% - var(--sweep-head-far-slim))
          calc(0% - var(--sweep-cross-half-slim));
      }
      7.5%{
        background:var(--comet-right);
        background-repeat:no-repeat;
        background-size:var(--sweep-long-slim) var(--sweep-cross-slim);
        background-position:
          calc(100% + var(--sweep-head-near-slim))
          calc(0% - var(--sweep-cross-half-slim));
      }
      7.51%{
        background:var(--comet-down);
        background-repeat:no-repeat;
        background-size:var(--sweep-cross-slim) var(--sweep-long-slim);
        background-position:
          calc(100% + var(--sweep-cross-half-slim))
          calc(0% - var(--sweep-head-far-slim));
      }
      14%{
        background-size:var(--sweep-cross-slim) var(--sweep-long-slim);
        background-position:
          calc(100% + var(--sweep-cross-half-slim))
          calc(100% + var(--sweep-head-near-slim));
      }
      14.01%{
        background:var(--comet-left);
        background-repeat:no-repeat;
        background-size:var(--sweep-long-slim) var(--sweep-cross-slim);
        background-position:
          calc(100% + var(--sweep-head-far-slim))
          calc(100% + var(--sweep-cross-half-slim));
      }
      21%{
        background-size:var(--sweep-long-slim) var(--sweep-cross-slim);
        background-position:
          calc(0% - var(--sweep-head-near-slim))
          calc(100% + var(--sweep-cross-half-slim));
      }
      21.01%{
        background:var(--comet-up);
        background-repeat:no-repeat;
        background-size:var(--sweep-cross-slim) var(--sweep-long-slim);
        background-position:
          calc(0% - var(--sweep-cross-half-slim))
          calc(100% + var(--sweep-head-far-slim));
      }
      28%{
        opacity:var(--trace-opacity);
        background-size:var(--sweep-cross-slim) var(--sweep-long-slim);
        background-position:
          calc(0% - var(--sweep-cross-half-slim))
          calc(0% - var(--sweep-head-near-slim));
      }
      32%,
      100%{
        opacity:0;
        background-position:
          calc(0% - var(--sweep-cross-half-slim))
          calc(0% - var(--sweep-head-near-slim));
      }
    }

    @media (prefers-reduced-motion: reduce){
      .kpi::before,
      .tile::before,
      .tracking-panel::before,
      .deliverable::before,
      details::before,
      .tracking-list li::before,
      .option-list li::before,
      .step::before,
      .contact-card::before,
      .formule::before,
      .kpi::after,
      .tile::after,
      .tracking-panel::after,
      .deliverable::after,
      details::after,
      .step::after,
      .contact-card::after,
      .formule::after{
        transition:none;
        animation:none;
      }
    }

    .kpi strong{
      display:block;
      font-size:clamp(22px, 2vw, 26px);
      line-height:1.12;
      margin-bottom:8px;
      color:#fff;
      overflow-wrap:normal;
    }

    .kpi span{
      display:block;
      color:#d7deea;
      font-size:14px;
      line-height:1.45;
    }

    section{
      padding:56px 0;
    }

    main > section:not(.hero){
      position:relative;
      isolation:isolate;
      overflow:hidden;
      margin-top:-1px;
      background:transparent;
      --section-bg:var(--section-solid);
    }

    main > section:not(.hero)::before{
      content:"";
      position:absolute;
      inset:-90px 0;
      z-index:-2;
      background-color:var(--section-solid);
      background:
        linear-gradient(180deg, rgba(18,30,48,.62), rgba(18,30,48,.72)),
        var(--section-bg);
      background-color:var(--section-solid);
      background-size:auto, cover;
      background-position:center, center;
      background-repeat:no-repeat;
      background-attachment:fixed;
    }

    main > section:not(.hero)::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(24,35,54,.58) 0%, rgba(24,35,54,.12) 18%, rgba(24,35,54,.12) 78%, rgba(24,35,54,.58) 100%);
    }

    /* Backgrounds des sections par ID (robuste à l'ajout/retrait de sections) */
    #formules  { --section-bg:url("services.jpg"); }
    #audiences { --section-bg:url("audiences.jpg"); }
    #process   { --section-bg:url("process.jpg"); }
    #tracking  { --section-bg:url("tracking.jpg"); }
    #example   { --section-bg:url("ChatGPT Image 30 avr. 2026, 14_48_03 (3).png"); }
    #options   { --section-bg:url("options.jpg"); }
    #faq       { --section-bg:url("faq.jpg"); }
    #contact   { --section-bg:url("contact.jpg"); }
    /* La section #trust n'a pas de --section-bg : elle utilise le solid (.trust-band a son propre style) */

    .section-head{
      max-width:780px;
      margin-bottom:24px;
    }

    /* Eyebrow au-dessus des H2 — donne du rythme et identifie chaque section */
    .section-eyebrow{
      display:inline-block;
      margin:0 0 10px;
      padding:5px 12px;
      border-radius:999px;
      background:rgba(251,191,36,.10);
      border:1px solid rgba(251,191,36,.26);
      color:var(--accent);
      font-size:11.5px;
      font-weight:700;
      letter-spacing:.18em;
      text-transform:uppercase;
    }

    h2{
      margin:0 0 12px;
      font-size:clamp(28px,4vw,42px);
      line-height:1.1;
      letter-spacing:0;
    }

    .section-head p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:17px;
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:14px;
    }

    .audience-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
    }

    .tile{
      padding:20px;
      border-radius:var(--radius);
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
    }

    .tile h3{
      margin:0 0 8px;
      font-size:18px;
      line-height:1.25;
    }

    .tile p{
      margin:0;
      color:var(--muted);
      line-height:1.55;
      font-size:14.5px;
    }

    .tracking-panel{
      padding:22px;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.1);
      box-shadow:var(--shadow);
    }

    .deliverables-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:12px;
    }

    .deliverable{
      min-height:0;
      padding:0;
      border-radius:16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.1);
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .deliverable img{
      display:block;
      width:100%;
      height:clamp(178px, 18vw, 228px);
      object-fit:contain;
      background:#f8fafc;
      border-bottom:1px solid rgba(255,255,255,.12);
      transform:translateZ(0);
    }

    .deliverable div{
      flex:1;
      padding:18px;
      background:linear-gradient(180deg, rgba(15,25,42,.72), rgba(15,25,42,.50));
      backdrop-filter:blur(8px);
    }

    .deliverable h3{
      margin:0 0 4px;
      font-size:17px;
      line-height:1.25;
    }

    .deliverable p{
      margin:0;
      color:var(--muted);
      line-height:1.55;
      font-size:14px;
    }

    .faq-list{
      display:grid;
      gap:12px;
    }

    details{
      border-radius:16px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    summary{
      cursor:pointer;
      padding:18px 56px 18px 20px;
      font-weight:700;
      line-height:1.35;
      position:relative;
      list-style:none;
    }

    summary::-webkit-details-marker{display:none}

    summary::after{
      content:"";
      position:absolute;
      right:20px;
      top:50%;
      width:18px;
      height:18px;
      transform:translateY(-50%);
      background:
        linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
      color:var(--accent);
      transition:transform .25s ease, color .25s ease;
    }

    details[open] summary::after{
      transform:translateY(-50%) rotate(45deg);
      color:#f9fafb;
    }

    summary:hover::after{
      color:#fff;
    }

    @media (prefers-reduced-motion: reduce){
      summary::after{transition:none}
    }

    details p{
      margin:0;
      padding:0 20px 18px;
      color:var(--muted);
      line-height:1.65;
      font-size:15px;
    }

    .tracking-list,
    .option-list{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:20px 0 0;
      padding:0;
      list-style:none;
    }

    .tracking-list li,
    .option-list li{
      display:inline-flex;
      align-items:center;
      padding:10px 18px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      color:#eef2f7;
      line-height:1.4;
      font-size:14.5px;
      white-space:normal;
      transition:background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .tracking-list li:hover,
    .option-list li:hover{
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.22);
      transform:translateY(-1px);
    }

    /* Désactiver l'animation comet sur les pills (trop petites) */
    .tracking-list li::before,
    .option-list li::before,
    .tracking-list li::after,
    .option-list li::after{
      display:none;
    }

    .tracking-panel p{
      margin:18px 0 0;
      color:var(--muted);
      line-height:1.7;
      font-size:15px;
    }

    .process{
      display:grid;
      grid-template-columns:repeat(5, minmax(0,1fr));
      gap:12px;
    }

    .step{
      padding:18px 16px;
      border-radius:16px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
    }

    .step-num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:30px;
      height:30px;
      border-radius:999px;
      background:linear-gradient(180deg,var(--accent),var(--accent-2));
      color:#111827;
      font-weight:800;
      margin-bottom:10px;
      font-size:14px;
    }

    .step h3{
      margin:0 0 8px;
      font-size:18px;
    }

    .step p{
      margin:0;
      color:var(--muted);
      line-height:1.6;
      font-size:15px;
    }

    .contact-card{
      padding:28px;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.1);
      box-shadow:var(--shadow);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:24px;
      flex-wrap:wrap;
    }

    .contact-card p{
      margin:0;
      color:#e8edf5;
      line-height:1.75;
      font-size:15px;
    }

    .contact-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    footer{
      padding:28px 24px 40px;
      color:#9eabc0;
      text-align:center;
      border-top:1px solid rgba(255,255,255,.08);
    }

    .footer-links{
      display:flex;
      justify-content:center;
      gap:18px;
      flex-wrap:wrap;
      margin-top:12px;
      font-size:14px;
    }

    .footer-links a{
      color:#d7deea;
      text-decoration:underline;
      text-underline-offset:4px;
    }

    .floating-whatsapp{
      position:fixed;
      right:22px;
      bottom:22px;
      z-index:40;
      min-height:52px;
      padding:0 20px;
    }

    @media (max-width: 1024px){
      .hero-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
      .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .deliverables-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .process{grid-template-columns:repeat(2,minmax(0,1fr))}
      .tracking-list,
      .option-list{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    @media (max-width: 720px){
      .container{
        width:100%;
        max-width:100%;
        padding:0 24px;
      }

      .nav{
        padding:12px 0;
        align-items:center;
        gap:12px;
      }

      .links{
        display:none;
      }

      .logo{
        height:44px;
        width:44px;
      }

      .btn{
        min-height:46px;
        padding:0 16px;
      }

      .hero{
        min-height:auto;
        background-position:center top;
      }

      main > section:not(.hero)::before{
        inset:-46px 0;
        background-attachment:scroll;
      }

      .hero-inner{
        display:flex;
        justify-content:center;
        padding:50px 0 52px;
      }

      .hero-copy,
      .section-head{
        width:100%;
        max-width:100%;
      }

      .hero-copy{
        max-width:300px;
        margin:0 auto;
        text-align:center;
      }

      .eyebrow{
        max-width:100%;
        justify-content:center;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
      }

      h1{
        max-width:100%;
        font-size:25px;
        line-height:1.1;
        overflow-wrap:break-word;
      }

      h2{
        max-width:100%;
        font-size:26px;
        overflow-wrap:break-word;
      }

      .hero p{
        font-size:15px;
        max-width:100%;
        margin:0 auto;
        overflow-wrap:break-word;
      }

      .hero-actions{
        flex-direction:column;
        gap:12px;
        max-width:260px;
        margin-left:auto;
        margin-right:auto;
      }

      .hero-actions .btn{
        width:100%;
        flex:0 0 auto;
        min-width:0;
        padding:0 16px;
        white-space:nowrap;
      text-align:center;
      }

      .hero-kpis,
      .grid,
      .audience-grid,
      .process,
      .deliverables-grid{
        grid-template-columns:1fr;
      }

      .tracking-list,
      .option-list{
        grid-template-columns:1fr;
      }

      .contact-card{
        padding:22px;
      }

      .contact-actions{
        justify-content:flex-start;
      }

      .floating-whatsapp{
        display:none;
      }
    }

    @media (max-width: 720px){
      main .hero{
        width:100%;
        justify-content:center;
        background-position:center top;
      }

      main .hero > .container.hero-inner{
        width:100vw;
        max-width:100vw;
        margin-left:calc(50% - 50vw);
        margin-right:calc(50% - 50vw);
        padding:46px 24px 48px;
        display:flex;
        justify-content:center;
      }

      main .hero .hero-copy{
        width:100%;
        max-width:min(300px, calc(100vw - 48px));
        margin:0 auto;
        text-align:center;
      }

      main .hero .eyebrow{
        width:fit-content;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        justify-content:center;
        white-space:normal;
      }

      main .hero h1{
        width:100%;
        max-width:min(300px, calc(100vw - 48px));
        margin-left:auto;
        margin-right:auto;
        font-size:clamp(23px, 6.4vw, 26px);
        line-height:1.12;
        text-align:center;
        text-wrap:balance;
        overflow-wrap:break-word;
      }

      main .hero p,
      main .hero .hero-note{
        max-width:min(300px, calc(100vw - 48px));
        margin-left:auto;
        margin-right:auto;
        text-align:center;
      }

      main .hero .hero-note{
        margin-top:16px;
      }

      main .hero .human-touch{
        position:static;
        margin:0 auto 14px;
        padding:0;
        text-align:center;
        gap:8px;
      }

      main .hero .human-touch img{
        width:104px;
        height:104px;
        border-width:3px;
      }

      main .hero .human-touch strong{
        font-size:11.5px;
        padding:5px 12px;
      }

      main .hero .hero-actions{
        width:min(100%, 232px);
        max-width:232px;
        margin-left:auto;
        margin-right:auto;
        margin-top:20px;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
      }

      main .hero .hero-actions .btn{
        width:100%;
        flex:none;
        min-height:42px;
        padding:0 14px;
        font-size:15px;
      }

      body > .floating-whatsapp{
        display:none !important;
      }
    }

    /* ============================================
       Mobile burger menu — ajouté pour fix UX mobile
       ============================================ */
    .nav-toggle{
      display:none;
      width:44px;
      height:44px;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.16);
      border-radius:12px;
      cursor:pointer;
      padding:0;
      color:var(--text);
      transition:background .2s ease, border-color .2s ease;
    }

    .nav-toggle:hover{
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.28);
    }

    .nav-toggle:focus-visible{
      outline:3px solid rgba(251,191,36,.72);
      outline-offset:2px;
    }

    .nav-toggle .bar{
      display:block;
      width:22px;
      height:2px;
      background:currentColor;
      border-radius:2px;
      margin:3px 0;
      transition:transform .25s ease, opacity .2s ease;
    }

    .nav-toggle[aria-expanded="true"] .bar:nth-child(1){
      transform:translateY(5px) rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .bar:nth-child(2){
      opacity:0;
    }
    .nav-toggle[aria-expanded="true"] .bar:nth-child(3){
      transform:translateY(-5px) rotate(-45deg);
    }

    @media (max-width: 720px){
      .nav-toggle{
        display:inline-flex;
      }

      .links{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:14px 24px 22px;
        background:rgba(8,14,28,.96);
        backdrop-filter:blur(12px);
        border-bottom:1px solid rgba(255,255,255,.08);
        box-shadow:0 18px 40px rgba(0,0,0,.40);
      }

      .links.is-open{
        display:flex;
      }

      .links .nav-link{
        padding:14px 18px;
        border-radius:12px;
        background:rgba(255,255,255,.04);
        border:1px solid rgba(255,255,255,.06);
        font-size:16px;
        text-align:center;
      }

      .links .btn{
        width:100%;
        min-height:48px;
        padding:0 18px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .nav-toggle .bar{
        transition:none;
      }
    }

    /* ============================================
       Icônes des tuiles Services & Process (v2)
       ============================================ */
    .tile-icon{
      display:block;
      width:34px;
      height:34px;
      color:var(--accent);
      margin-bottom:14px;
      filter:drop-shadow(0 4px 12px rgba(251,191,36,.22));
      transition:transform .25s ease, color .25s ease;
    }

    .tile:hover .tile-icon,
    .step:hover .tile-icon{
      transform:translateY(-2px) scale(1.06);
    }

    /* L'icône s'affiche à côté du numéro dans les .step */
    .step .tile-icon{
      width:30px;
      height:30px;
      color:#e8edf5;
      opacity:.75;
      margin-bottom:8px;
      margin-top:-4px;
      filter:none;
    }
    .step:hover .tile-icon{
      opacity:1;
      color:var(--accent);
    }

    @media (prefers-reduced-motion: reduce){
      .tile-icon{transition:none}
    }

    /* ============================================
       Animations au scroll (v2)
       ============================================ */
    .fade-up{
      opacity:0;
      transform:translateY(24px);
      transition:
        opacity .65s cubic-bezier(.16,1,.3,1),
        transform .65s cubic-bezier(.16,1,.3,1);
      will-change:opacity, transform;
    }
    .fade-up.is-visible{
      opacity:1;
      transform:translateY(0);
    }
    @media (prefers-reduced-motion: reduce){
      .fade-up{
        opacity:1;
        transform:none;
        transition:none;
      }
    }

    /* ============================================
       Floating WhatsApp : visible après le hero (v2)
       ============================================ */
    .floating-whatsapp{
      opacity:0;
      pointer-events:none;
      transform:translateY(16px);
      transition:opacity .3s ease, transform .3s ease;
    }
    .floating-whatsapp.is-visible{
      opacity:1;
      pointer-events:auto;
      transform:translateY(0);
    }
    @media (prefers-reduced-motion: reduce){
      .floating-whatsapp{transition:none}
    }

    /* ============================================
       Scroll cue sous le hero (v2)
       ============================================ */
    .scroll-cue{
      position:absolute;
      left:50%;
      bottom:22px;
      transform:translateX(-50%);
      z-index:2;
      display:inline-flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      color:#d7deea;
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      opacity:.74;
      transition:opacity .3s ease;
      pointer-events:none;
    }
    .scroll-cue svg{
      animation:scrollCue 1.8s ease-in-out infinite;
    }
    @keyframes scrollCue{
      0%, 100% { transform:translateY(0); opacity:.6 }
      50%      { transform:translateY(5px); opacity:1 }
    }
    @media (max-width: 720px){
      .scroll-cue{display:none}
    }
    @media (prefers-reduced-motion: reduce){
      .scroll-cue svg{animation:none}
    }

    /* ============================================
       Trust band (v2)
       ============================================ */
    .trust-band{
      padding:54px 0 !important;
    }
    .trust-inner{
      max-width:900px;
      margin:0 auto;
      text-align:center;
      padding:34px 28px;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:var(--shadow);
    }
    .trust-eyebrow{
      margin:0 0 10px;
      font-size:13px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--accent);
      font-weight:700;
    }
    .trust-line{
      margin:0;
      color:#e8edf5;
      line-height:1.6;
      font-size:17px;
    }
    .trust-line strong{
      color:#fff;
      font-weight:700;
    }
    .trust-list{
      list-style:none;
      padding:0;
      margin:18px 0 0;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px 14px;
    }
    .trust-list li{
      padding:8px 16px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      color:#e8edf5;
      font-size:14px;
      font-weight:600;
      letter-spacing:.01em;
    }

    /* ============================================
       Hero lead paragraph (v2)
       ============================================ */
    .hero-lead{
      margin:18px 0 0;
      max-width:680px;
      font-size:18px;
      line-height:1.65;
      color:#e5ebf5;
    }

    /* ============================================
       Footer enrichi (v2)
       ============================================ */
    .footer-meta{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:10px 22px;
      margin:0 0 14px;
      font-size:14px;
      color:#d7deea;
    }
    .footer-meta a{
      color:#e8edf5;
      text-decoration:none;
      border-bottom:1px solid rgba(232,237,245,.18);
      padding-bottom:1px;
      transition:color .2s ease, border-color .2s ease;
    }
    .footer-meta a:hover{
      color:var(--accent);
      border-bottom-color:var(--accent);
    }
    .footer-meta .sep{
      color:#3e4d65;
    }
    @media (max-width: 720px){
      .footer-meta{flex-direction:column;gap:6px}
      .footer-meta .sep{display:none}
    }

    /* ============================================
       Stat hero (section "1 200 DP réalisées") (v2)
       Layout vertical, tout aligné à gauche
       ============================================ */
    .stat-hero{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      margin:0 0 14px;
    }
    .stat-number strong{
      display:inline-block;
      font-size:clamp(54px, 7.5vw, 84px);
      font-weight:900;
      line-height:1;
      letter-spacing:-0.02em;
      background:linear-gradient(180deg, var(--accent) 30%, var(--accent-2) 100%);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      color:var(--accent);
      filter:drop-shadow(0 6px 22px rgba(251,191,36,.28));
    }
    .stat-number sup{
      font-size:.5em;
      vertical-align:super;
      margin-left:2px;
    }
    .stat-meta{
      margin-top:6px;
    }
    .stat-title{
      margin:0 0 6px;
      font-size:clamp(24px, 3vw, 36px);
      font-weight:800;
      line-height:1.15;
      color:#fff;
      letter-spacing:0;
    }
    .stat-sub{
      margin:0;
      color:var(--muted);
      font-size:clamp(15px, 1.4vw, 17px);
      line-height:1.55;
      max-width:680px;
    }
    .stat-sub strong{
      color:#e8edf5;
      font-weight:700;
    }

    /* ============================================
       Formules (cards type pricing) (v2)
       ============================================ */
    .formules-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:16px;
      align-items:stretch;
    }
    .formule{
      position:relative;
      display:flex;
      flex-direction:column;
      padding:26px 24px 24px;
      border-radius:18px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      box-shadow:var(--shadow);
      transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .formule:hover{
      transform:translateY(-3px);
      border-color:rgba(255,255,255,.18);
      box-shadow:0 18px 44px rgba(0,0,0,.40);
    }
    .formule-featured{
      background:linear-gradient(180deg, rgba(251,191,36,.10), rgba(255,255,255,.04));
      border-color:rgba(251,191,36,.35);
      box-shadow:0 14px 40px rgba(0,0,0,.35), 0 0 38px rgba(251,191,36,.10);
    }
    .formule-featured:hover{
      border-color:rgba(251,191,36,.55);
      box-shadow:0 18px 48px rgba(0,0,0,.42), 0 0 48px rgba(251,191,36,.18);
    }
    .formule-badge{
      position:absolute;
      top:-12px;
      left:50%;
      transform:translateX(-50%);
      padding:5px 14px;
      border-radius:999px;
      background:linear-gradient(180deg, var(--accent), var(--accent-2));
      color:#111827;
      font-size:11.5px;
      font-weight:800;
      letter-spacing:.16em;
      text-transform:uppercase;
      box-shadow:0 8px 20px rgba(245,158,11,.32);
      white-space:nowrap;
    }
    .formule-head{
      margin-bottom:18px;
      padding-bottom:16px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .formule-title{
      margin:0 0 4px;
      font-size:22px;
      font-weight:800;
      line-height:1.2;
      color:#fff;
      letter-spacing:0;
    }
    .formule-tagline{
      margin:0;
      color:var(--accent);
      font-size:13.5px;
      font-weight:600;
      letter-spacing:.02em;
    }
    .formule-list{
      list-style:none;
      padding:0;
      margin:0 0 22px;
      flex:1;
    }
    .formule-list li{
      position:relative;
      padding:9px 0 9px 28px;
      color:#e5ebf5;
      font-size:14.5px;
      line-height:1.5;
    }
    .formule-list li + li{
      border-top:1px solid rgba(255,255,255,.06);
    }
    .formule-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:13px;
      width:16px;
      height:16px;
      background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
    }
    .formule-list strong{
      color:#fff;
      font-weight:700;
    }
    .formule-cta{
      margin-top:auto;
    }
    .formule-cta .btn{
      width:100%;
    }
    .formules-note{
      text-align:center;
      color:var(--muted);
      margin:24px auto 0;
      font-size:14px;
      max-width:740px;
      line-height:1.55;
    }
    .formules-note strong{
      color:#e8edf5;
    }

    @media (max-width: 920px){
      .formules-grid{
        grid-template-columns:1fr;
      }
      .formule-featured{
        order:-1;  /* la formule populaire passe en premier sur mobile */
      }
    }

    /* ============================================
       SHINE FINAL — une seule version propre
       Effet reflet de carrosserie qui balaie la card
       ============================================ */
    .kpi,
    .tile,
    .tracking-panel,
    .deliverable,
    .step,
    .contact-card,
    .formule{
      overflow:visible;
    }

    .kpi::before,
    .tile::before,
    .tracking-panel::before,
    .deliverable::before,
    .step::before,
    .contact-card::before,
    .formule::before{
      content:"";
      position:absolute;
      inset:0;
      width:auto;
      height:auto;
      top:0;
      left:0;
      right:0;
      bottom:0;
      border-radius:inherit;
      padding:0;
      background:linear-gradient(
        110deg,
        transparent 30%,
        rgba(255,255,255,.30) 44%,
        rgba(255,255,255,1) 50%,
        rgba(255,255,255,.30) 56%,
        transparent 70%
      );
      background-size:250% 100%;
      background-position:-80% 0;
      background-repeat:no-repeat;
      -webkit-mask:none;
      mask:none;
      -webkit-mask-composite:source-over;
      mask-composite:add;
      filter:none;
      opacity:1;
      mix-blend-mode:normal;
      transform:none;
      pointer-events:none;
      z-index:1;
      animation:citask-shine 9.5s ease-in-out infinite;
      animation-delay:var(--sweep-delay, 0s);
    }

    .kpi::after,
    .tile::after,
    .tracking-panel::after,
    .deliverable::after,
    .step::after,
    .contact-card::after,
    .formule::after,
    details::before,
    details::after{
      display:none !important;
    }

    @keyframes citask-shine{
      0%   { background-position:-80% 0; animation-timing-function: ease-in; }
      13%  { background-position:180% 0; animation-timing-function: ease-out; }
      26%  { background-position:-80% 0; }
      100% { background-position:-80% 0; }
    }

    @media (prefers-reduced-motion: reduce){
      .kpi::before,
      .tile::before,
      .tracking-panel::before,
      .deliverable::before,
      .step::before,
      .contact-card::before,
      .formule::before{
        animation:none;
      }
    }

    /* ============================================
       Portal preview (captures du portail)
       Cadre browser façon "mini fenêtre"
       ============================================ */
    .portal-preview{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:18px;
      margin-top:22px;
    }
    .portal-card{
      margin:0;
      display:flex;
      flex-direction:column;
    }
    .portal-frame{
      background:#0e1a30;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 14px 38px rgba(0,0,0,.42);
      overflow:hidden;
      transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }
    .portal-frame:hover{
      transform:translateY(-3px);
      border-color:rgba(255,255,255,.18);
      box-shadow:0 18px 48px rgba(0,0,0,.52);
    }
    .portal-frame-bar{
      display:flex;
      align-items:center;
      gap:6px;
      padding:9px 14px;
      background:rgba(8,14,28,.78);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .portal-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      flex:0 0 auto;
    }
    .portal-dot--red    { background:#ff5f57; }
    .portal-dot--yellow { background:#febc2e; }
    .portal-dot--green  { background:#28c840; }
    .portal-frame-url{
      margin-left:12px;
      font-size:11.5px;
      color:#8a99af;
      font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing:.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .portal-frame img{
      display:block;
      width:100%;
      height:auto;
    }
    .portal-card figcaption{
      margin-top:10px;
      font-size:13.5px;
      color:var(--muted);
      text-align:center;
      line-height:1.45;
      padding:0 8px;
    }

    @media (max-width: 720px){
      .portal-preview{
        grid-template-columns:1fr;
        gap:22px;
      }
    }