/* ================================
   Scopum Web — style.css (fix v2)
   - Mobile burger: requires input#menu-toggle in DOM (see HTML snippet in chat)
   - Extra dropdown aligned
   - Orbite lines visible; bubbles not cut (overflow:visible + taller desktop)
   ================================ */

/* ---------- Variables ---------- */
:root{
  --bg:#222222;
  --bg-2:#1f1f1f;
  --panel:#2a2a2a;
  --panel-2:#333333;
  --text:#ffffff;
  --muted:#cccccc;
  --muted-2:#777777;
  --gold:#FFD277;
  --blue:#3ABEF9;
  --border:#2a2a2a;
  --shadow:0 4px 20px rgba(0,0,0,.2);
}

/* ---------- Reset & Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Orbitron', Arial, sans-serif;
  letter-spacing: 0.5px;  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  display: flex; flex-direction: column; min-height: 100vh;
  padding-top: 60px;
}
main{flex:1}
img{max-width:100%;display:block}

/* ---------- Accessibilité & utilitaires ---------- */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.nav-header-mobile{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:20px 10px 10px;
}

/* ---------- Header / Navigation ---------- */
header{
  position:fixed;top:0;left:0;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;z-index:1100;
  background:linear-gradient(to right,#1f1f1f,#2a2a2a);
  border-bottom:2px solid var(--blue);
}

/* Burger */
.burger{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:5px;cursor:pointer;z-index:1101;
}
.burger span{width:30px;height:3px;background:var(--gold);transition:.3s}
#menu-toggle:checked + .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#menu-toggle:checked + .burger span:nth-child(2){opacity:0}
#menu-toggle:checked + .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Nav mobile (par défaut) */
.nav-mobile{
  position:fixed;top:0;left:-100%;width:80%;height:100vh;
  background:#282828;transition:left .3s ease;padding-top:70px;overflow-y:auto;z-index:1050;
}
#menu-toggle:checked ~ .nav-mobile{left:0}
.nav-mobile::before{
  content:"Scopum Web";display:block;text-align:center;font-size:2em;font-weight:bold;color:var(--gold);
  padding:20px 10px 10px;
}
.nav-mobile ul{list-style:none}
.nav-mobile li{margin-bottom:5px}
.nav-mobile li a,.submenu-toggle{
  display:block;text-align:center;margin:0 20px;padding:10px;border-radius:10px;
  color:var(--text);text-decoration:none;background:var(--panel);
  transition:.3s;
}
.nav-mobile li a:hover,.submenu-toggle:hover{background:var(--blue);color:#fff}

/* Dropdown (mobile & base) */
.dropdown{position:relative}
.submenu{display:none !important;padding-left:0}
#extra-toggle:checked + .submenu-toggle + .submenu{display:block !important}
.submenu li{opacity:0;transform:translateX(-10px);animation:submenuFade .3s ease forwards}
.submenu li:nth-child(1){animation-delay:.05s}
.submenu li:nth-child(2){animation-delay:.1s}
.submenu li:nth-child(3){animation-delay:.15s}
.submenu li:nth-child(4){animation-delay:.2s}
.submenu li:nth-child(5){animation-delay:.25s}
@keyframes submenuFade{to{opacity:1;transform:translateX(0)}}
.submenu li a{background:#383838;font-size:1em;color:var(--gold)}
.submenu li a:hover{background:var(--blue);color:#fff}

/* Overlay (fermeture mobile) */
.overlay{display:none}
#menu-toggle:checked ~ .overlay{
  display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:1040;
}

/* Desktop nav (>=768px) */
@media(min-width:768px){
  .burger,.overlay,.nav-mobile::before{display:none}
  .nav-mobile{
    position:static;height:auto;width:auto;display:block !important;background:transparent;
    padding-top:0;overflow:visible
  }
  .nav-mobile ul{display:flex;gap:24px;justify-content:flex-end;margin-right:20px}
  .nav-mobile li{margin:0}
  .nav-mobile li a,.submenu-toggle{
    background:transparent;color:var(--gold);margin:0;padding:0 0 2px 0;border-radius:0
  }
  .nav-mobile li a:hover,.submenu-toggle:hover{color:var(--blue);background:transparent}

  /* Dropdown aligné sous "Extra" */
  .dropdown{position:relative}
  .submenu{
    position:absolute;top:110%;right:0;
    background:rgba(40,40,40,.9);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    box-shadow:0 12px 24px rgba(0,0,0,.5);
    min-width:240px;
    padding:8px 0;
    display:none !important;
    opacity:0;visibility:hidden;
    transition:opacity .2s ease;
    backdrop-filter:blur(10px);
  }
  .dropdown:hover .submenu{
    display:block !important;
    opacity:1;visibility:visible;
  }
  .submenu li a{
    padding:12px 16px;margin:0;background:transparent;color:var(--muted);
    display:block;text-align:left;
    transition:background .25s,color .25s;
  }
  .submenu li a:hover{background:#2d2d2d;color:#fff}
}

/* ---------- Footer ---------- */
.footer{background:#111;color:#ccc;padding:60px 20px 30px;font-size:.95em}
.footer-container{
  max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;margin-bottom:30px
}
.footer h3,.footer h4{color:var(--gold);margin-bottom:15px}
.footer ul{list-style:none}
.footer ul li{margin-bottom:10px}
.footer ul li a{color:#ccc;text-decoration:none;transition:color .3s}
.footer ul li a:hover{color:var(--blue)}
.footer .socials{margin-top:10px;display:flex;gap:15px}
.footer .socials a{font-size:1.4em;color:#ccc;transition:.3s}
.footer .socials a:hover{color:var(--blue);transform:scale(1.2)}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;text-align:center;font-size:.85em;color:var(--muted-2)}
.footer-bottom a{color:var(--gold);text-decoration:none;margin:0 5px;transition:.3s}
.footer-bottom a:hover{color:var(--blue);text-shadow:0 0 5px #3ABEF9aa}

/* ---------- UI partagé ---------- */
.input-style{
  width:100%;padding:12px 15px;border-radius:10px;border:2px solid transparent;background:var(--panel);color:#fff;font-size:1em;
  transition:border-color .3s,box-shadow .3s
}
.input-style:focus{border-color:var(--blue);box-shadow:0 0 0 2px #3ABEF950;outline:none}

.btn,
.btn-cta,.btn-envoyer{
  display:inline-block;border-radius:10px;font-weight:700;text-decoration:none;cursor:pointer;transition:.3s
}
.btn-cta{background:transparent;color:var(--blue);padding:12px 28px;border:2px solid var(--blue)}
.btn-cta:hover{background:var(--blue);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(58,190,249,.25)}
.btn-envoyer{background:var(--blue);color:#000;border:none;padding:12px 25px}
.btn-envoyer:hover{background:var(--gold);transform:translateY(-2px)}

/* ---------- Sections partagées ---------- */
.presentation{max-width:900px;margin:0 auto;padding:60px 20px;text-align:center}
.presentation h1{font-size:2.5em;margin-bottom:20px;color:var(--gold)}
.presentation h2{font-size:2em;margin-top:40px;color:var(--blue)}
.presentation p{font-size:1.1em;line-height:1.6;margin-top:15px;color:#fff}

/* ================================
   Scopum Web — Formes 
   ================================ */

/* SW forms (reorg+min) */
.sw-form-container{width:100%;max-width:760px;margin:30px auto 0;background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(145deg,transparent 35%,var(--blue),var(--gold)) border-box;border:2px solid transparent;padding:28px 22px;border-radius:16px;color:var(--text);display:flex;flex-direction:column;gap:20px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.sw-form{display:flex;flex-direction:column;gap:20px}.sw-group{display:flex;flex-direction:column;gap:8px}
.sw-label{color:var(--muted);font-weight:600;font-size:.9rem;letter-spacing:.3px}
.sw-input,.sw-textarea,.sw-select{width:100%;padding:12px 14px;border-radius:10px;color:#fff;background-color:transparent;border:1px solid #414141;font:inherit;transition:border-color .25s,box-shadow .25s,background .25s}
.sw-input::placeholder,.sw-textarea::placeholder{opacity:.6}
.sw-input:focus,.sw-textarea:focus,.sw-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(58,190,249,.25);background:rgba(255,255,255,.02)}
.sw-textarea{min-height:220px;resize:vertical}
.sw-submit{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:10px;cursor:pointer;background:var(--blue);border:1px solid var(--blue);color:#0f0f0f;font-weight:700;transition:transform .15s ease,background .25s ease,border-color .25s ease}
.sw-submit:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-1px)}
.sw-help{color:var(--muted-2);font-size:.9rem}
@media(min-width:768px){.sw-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}}
/* selects dark */
.sw-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--panel-2);border:1px solid #414141;color:#fff}
.sw-select option,.sw-select optgroup{background:#2b2b2b;color:#fff}
/* checklists */
.sw-checkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.sw-check{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid #414141;transition:border-color .25s,background .25s,transform .15s}
.sw-check:hover{border-color:var(--blue);background:#2b2b2b;transform:translateY(-1px)}
.sw-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)}
.sw-check span{color:var(--muted);font-weight:600;letter-spacing:.2px}
/* fieldsets + layout */
.sw-field{border:1px dashed #2e2e2e;border-radius:12px;padding:12px}
.sw-legend-ttl{color:var(--muted);font-weight:700;font-size:.95rem;margin-left:6px}
.sw-grid-2col{display:grid;gap:18px}
@media(min-width:900px){.sw-grid-2col{grid-template-columns:1fr 1fr}}
/* SW accordion (min) */
.sw-accordion{border:1px solid #2e2e2e;border-radius:12px;background:var(--panel);overflow:hidden}
.sw-accordion+.sw-accordion{margin-top:12px}
.sw-accordion summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:10px;user-select:none}
.sw-accordion summary::-webkit-details-marker{display:none}
.sw-accordion summary::after{content:"▸";margin-left:auto;transition:transform .25s;color:var(--blue)}
.sw-accordion[open] summary::after{transform:rotate(90deg)}
.sw-acc-body{padding:14px 16px;border-top:1px dashed #333}
.sw-acc-note{margin-top:6px;font-size:.9rem;color:var(--muted-2)}
/* compacité optionnelle des cases */
.sw-check{padding:10px 12px;border-radius:10px}
.sw-checkgrid{gap:10px}

/* SW aide publique (spaced) */
.sw-aide{background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(145deg,transparent 35%,var(--blue),var(--gold)) border-box;border:2px solid transparent;border-radius:20px;padding:32px 24px;box-shadow:0 12px 34px rgba(0,0,0,.28);max-width:1100px;margin:0 auto}
.sw-aide-intro{color:#fff;margin-bottom:20px;line-height:1.7}
.sw-aide-cols{display:grid;gap:24px;margin-top:6px}
.sw-aide-col h3{color:var(--gold);margin:6px 0 10px 0}
.sw-aide-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sw-aide-list li{background:var(--panel-2);border:1px solid #383838;border-radius:14px;padding:12px 14px;color:#eaeaea;line-height:1.55}
.sw-aide-btn{margin-top:16px}
.sw-aide-note{margin-top:18px;color:var(--muted-2);font-size:1rem}
@media(min-width:860px){.sw-aide-cols{grid-template-columns:1fr 1fr}}

/* SW cards montant (spaced) */
.sw-cards{max-width:1100px;margin:6px auto 0;display:grid;gap:22px}
@media(min-width:860px){.sw-cards{grid-template-columns:repeat(3,1fr)}}
.sw-card{background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(145deg,transparent 35%,var(--blue),var(--gold)) border-box;border:2px solid transparent;border-radius:18px;padding:22px 18px;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.sw-card h3{color:var(--gold);margin-bottom:8px}
.sw-card-big{font-size:1.25rem;color:#fff;margin:6px 0}
.sw-card-cap{color:#fff;margin:2px 0 6px 0}
.sw-card-note{color:var(--muted);margin:0}


/* =================================================================
   Pages
   ================================================================= */

/* ===== Accueil : HERO ===== */
.hero{
  min-height:100vh;padding:100px 20px 40px;display:flex;align-items:center;justify-content:center;
  position:relative;text-align:center;background:radial-gradient(circle at center,#181818 0%,#1a1a1a 100%);overflow:hidden;z-index:1
}
.hero::before{
  content:"";position:absolute;top:50%;left:50%;width:850px;height:850px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(58,190,249,.4) 0%,transparent 65%);
  filter:blur(65px);opacity:.4;animation:heroHalo 6s ease-in-out infinite alternate;z-index:0
}
@keyframes heroHalo{0%{transform:translate(-50%,-50%) scale(1);opacity:.3}100%{transform:translate(-50%,-50%) scale(1.15);opacity:.45}}
.hero::after{
  content:"";position:absolute;inset:0;background:repeating-linear-gradient(120deg,rgba(58,190,249,.04),rgba(58,190,249,.04) 2px,transparent 2px,transparent 40px);
  background-size:300% 300%;animation:heroStripes 30s linear infinite;mix-blend-mode:lighten;opacity:.1;z-index:0
}
@keyframes heroStripes{0%{background-position:0 0}100%{background-position:250% 100%}}
.hero-content{position:relative;z-index:2}
.hero-text{font-size:2.8em;font-weight:700;color:var(--gold);margin-bottom:25px}
.hero-highlight{color:var(--blue);display:inline-block;transition:opacity .8s,transform .8s}

/* ===== Accueil : Why Scopum (orbites) ===== */
.why-scopum{padding:80px 20px;background:#1c1c1c;text-align:center}
.why-scopum h2{font-size:2em;color:var(--gold);margin-bottom:40px}
.orbite-zone{
  position:relative;width:100%;max-width:550px;height:460px;margin:0 auto;
  /* FIX: éviter que les bulles se coupent */
  overflow:visible;
  background:#1c1c1c
}
/* plus grand sur desktop large */
@media(min-width:1024px){
  .orbite-zone{height:520px}
}

.core{position:absolute;top:50%;left:50%;width:120px;height:120px;transform:translate(-50%, -50%);border-radius:50%;overflow:hidden;z-index:10}
.core img{width:100%;height:100%;object-fit:contain}

/* Bulles */
.orbite{
  position:absolute;width:115px;height:115px;background:var(--panel);color:var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;text-align:center;box-shadow:0 0 10px rgba(0,0,0,.4);
  z-index:11;opacity:0;transform:scale(.7);transition:opacity .6s,transform .6s
}
.orbite.visible{opacity:1;transform:scale(1.1)}
.orbite:hover{background:var(--blue);color:#fff}
.orb1{top:8%;left:62%}.orb2{top:28%;left:8%}.orb3{top:70%;left:4%}.orb4{top:78%;left:60%}.orb5{top:1%;left:25%}.orb6{top:50%;left:67%}

/* Lignes SVG */
.orbite-lines{
  position:absolute;top:0;left:0;width:100%;height:100%;
  z-index:5;pointer-events:none;display:block;
}
.orbite-lines line{
  stroke:var(--blue);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1s ease;
}
.orbite-lines.visible line{stroke-dashoffset:0}

@media(max-width:700px){.orbite-zone{height:600px}}

/* ===== Accueil : Services ===== */
.services{padding:80px 20px;background:var(--bg-2);text-align:center}
.services h2{font-size:2em;margin-bottom:40px;color:var(--gold)}
.services-grid{display:grid;grid-template-columns:1fr;gap:30px;max-width:1000px;margin:0 auto}
@media(min-width:768px){.services-grid{grid-template-columns:repeat(2,1fr)}}
.service{background:var(--panel);border-radius:12px;padding:30px 20px;box-shadow:var(--shadow);transition:transform .3s}
.service:hover{transform:translateY(-5px)}
.service h3{font-size:1.4em;margin-bottom:10px;color:var(--blue)}
.service p{font-size:1em;color:#ddd}

/* ===== Accueil : Portfolio ===== */
.portfolio{padding:80px 20px;background:#222;text-align:center}
.portfolio h2{font-size:2em;color:var(--gold);margin-bottom:40px}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;max-width:1000px;margin:0 auto}
.portfolio-item{
  display:flex;flex-direction:column;align-items:center;background:var(--panel);padding:20px;border-radius:12px;
  text-decoration:none;transition:.3s;box-shadow:none
}
.portfolio-item:hover{transform:translateY(-5px);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.portfolio-item img{max-width:100px;height:auto;margin-bottom:10px;filter:drop-shadow(0 0 4px #00000060)}
.portfolio-item span{color:#fff;font-weight:700;font-size:1em}

/* ===== Qui sommes-nous ===== */
.intro-block{
  display:flex;align-items:center;justify-content:center;gap:40px;margin:60px 0;flex-wrap:wrap
}
.intro-photo img{
  width:300px;height:auto;border-radius:20px;box-shadow:0 12px 24px rgba(0,0,0,.5);transition:transform .3s
}
.intro-photo img:hover{transform:scale(1.05)}
.intro-texte{max-width:500px;text-align:left}
.intro-texte h2{color:var(--blue);font-size:2em;margin-bottom:20px}
.intro-texte p{color:#fff;font-size:1.1em;line-height:1.6}
.intro-block.reverse{flex-direction:row-reverse}
@media(max-width:768px){
  .intro-block,.intro-block.reverse{flex-direction:column}
  .intro-texte{text-align:center}
}

.section-bloc{max-width:900px;margin:80px auto;padding:0 20px;text-align:center}
.section-bloc h2{color:var(--gold);font-size:2em;margin-bottom:20px;text-transform:uppercase}
.section-bloc p,.section-bloc li{color:#fff;font-size:1.1em;line-height:1.6}

.valeurs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:30px}
.valeurs-grid div{
  background:var(--panel);padding:20px;border-radius:15px;box-shadow:0 5px 15px rgba(0,0,0,.2);
  font-size:1.1em;color:var(--blue);display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .3s
}
.valeurs-grid div:hover{transform:scale(1.05)}

.outils ul{list-style:none;margin-top:30px}
.outils li{margin:10px 0;text-align:left}

/* ===== Pages légales (bouton accueil) ===== */
#Accueil-btn{
  margin-right:70%;display:inline-block;padding:10px 20px;border-radius:10px;
  background:var(--blue);color:#1c1c1c;font-weight:bold;text-decoration:none;box-shadow:0 4px 12px rgba(58,190,249,.3);
  transition:.3s;
}
#Accueil-btn:hover{background:var(--gold);color:#000;transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,210,119,.4)}