:root{
    --bg:#050B16;
    --azure:#38B6FF;
    --ink:#EAF4FF;
    --dim:#9DBFD9;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{height:100%;overflow-x:clip}
  body{
    background:radial-gradient(1200px 800px at 50% 38%, #0A1A30 0%, var(--bg) 60%);
    min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    font-family:"Segoe UI", system-ui, sans-serif;
    overflow-x:hidden;
  }
  .hero-logo{
    position:relative;
    margin-top:5vh;
    width:min(94vw, 720px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  canvas{width:100%;height:auto;display:block}
  .wordmark{
    position:relative;margin-top:-6%;
    text-align:center;user-select:none;
    animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both .4s;
  }
  .wordmark .m365{
    font-size:clamp(2.4rem, 8vw, 4.2rem);
    font-weight:700;letter-spacing:.02em;color:var(--ink);
  }
  .wordmark .m365 b{
    font-weight:800;
    background:linear-gradient(120deg, var(--azure), #6FD1FF);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .wordmark .expertise{
    margin-top:.35rem;
    font-size:clamp(.72rem, 2.2vw, 1.02rem);
    font-weight:600;letter-spacing:.62em;text-indent:.62em;
    color:var(--dim);text-transform:uppercase;
  }
  .scanline{
    width:min(46%, 240px);height:1px;margin:1.1rem auto 0;
    background:linear-gradient(90deg, transparent, var(--azure), transparent);
    animation:scan 3.2s ease-in-out infinite;
  }
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes scan{0%,100%{opacity:.25;transform:scaleX(.55)}50%{opacity:1;transform:scaleX(1)}}
  @media (prefers-reduced-motion: reduce){
    .wordmark{animation:none}
    .scanline{animation:none;opacity:.6}
  }
  /* Navigation réelle (SEO / clavier / mobile) — discrète sous le logo */
    .site-nav{
    width:min(94vw, 1000px);
    margin:2.2rem auto 3rem;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:1.4rem 2rem;
  }
  .nav-group{display:flex;flex-direction:column;gap:.34rem}
  .nav-group a{
    color:var(--dim);text-decoration:none;
    font-size:.84rem;line-height:1.35;
    transition:color .15s ease;
  }
  .nav-group a:hover, .nav-group a:focus-visible{color:var(--azure)}
  .nav-group .nav-product{
    color:var(--ink);font-weight:700;font-size:.95rem;
    letter-spacing:.06em;text-transform:uppercase;
    margin-bottom:.15rem;
  }

  /* ===== Mode page (après clic sur une prestation) =====
     L'animation complète est reprise en petit, en haut à gauche,
     avec m365expertise / Microsoft Security Expertise dessous. */
  .hero-logo{transition:width .55s cubic-bezier(.2,.7,.2,1)}
  body.page-mode{align-items:flex-start}
  body.page-mode .hero-logo{
    width:180px;
    margin:1.1rem 0 0 1.4rem !important;
    cursor:pointer;
  }
  body.page-mode canvas{pointer-events:none}
  body.page-mode .wordmark{margin-top:-10%;animation:none}
  body.page-mode .wordmark .m365{font-size:1.35rem}
  body.page-mode .wordmark .expertise{font-size:.44rem;letter-spacing:.34em;text-indent:.34em}
  body.page-mode .scanline{width:70%;margin-top:.5rem}
  body.page-mode .site-nav{margin-top:0}

  .page{width:min(94vw,900px);margin:1.5rem auto 2.5rem;padding:0 1rem;animation:rise .6s cubic-bezier(.2,.7,.2,1) both .15s}
  .page .crumb{
    color:var(--azure);font-size:.8rem;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;margin-bottom:.6rem;
  }
  .page h1{color:var(--ink);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;margin-bottom:1.1rem}
  .page p{color:var(--dim);line-height:1.65;max-width:65ch;margin-bottom:1rem}
  .page .back{
    display:inline-block;margin-top:1.6rem;color:var(--azure);
    text-decoration:none;font-weight:600;font-size:.92rem;
  }
  .page .back:hover{color:#6FD1FF}
  .page h2{
    color:var(--ink);font-size:1.25rem;font-weight:700;
    margin:2.4rem 0 .9rem;padding-top:1.6rem;
    border-top:1px solid rgba(56,182,255,.18);
  }
  .page h2 span{color:var(--azure)}
  .page .cards{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:.9rem;margin:1.1rem 0;
  }
  .page .card, .side-cards .card{
    border:1px solid rgba(56,182,255,.22);border-radius:10px;
    padding:1rem 1.1rem;
    background:linear-gradient(160deg, rgba(56,182,255,.05), rgba(56,182,255,0));
  }
  .page .card h3, .side-cards .card h3{color:#6FD1FF;font-size:.95rem;font-weight:700;margin-bottom:.4rem}
  .page .card p, .side-cards .card p{font-size:.88rem;margin:0}
  .page ol.steps{margin:1rem 0 0 1.2rem;color:var(--dim);line-height:1.7}
  .page ol.steps li::marker{color:var(--azure);font-weight:700}
  .page ol.steps b{color:var(--ink);font-weight:600}

  /* Multi-pages */
  .hero-link{display:block;text-decoration:none;align-self:flex-start}
  body.page-mode .hero-logo{margin:1.1rem 0 0 1.4rem}
  .page .crumb a{color:var(--azure);text-decoration:none}
  .page .crumb a:hover{color:#6FD1FF}
  .page .card-link, .side-cards .card-link{display:block;text-decoration:none;transition:border-color .15s ease, transform .15s ease}
  .page .card-link:hover, .side-cards .card-link:hover{border-color:rgba(56,182,255,.55);transform:translateY(-2px)}
  .page .card-link p, .side-cards .card-link p{color:var(--azure)}

  /* ===== Accueil : planète centrée, wordmark dessous, 4 accès rapides ===== */
  body.home{justify-content:center;min-height:100vh;position:relative}
  body.home .hero-logo{margin-top:.5vh}
  .quick-links{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:1.2rem 2.6rem;
    margin:2.2rem auto 3rem;
    animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both .7s;
  }
  .quick-link{
    display:inline-flex;align-items:center;gap:.55rem;
    color:var(--dim);text-decoration:none;
    font-size:clamp(.85rem, 2vw, 1.05rem);
    font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    transition:color .18s ease, text-shadow .18s ease;
  }
  .quick-link:hover, .quick-link:focus-visible{
    color:var(--ink);
    text-shadow:0 0 14px rgba(56,182,255,.8);
  }
  .quick-link .spin{
    width:1.05em;height:1.05em;flex:none;
    animation:spin 2.6s linear infinite;
    filter:drop-shadow(0 0 4px rgba(56,182,255,.6));
  }
  .quick-link:hover .spin{animation-duration:.9s}
  @keyframes spin{to{transform:rotateX(360deg)}}
  @media (prefers-reduced-motion: reduce){
    .quick-link .spin{animation:none}
  }
  /* Cartes de services de l'accueil (même style que les cartes des pages) */
  @property --hcA{syntax:'<angle>';inherits:false;initial-value:0deg}
  .home-cards{
    display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1rem;
    max-width:1180px;margin:2.2rem auto 3rem;padding:0 1.2rem;
    animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both .7s;
  }
  @media (max-width: 960px){ .home-cards{grid-template-columns:1fr;max-width:520px} }
  .home-card{
    position:relative;display:flex;flex-direction:column;text-decoration:none;
    border:1px solid rgba(176,196,214,.30);border-radius:10px;   /* contour métallique */
    padding:1rem 1.1rem;
    background:linear-gradient(160deg, rgba(56,182,255,.05), rgba(56,182,255,0));
    transition:transform .15s ease, box-shadow .15s ease;
  }
  /* Lueur qui fait le tour de la carte, traînée métallique derrière elle */
  .home-card::before{
    content:"";position:absolute;inset:-1px;border-radius:11px;padding:1px;
    background:conic-gradient(from var(--hcA),
      rgba(176,196,214,.10) 0deg,
      rgba(176,196,214,.12) 250deg,
      rgba(190,208,224,.45) 305deg,
      rgba(56,182,255,.95) 338deg,
      #EAF4FF 348deg,
      rgba(176,196,214,.10) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:hcSweep 11s linear infinite;
    pointer-events:none;
  }
  .home-card:nth-child(2)::before{animation-delay:-2.75s}
  .home-card:nth-child(3)::before{animation-delay:-5.5s}
  .home-card:nth-child(4)::before{animation-delay:-8.25s}
  @keyframes hcSweep{to{--hcA:360deg}}
  @media (prefers-reduced-motion: reduce){
    .home-card::before{animation:none;background:conic-gradient(from 0deg, rgba(176,196,214,.22), rgba(176,196,214,.22))}
  }
  .home-card:hover, .home-card:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(56,182,255,.16);
  }
  .home-card h3{color:#6FD1FF;font-size:.95rem;font-weight:700;margin:0 0 .4rem}
  .home-card p{color:var(--dim);font-size:.88rem;line-height:1.5;margin:0 0 .7rem}
  .home-card .hc-cta{
    margin-top:auto;color:var(--azure);font-size:.82rem;font-weight:700;
    letter-spacing:.04em;transition:color .15s ease;
  }
  .home-card:hover .hc-cta{color:#6FD1FF}


  /* Signature HUD : « L'audit de sécurité est notre expertise » */
  .tagline-hud{
    position:relative;
    margin:3vh auto -1vh;
    padding:.9rem 1.6rem;
    max-width:min(92vw, 560px);
    text-align:center;
    animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both 1.2s;
  }
  .tagline-hud::before, .tagline-hud::after{
    content:"";position:absolute;width:16px;height:16px;
    border:1px solid rgba(56,182,255,.75);
    filter:drop-shadow(0 0 6px rgba(56,182,255,.5));
  }
  .tagline-hud::before{top:0;left:0;border-right:none;border-bottom:none}
  .tagline-hud::after{bottom:0;right:0;border-left:none;border-top:none}
  .hud-text{
    font-family:"Cascadia Code","Consolas",ui-monospace,monospace;
    font-size:clamp(.9rem, 2.3vw, 1.15rem);
    font-weight:500;letter-spacing:.06em;
    color:var(--ink);
    text-shadow:0 0 14px rgba(56,182,255,.4);
  }
  .hud-text b{
    font-weight:700;
    background:linear-gradient(120deg, var(--azure), #6FD1FF);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 10px rgba(56,182,255,.55));
  }
  .hud-cursor{
    display:inline-block;width:.55em;height:1.05em;
    margin-left:.3rem;vertical-align:text-bottom;
    background:var(--azure);
    animation:blink 1.05s steps(1) infinite;
    box-shadow:0 0 10px rgba(56,182,255,.8);
  }
  @keyframes blink{50%{opacity:0}}
  @media (prefers-reduced-motion: reduce){ .hud-cursor{animation:none;opacity:.6} }

  /* ===== Pages produit "split" : cartes à gauche, contenu à droite ===== */
  .page-split{width:min(94vw,1180px)}
  .split{
    display:grid;grid-template-columns:250px minmax(0,1fr);
    gap:2.2rem;align-items:start;margin-top:1.4rem;
  }
  .side-cards{display:flex;flex-direction:column;gap:.75rem;position:sticky;top:1.2rem}
  .side-cards .card-link{padding:.85rem 1rem}
  .side-cards .card-link h3{font-size:.9rem;margin-bottom:.25rem}
  .side-cards .card-link p{font-size:.78rem}
  .side-cards .card-link.active{
    border-color:rgba(56,182,255,.7);
    background:linear-gradient(160deg, rgba(56,182,255,.14), rgba(56,182,255,.03));
    pointer-events:none;
  }
  .side-cards .card-link.active h3{color:var(--ink)}
  .split-content h2:first-child{margin-top:0;padding-top:0;border-top:none}
  .ad-schema{
    width:100%;max-width:640px;display:block;
    margin:1.4rem 0 1.6rem;
    filter:drop-shadow(0 0 18px rgba(56,182,255,.12));
  }
  @media (max-width:900px){
    .split{grid-template-columns:1fr}
    .side-cards{position:static;flex-direction:row;flex-wrap:wrap}
    .side-cards .card-link{flex:1 1 180px}
  }

  /* ===== Disposition 2 colonnes centrée : logo+cartes | contenu ===== */
  .layout2{
    display:grid;grid-template-columns:240px minmax(0,1fr);
    gap:2.6rem;align-items:start;
    width:min(94vw,1150px);
    margin:1.4rem auto 3rem;
  }
  .layout2 .hero-link{align-self:auto}
  .layout2 .hero-logo{width:200px;margin:0 auto 1rem !important}
  .layout2 .side-cards{position:sticky;top:1.2rem;margin-top:4.5rem}
  .layout2 main.page{width:auto;margin:0;padding:1rem 0 0;animation:none}
  @media (max-width:900px){
    .layout2{grid-template-columns:1fr;gap:1.6rem}
    .layout2 .side-cards{position:static;flex-direction:row;flex-wrap:wrap}
    .layout2 .side-cards .card-link{flex:1 1 180px}
  }
  /* Layout à une seule zone latérale (contact, pages légales) */
  .layout2--single{grid-template-columns:200px minmax(0,1fr)}
  .layout2--single .hero-logo{width:170px}
  @media (max-width:900px){
    .layout2--single{grid-template-columns:1fr;justify-items:center}
    .layout2--single .col-left{width:100%;display:flex;justify-content:center}
    .layout2--single main.page{width:100%}
  }

  /* Menu gauche : léger fond + respiration sous l'animation */
  .side-cards .card-link{
    background:linear-gradient(160deg, rgba(56,182,255,.22), rgba(56,182,255,.08)) !important;
    border-color:rgba(56,182,255,.38);
  }
  .side-cards .card-link:hover{
    background:linear-gradient(160deg, rgba(56,182,255,.30), rgba(56,182,255,.12)) !important;
  }
  .side-cards .card-link.active{
    background:linear-gradient(160deg, rgba(56,182,255,.34), rgba(56,182,255,.14)) !important;
    border-color:rgba(56,182,255,.8);
  }

  /* ===== Cartes de risque cliquables + modale translucide ===== */
  .risk-card{cursor:pointer;transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease}
  .risk-card:hover, .risk-card:focus-visible{
    border-color:rgba(56,182,255,.6);transform:translateY(-2px);
    box-shadow:0 6px 22px rgba(56,182,255,.18);outline:none;
  }
  .risk-card h3{position:relative;padding-right:1.1rem}
  .risk-card h3::after{content:"↗";position:absolute;right:0;top:0;color:var(--azure);font-size:.8em;opacity:.6}
  .risk-modal{position:fixed;inset:0;z-index:100;display:none}
  .risk-modal.open{display:block}
  .risk-modal__backdrop{
    position:absolute;inset:0;background:rgba(4,9,20,.55);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    animation:fade .25s ease both;
  }
  .risk-modal__card{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(92vw,560px);max-height:82vh;overflow:auto;
    padding:2rem 2.1rem;border-radius:16px;
    border:1px solid rgba(56,182,255,.4);
    background:linear-gradient(160deg, rgba(20,40,70,.72), rgba(8,18,34,.72));
    box-shadow:0 24px 70px rgba(0,0,0,.5), 0 0 40px rgba(56,182,255,.15);
    animation:pop .28s cubic-bezier(.2,.7,.2,1) both;
  }
  .risk-modal__card h3{
    color:#6FD1FF;font-size:1.4rem;font-weight:700;
    margin-bottom:.9rem;padding-right:2rem;
    text-shadow:0 0 18px rgba(56,182,255,.35);
  }
  .risk-modal__card p{color:var(--ink);line-height:1.7;font-size:.98rem;margin:0;opacity:.92}
  .risk-modal__close{
    position:absolute;top:.9rem;right:1.1rem;
    background:none;border:none;color:var(--dim);
    font-size:1.7rem;line-height:1;cursor:pointer;transition:color .15s ease;
  }
  .risk-modal__close:hover{color:var(--ink)}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  @media (prefers-reduced-motion: reduce){.risk-modal__backdrop,.risk-modal__card{animation:none}}

  /* ===== Formulaire de contact ===== */
  .contact-form{margin-top:2.4rem;max-width:640px}
  .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
  .cf-field{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.6rem}
  .cf-field > span{
    color:var(--dim);font-size:.78rem;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;
  }
  .cf-field input, .cf-field select, .cf-field textarea{
    width:100%;
    background:rgba(56,182,255,.05);
    border:1px solid rgba(56,182,255,.28);border-radius:9px;
    color:var(--ink);font-family:inherit;font-size:.95rem;
    padding:.85rem .95rem;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .cf-field textarea{resize:vertical;min-height:120px}
  .cf-field select{appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--azure) 50%),linear-gradient(135deg,var(--azure) 50%,transparent 50%);
    background-position:calc(100% - 18px) center,calc(100% - 13px) center;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem;}
  .cf-field option{background:#0A1A30;color:var(--ink)}
  .cf-field input::placeholder, .cf-field textarea::placeholder{color:rgba(127,168,201,.55)}
  .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{
    outline:none;border-color:rgba(56,182,255,.7);
    background:rgba(56,182,255,.09);
    box-shadow:0 0 0 3px rgba(56,182,255,.12);
  }
  .cf-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem}
  .cf-submit{
    display:inline-flex;align-items:center;gap:.7rem;
    padding:1rem 2.1rem;border:none;border-radius:11px;cursor:pointer;
    background:#38B6FF;
    color:#041022;font-family:inherit;font-size:1.02rem;font-weight:800;
    letter-spacing:.03em;
    box-shadow:0 8px 26px rgba(56,182,255,.45);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .cf-submit svg{width:1.15em;height:1.15em;stroke-width:2.4}
  .cf-submit:hover{transform:translateY(-2px);background:#6FD1FF;box-shadow:0 12px 32px rgba(56,182,255,.6)}
  .cf-submit:active{transform:translateY(0)}
  .cf-submit:focus-visible{outline:3px solid rgba(56,182,255,.4);outline-offset:3px}
  .cf-note{color:var(--dim);font-size:.8rem}
  .cf-status{margin-top:1rem;font-size:.9rem;color:var(--dim);min-height:1.2em}
  .cf-status.ok{color:#6FD1FF}
  .cf-status.err{color:#FF6B6B}
  @media (max-width:640px){.cf-row{grid-template-columns:1fr}}


  /* ===== Pied de page (Option A — minimaliste HUD) ===== */
  .site-footer{width:100%;margin-top:auto;padding:2.4rem 0 2rem;border-top:1px solid rgba(56,182,255,.12)}
  .sf-inner{width:min(94vw,1150px);margin:0 auto}
  .sf-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
  .sf-brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.1}
  .sf-m365{font-size:1.35rem;font-weight:800;color:var(--ink)}
  .sf-m365 b{color:var(--azure)}
  .sf-base{font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-top:3px}
  .sf-links{display:flex;gap:1.7rem;align-items:center;flex-wrap:wrap}
  .sf-links a{color:var(--dim);text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.04em;transition:color .15s ease, text-shadow .15s ease}
  .sf-links a:hover{color:var(--ink);text-shadow:0 0 12px rgba(56,182,255,.6)}
  .sf-links .sf-contact{color:var(--azure)}
  .sf-links .sf-contact:hover{color:#6FD1FF}
  .sf-rule{height:1px;margin:1.4rem 0 1rem;background:linear-gradient(90deg,transparent,var(--azure),transparent);opacity:.4}
  .sf-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
  .sf-bottom span, .sf-bottom a{color:#5F7A96;font-size:.8rem}
  .sf-bottom a{text-decoration:none;transition:color .15s ease}
  .sf-bottom a:hover{color:var(--azure)}
  @media (max-width:600px){.sf-top{flex-direction:column;align-items:flex-start}}

  .legal .legal-todo{color:#8FA8BF;font-style:italic;font-size:.9em}

  /* Liens dans le corps des pages (légales, contact) — bien visibles */
  .split-content a{color:var(--azure);text-decoration:none;border-bottom:1px solid rgba(56,182,255,.35);transition:color .15s ease, border-color .15s ease}
  .split-content a:hover{color:#6FD1FF;border-color:#6FD1FF}

  /* ===== Bandeau CTA ===== */
  .cta-band{
    display:flex;justify-content:space-between;align-items:center;gap:1.4rem;flex-wrap:wrap;
    margin:2.6rem 0 .5rem;padding:1.5rem 1.8rem;border-radius:14px;
    border:1px solid rgba(56,182,255,.3);
    background:linear-gradient(160deg, rgba(56,182,255,.12), rgba(56,182,255,.02));
  }
  .cta-title{color:var(--ink);font-size:1.15rem;font-weight:700}
  .cta-sub{color:var(--dim);font-size:.92rem;margin-top:.3rem}
  .cta-btn{
    display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
    padding:.85rem 1.6rem;border-radius:11px;text-decoration:none;
    background:#38B6FF;color:#041022;font-weight:800;font-size:.98rem;
    box-shadow:0 8px 24px rgba(56,182,255,.4);
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .cta-btn svg{width:1.1em;height:1.1em}
  .cta-btn:hover{transform:translateY(-2px);background:#6FD1FF;box-shadow:0 12px 30px rgba(56,182,255,.6)}
  /* le CTA n'a pas de soulignement de lien de corps */
  .split-content a.cta-btn{color:#041022;border-bottom:none}
  .split-content a.cta-btn:hover{color:#041022}

  /* ===== FAQ ===== */
  .faq-item{
    border:1px solid rgba(56,182,255,.2);border-radius:10px;
    margin:.7rem 0;padding:.2rem 1.1rem;
    background:linear-gradient(160deg, rgba(56,182,255,.05), rgba(56,182,255,0));
  }
  .faq-item summary{
    cursor:pointer;list-style:none;padding:.9rem 0;
    color:var(--ink);font-weight:600;font-size:1rem;
    display:flex;justify-content:space-between;align-items:center;gap:1rem;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+";color:var(--azure);font-size:1.3rem;font-weight:400;transition:transform .2s ease}
  .faq-item[open] summary::after{content:"−"}
  .faq-item p{color:var(--dim);line-height:1.65;padding:0 0 1rem;margin:0;max-width:62ch}

  /* ===== Accessibilité : contenu caché lecteurs d'écran + skip-link ===== */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .skip-link{
    position:absolute;left:-999px;top:0;z-index:200;
    background:#38B6FF;color:#041022;padding:.6rem 1rem;border-radius:0 0 8px 0;
    font-weight:700;text-decoration:none;
  }
  .skip-link:focus{left:0}

  /* ===== Carte réseau d'experts ===== */
  .netmap-frame{
    margin:1.6rem 0 1rem;padding:1rem;border-radius:16px;
    border:1px solid rgba(56,182,255,.3);
    background:linear-gradient(160deg, rgba(10,26,48,.6), rgba(5,11,22,.6));
    box-shadow:inset 0 0 60px rgba(56,182,255,.06);
  }
  .netmap-viewport{position:relative;width:100%;border-radius:10px;overflow:hidden}
  #worldMap{width:100%;height:auto;display:block;background:radial-gradient(600px 300px at 50% 40%, rgba(56,182,255,.05), transparent)}
  .cy{
    fill:rgba(56,182,255,.04);
    stroke:rgba(56,182,255,.35);stroke-width:.6;
    transition:fill .18s ease, stroke .18s ease, filter .18s ease;
    cursor:pointer;
  }
  .cy.served{fill:rgba(56,182,255,.22);stroke:rgba(56,182,255,.7)}
  .cy.hot{
    fill:rgba(56,182,255,.55);stroke:#6FD1FF;stroke-width:1;
    filter:drop-shadow(0 0 6px rgba(56,182,255,.8));
  }
  .cy.pinned{
    fill:rgba(56,182,255,.6);stroke:#6FD1FF;stroke-width:1.2;
    filter:drop-shadow(0 0 8px rgba(56,182,255,.9));
  }
  .cy.dim{opacity:.35}
  .netmap-tooltip{
    position:absolute;transform:translate(-50%,-140%);pointer-events:none;
    background:rgba(8,18,34,.9);border:1px solid rgba(56,182,255,.5);
    color:#EAF4FF;font-size:.8rem;font-weight:600;
    padding:.3rem .6rem;border-radius:6px;white-space:nowrap;
    box-shadow:0 4px 14px rgba(0,0,0,.4);
  }
  .netmap-bar{display:flex;gap:.8rem;align-items:center;margin-top:1rem;flex-wrap:wrap}
  .nm-zoom{
    display:grid;place-items:center;width:44px;height:44px;flex:none;
    border-radius:10px;cursor:pointer;
    background:rgba(56,182,255,.1);border:1px solid rgba(56,182,255,.35);
    color:var(--azure);transition:all .15s ease;
  }
  .nm-zoom svg{width:20px;height:20px}
  .nm-zoom:hover,.nm-zoom.on{background:#38B6FF;color:#041022;border-color:#38B6FF}
  .nm-filter{
    flex:0 0 auto;min-width:180px;padding:.7rem .9rem;
    background:rgba(56,182,255,.06);border:1px solid rgba(56,182,255,.3);
    border-radius:10px;color:var(--ink);font-family:inherit;font-size:.9rem;cursor:pointer;
    appearance:none;padding-right:2rem;
    background-image:linear-gradient(45deg,transparent 50%,#38B6FF 50%),linear-gradient(135deg,#38B6FF 50%,transparent 50%);
    background-position:calc(100% - 16px) center,calc(100% - 11px) center;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  }
  .nm-filter option{background:#0A1A30;color:var(--ink)}
  .nm-search{flex:1 1 200px;display:flex;align-items:center;gap:.5rem;
    padding:.7rem .9rem;border-radius:10px;
    background:rgba(56,182,255,.06);border:1px solid rgba(56,182,255,.3);}
  .nm-search svg{width:18px;height:18px;stroke:var(--dim);flex:none}
  .nm-search input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-family:inherit;font-size:.9rem}
  .nm-search input::placeholder{color:rgba(157,191,217,.6)}
  .nm-search:focus-within{border-color:rgba(56,182,255,.7);box-shadow:0 0 0 3px rgba(56,182,255,.12)}
  .netmap-hint{color:var(--dim);font-size:.88rem;margin:.4rem 0 0}
  .netmap-hint b{color:var(--azure)}

  /* ===== Bandeau recrutement réseau ===== */
  .join-band{
    position:relative;overflow:hidden;
    margin:1.6rem 0 2rem;padding:2.4rem 2rem;border-radius:16px;text-align:center;
    border:1px solid rgba(56,182,255,.35);
    background:linear-gradient(160deg, rgba(56,182,255,.14), rgba(56,182,255,.02));
  }
  .join-glow{
    position:absolute;top:-40%;left:50%;transform:translateX(-50%);
    width:420px;height:420px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(56,182,255,.25), transparent 70%);
    animation:floaty 6s ease-in-out infinite;
  }
  .join-band h2{border:none;padding:0;margin:0 0 .7rem;color:var(--ink);font-size:1.5rem}
  .join-band > p{color:var(--dim);max-width:52ch;margin:0 auto 1.5rem;line-height:1.6;position:relative}
  .join-band .cta-btn{position:relative}

  #worldMap{cursor:grab}
  #worldMap.grabbing{cursor:grabbing}
  .netmap-drag-hint{color:var(--dim);font-size:.82rem;text-align:center;margin:.7rem 0 0;opacity:.8}


  /* ===== Formulaire adhésion : cases à cocher + cartes outils ===== */
  .chk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem .9rem;margin-top:.2rem}
  .chk{display:flex;align-items:flex-start;gap:.5rem;cursor:pointer;color:var(--dim);font-size:.9rem;line-height:1.35}
  .chk input{margin-top:.15rem;accent-color:#38B6FF;width:16px;height:16px;flex:none;cursor:pointer}
  .chk span{flex:1}
  .chk-consent{margin:.4rem 0 1rem;font-size:.85rem}
  .chk-consent a{color:var(--azure)}
  .tool-cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .tool-card{display:flex;flex-direction:column}
  .tool-card .tool-more{margin-top:.7rem;color:var(--azure);font-weight:600;font-size:.85rem}
  .tool-card:hover .tool-more{color:#6FD1FF}
  .split-content a.tool-card{border-bottom:none}

  /* ===== Accueil : 3 pastilles en orbite triangulaire ===== */
  .orbit-system{
    position:absolute;bottom:8%;right:-8%;
    width:150px;height:150px;pointer-events:none;
    animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both 1.6s;
  }
  .orbit-spin{
    position:relative;width:100%;height:100%;
    animation:orbitTurn 22s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){ .orbit-spin{animation:none} }
  .orbit-pod{
    position:absolute;top:50%;left:50%;
    width:56px;height:56px;margin:-28px;
    pointer-events:auto;text-decoration:none;
  }
  /* placement aux 3 sommets du triangle (rayon ~58px) */
  .pod-1{transform:translate(0,-58px)}
  .pod-2{transform:translate(50px,29px)}
  .pod-3{transform:translate(-50px,29px)}
  /* contre-rotation : les pastilles restent droites malgré la rotation du système */
  .pod-fix{
    display:block;position:relative;width:56px;height:56px;
    animation:orbitTurn 22s linear infinite reverse;
  }
  @media (prefers-reduced-motion: reduce){ .pod-fix{animation:none} }
  .co-core{
    position:relative;z-index:2;display:grid;place-items:center;
    width:56px;height:56px;border-radius:50%;
    color:#041022;background:#38B6FF;
    box-shadow:0 6px 22px rgba(56,182,255,.5);
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .co-core svg{width:24px;height:24px}
  .co-ring{
    position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:56px;height:56px;border-radius:50%;
    border:1.5px solid rgba(56,182,255,.7);
    animation:pingRing 2.6s ease-out infinite;
  }
  .co-ring::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;
    border:1.5px solid rgba(56,182,255,.5);animation:pingRing 2.6s ease-out infinite 1.3s;}
  .pod-2 .co-ring{animation-delay:.5s}.pod-2 .co-ring::after{animation-delay:1.8s}
  .pod-3 .co-ring{animation-delay:1s}.pod-3 .co-ring::after{animation-delay:2.3s}
  .co-tip{
    position:absolute;top:64px;left:50%;transform:translateX(-50%);
    white-space:nowrap;font-size:.66rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim);opacity:0;pointer-events:none;
    transition:opacity .2s ease, color .2s ease;
  }
  .orbit-pod:hover .co-core, .orbit-pod:focus-visible .co-core{
    transform:scale(1.14);background:#6FD1FF;box-shadow:0 10px 30px rgba(56,182,255,.7);
  }
  .orbit-pod:hover .co-tip, .orbit-pod:focus-visible .co-tip{opacity:1;color:var(--ink)}
  /* Couleurs par pastille : Contact = bleu, Rejoindre = blanc, Demande = vert */
  .pod-1 .co-core{background:#38B6FF;box-shadow:0 6px 22px rgba(56,182,255,.55)}
  .pod-1 .co-ring{border-color:rgba(56,182,255,.75)}
  .pod-1 .co-ring::after{border-color:rgba(56,182,255,.55)}
  .pod-1:hover .co-core, .pod-1:focus-visible .co-core{background:#6FD1FF;box-shadow:0 10px 30px rgba(56,182,255,.75)}
  .pod-2 .co-core{background:#FFFFFF;box-shadow:0 6px 22px rgba(255,255,255,.5)}
  .pod-2 .co-ring{border-color:rgba(255,255,255,.8)}
  .pod-2 .co-ring::after{border-color:rgba(255,255,255,.55)}
  .pod-2:hover .co-core, .pod-2:focus-visible .co-core{background:#EAF4FF;box-shadow:0 10px 30px rgba(255,255,255,.7)}
  .pod-3 .co-core{background:#2EE66B;box-shadow:0 6px 22px rgba(46,230,107,.55)}
  .pod-3 .co-ring{border-color:rgba(46,230,107,.8)}
  .pod-3 .co-ring::after{border-color:rgba(46,230,107,.55)}
  .pod-3:hover .co-core, .pod-3:focus-visible .co-core{background:#5CF08C;box-shadow:0 10px 30px rgba(46,230,107,.75)}
  .orbit-system:hover .orbit-spin, .orbit-system:focus-within .orbit-spin{animation-play-state:paused}
  .orbit-system:hover .pod-fix, .orbit-system:focus-within .pod-fix{animation-play-state:paused}
  @keyframes orbitTurn{to{transform:rotate(360deg)}}
  @media (max-width:720px){
    .orbit-system{position:static;width:auto;height:auto;margin:1.6rem auto 0}
    .orbit-spin{animation:none;display:flex;justify-content:center;gap:1.6rem;height:auto}
    .orbit-pod{position:static;transform:none !important;margin:0}
    .pod-fix{animation:none}
    .co-tip{position:static;transform:none;opacity:.8;margin-top:.3rem;text-align:center}
    .orbit-pod{display:flex;flex-direction:column;align-items:center}
  }

  /* ===== Sélecteur de langue (accueil) ===== */
  .lang-switch{
    position:fixed;top:1.1rem;right:1.2rem;z-index:150;
    display:flex;align-items:center;gap:.55rem;
    padding:.45rem .8rem;border-radius:999px;
    border:1px solid rgba(56,182,255,.35);
    background:rgba(8,18,34,.72);backdrop-filter:blur(6px);
  }
  .ls-item{
    color:var(--dim);text-decoration:none;
    font-size:.74rem;font-weight:800;letter-spacing:.14em;
    transition:color .15s ease, text-shadow .15s ease;
  }
  .ls-item:hover{color:var(--ink);text-shadow:0 0 10px rgba(56,182,255,.7)}
  .ls-item.active{color:var(--azure)}
  .ls-sep{width:1px;height:12px;background:rgba(56,182,255,.4)}
  .ls-login{color:#041022!important;background:linear-gradient(135deg,#38B6FF,#7CD4FF);
    border-radius:999px;padding:.28rem .75rem;font-weight:800}
  .ls-login:hover{filter:brightness(1.1);text-shadow:none!important}
  @media (max-width:720px){.lang-switch{top:.7rem;right:.7rem;padding:.35rem .65rem}}

  /* Bandeau d'en-tête des sous-pages (wordmark + navigation) */
  .site-top{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    gap:1.2rem;flex-wrap:wrap;
    padding:1rem 2.2rem;
    border-bottom:1px solid rgba(56,182,255,.10);
  }
  .st-brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.15}
  .st-name{font-size:1.45rem;font-weight:800;color:var(--ink);letter-spacing:.01em}
  .st-name b{color:var(--azure);font-weight:800}
  .st-sub{font-size:.6rem;font-weight:600;letter-spacing:.34em;color:var(--dim);margin-top:.15rem}
  .st-nav{display:flex;align-items:center;gap:1.7rem;flex-wrap:wrap}
  .st-nav a{
    color:#CFE3F5;text-decoration:none;font-size:.92rem;font-weight:700;
    transition:color .15s ease, text-shadow .15s ease;
  }
  .st-nav a:hover, .st-nav a:focus-visible{color:var(--azure);text-shadow:0 0 12px rgba(56,182,255,.55)}
  .st-nav a.st-cta{color:var(--azure)}
  .st-nav a.st-cta:hover{color:#6FD1FF}
  @media (max-width: 640px){
    .site-top{padding:.9rem 1.1rem;justify-content:center;text-align:center}
    .st-brand{align-items:center}
    .st-nav{justify-content:center;gap:.9rem 1.1rem}
    .st-nav a{font-size:.84rem}
  }

  /* Cartes latérales des pages : même contour animé que les cartes de l'accueil */
  .side-cards .card{position:relative;border-color:rgba(176,196,214,.30)}
  .side-cards .card::before{
    content:"";position:absolute;inset:-1px;border-radius:11px;padding:1px;
    background:conic-gradient(from var(--hcA),
      rgba(176,196,214,.10) 0deg,
      rgba(176,196,214,.12) 250deg,
      rgba(190,208,224,.45) 305deg,
      rgba(56,182,255,.95) 338deg,
      #EAF4FF 348deg,
      rgba(176,196,214,.10) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:hcSweep 11s linear infinite;
    pointer-events:none;
  }
  .side-cards .card:nth-child(2)::before{animation-delay:-1.85s}
  .side-cards .card:nth-child(3)::before{animation-delay:-3.7s}
  .side-cards .card:nth-child(4)::before{animation-delay:-5.55s}
  .side-cards .card:nth-child(5)::before{animation-delay:-7.4s}
  .side-cards .card:nth-child(6)::before{animation-delay:-9.25s}
  @media (prefers-reduced-motion: reduce){
    .side-cards .card::before{animation:none;background:conic-gradient(from 0deg, rgba(176,196,214,.22), rgba(176,196,214,.22))}
  }

  /* Accroche réseau : créer son activité / élargir son offre */
  .net-pitch{
    margin-top:1rem;padding:.85rem 1.1rem;
    border-left:3px solid var(--azure);border-radius:0 8px 8px 0;
    background:linear-gradient(90deg, rgba(56,182,255,.08), rgba(56,182,255,0));
    font-size:1.02rem;line-height:1.6;
  }
  .net-pitch b{color:#6FD1FF;font-weight:700}

/* Lien LinkedIn — page À propos */
.li-link{margin-top:.6rem}
.li-link a{display:inline-flex;align-items:center;gap:.5rem;color:#38B6FF;text-decoration:none;font-weight:600;transition:color .2s}
.li-link a:hover{color:#6FD1FF}
.li-link a svg{opacity:.9}

/* ── Média : carte Vidéo, vignette, capture, lightbox ── */
.card-video h3::before{content:"▶";color:#38B6FF;margin-right:.5rem;font-size:.85em}
.media-video{display:block;position:relative;width:100%;border:1px solid rgba(56,182,255,.28);border-radius:12px;overflow:hidden;background:#0A1526;cursor:pointer;padding:0;margin:.4rem 0 1.4rem}
.media-video img{display:block;width:100%;height:auto}
.media-video .media-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.media-play svg{width:64px;height:64px;color:#EAF4FF;background:rgba(56,182,255,.85);border-radius:50%;padding:16px;box-shadow:0 6px 24px rgba(0,0,0,.4);transition:transform .2s,background .2s}
.media-video:hover .media-play svg{transform:scale(1.08);background:#38B6FF}
.media-video.no-poster{aspect-ratio:16/9}
.media-video.no-poster::after{content:"Vidéo à venir — déposez img/…-demo.mp4";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#7FA8C9;font:500 13px 'Segoe UI',system-ui,sans-serif;padding:1rem;text-align:center}






.video-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.video-modal[hidden]{display:none}
.vm-backdrop{position:absolute;inset:0;background:rgba(3,8,18,.86);backdrop-filter:blur(3px)}
.vm-box{position:relative;width:min(92vw,960px);z-index:1}
.vm-box video{width:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#000}
.vm-close{position:absolute;top:-42px;right:0;background:none;border:none;color:#EAF4FF;font-size:24px;cursor:pointer;line-height:1}
.vm-close:hover{color:#38B6FF}