/* =========================================================
   Maître Poulpi — style.css  (menu "bras par carte" v3)
   ========================================================= */
:root{
  --bg:#0b1220; --fg:#e2e8f0; --muted:#9aa6b2;
  --line:rgba(255,255,255,.08); --soft:rgba(255,255,255,.06);
  --accent:#38bdf8;
}

/* Base */
html,body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.55 system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}

/* Header fixe */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;
  backdrop-filter:saturate(120%) blur(6px);background:rgba(2,6,23,.6);
  border-bottom:1px solid var(--line)}
body{padding-top:56px}
.h-row{display:flex;align-items:center;justify-content:space-between;height:56px}
.slogan-inline{display:flex;align-items:center;gap:10px;font-size:14px;color:#cbd5e1}
.brand-avatar{width:22px;height:22px;border-radius:4px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.4)}
.burger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--fg)}
.burger:hover{background:rgba(255,255,255,.08)}

/* ---------------- Hero (accueil) ---------------- */
.hero{position:relative;overflow:hidden;padding:64px 0 28px;background:
  radial-gradient(60% 60% at 70% 0%, rgba(14,165,233,.18), rgba(2,6,23,0)),
  radial-gradient(40% 30% at 10% 10%, rgba(99,102,241,.10), rgba(2,6,23,0))}
.title{font-weight:800;font-size:clamp(2rem,3vw,3rem);line-height:1.1;margin:0 0 14px}
.intro{max-width:62ch}
.hero-inner{display:grid;gap:20px}
@media(min-width:980px){.hero-inner{grid-template-columns:1fr 1fr}}
.hero-octo{display:flex;align-items:center;justify-content:center;min-height:340px}
.octo-deco{width:340px;height:340px;filter:drop-shadow(0 20px 50px rgba(14,165,233,.35))}
.hero-tentacle{stroke:url(#octoTent);stroke-width:12;fill:none;stroke-linecap:round;opacity:.75}
.hero-tentacle.bg{stroke:rgba(255,255,255,.08);stroke-width:16;opacity:.35}
.hero-eyes .ball{transform-origin:center;transform:scaleY(var(--eye-scale,1));transition:transform 80ms ease}

/* ---------------- Grids / Cards ---------------- */
.grid{display:grid;gap:16px}
.quick-nav.eight{grid-template-columns:1fr}
@media(min-width:640px){.quick-nav.eight{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.quick-nav.eight{grid-template-columns:repeat(4,1fr)}}

.card{display:flex;align-items:center;gap:10px;justify-content:space-between;
  border:1px solid var(--line);border-radius:16px;padding:14px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.card span{color:var(--muted);font-size:13px;margin-left:auto;padding-left:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card:hover{transform:translateY(-1px);
  border-color:rgba(56,189,248,.35);box-shadow:0 6px 24px rgba(14,165,233,.18)}

/* Section header */
.section-hero{padding:42px 0 10px;background:
  radial-gradient(60% 60% at 70% 0%, rgba(14,165,233,.14), rgba(2,6,23,0)),
  radial-gradient(40% 30% at 10% 10%, rgba(99,102,241,.08), rgba(2,6,23,0))}

/* Footer */
footer{border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:14px}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.socials{display:flex;gap:12px}

/* ==================== OVERLAY — BLOC UNIQUE, PROPRE ==================== */
/* Scope large pour couvrir id #overlay ou classe .overlay */
:is(#overlay,.overlay){position:fixed;inset:0;z-index:70}
:is(#overlay,.overlay)[hidden]{display:none}

:is(#overlay,.overlay) .overlay-bg{
  position:absolute;inset:0;background:rgba(8,11,19,.92);
  backdrop-filter:blur(12px) saturate(120%)
}
:is(#overlay,.overlay) .overlay-inner{
  position:relative;display:grid;grid-template-rows:auto 1fr;gap:8px;height:100%
}

/* — tête centrée et au-dessus des boutons — */
:is(#overlay,.overlay) .overlay-head{
  position:relative;width:100%;display:grid;place-items:center;
  margin:10px 0 6px;overflow:visible;z-index:50
}
:is(#overlay,.overlay) .octo-head{z-index:51}
:is(#overlay,.overlay) .overlay-navbtn{
  position:absolute;top:58%;transform:translateY(-50%);z-index:49
}
/* positionnement symétrique des boutons autour du centre */
@media (min-width:481px){
  :is(#overlay,.overlay) .overlay-navbtn.home { left:  calc(50% - 180px); }
  :is(#overlay,.overlay) .overlay-navbtn.links{ right: calc(50% - 180px); }
}
@media (max-width:480px){
  :is(#overlay,.overlay) .overlay-navbtn.home { left:  calc(50% - 130px); }
  :is(#overlay,.overlay) .overlay-navbtn.links{ right: calc(50% - 130px); }
}

/* — colonne centrée, largeur bornée, pas de scroll horizontal — */
:is(#overlay,.overlay) .overlay-stage{display:grid;justify-items:center;height:100%}
:is(#overlay,.overlay) .overlay-menu{position:relative;z-index:2}
:is(#overlay,.overlay) .overlay-menu.column{
  position:relative;box-sizing:border-box;margin:0 auto;
  width:clamp(320px,92vw,420px);max-width:420px;
  padding:8px 14px 16px;overflow-x:hidden;
  display:grid;gap:12px
}

/* — cartes compactes ; descriptif plus petit et plus large (texte qui rentre) — */
:is(#overlay,.overlay) .overlay-menu.column a{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:52px;padding:8px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:rgba(18,24,38,.78);overflow:hidden
}
:is(#overlay,.overlay) .overlay-menu.column a .ttl{
  flex:1 1 auto;min-width:0;font-size:1rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
:is(#overlay,.overlay) .overlay-menu.column a .desc{
  flex:0 1 58%;max-width:58%;font-size:.9rem;opacity:.88;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* — on neutralise totalement les tentacules (on remettra un décor plus tard) — */
:is(#overlay,.overlay) .menu-arm{display:none}

/* accessibilité / motion */
:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}
@media (prefers-reduced-motion:reduce){ :is(#overlay,.overlay) .menu-arm{animation:none} }
/* ================== /OVERLAY — BLOC UNIQUE, PROPRE ===================== */

/* === Overlay tune v7 — compact + scroll mobile + jolis boutons === */

/* 1) Le menu DOIT scroller (smartphone) */
:is(#overlay,.overlay){
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
:is(#overlay,.overlay) .overlay-inner{ min-height: 100% !important; }

/* 2) Cartes plus compactes + hover animé */
:is(#overlay,.overlay) .overlay-menu.column{ gap: 10px !important; }
:is(#overlay,.overlay) .overlay-menu.column a{
  min-height: 46px !important;          /* ↓ avant ~52px */
  padding: 6px 12px !important;          /* ↓ padding vertical */
  border-radius: 12px !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
:is(#overlay,.overlay) .overlay-menu.column a:hover{
  transform: translateY(-2px);
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 8px 24px rgba(14,165,233,.18);
}

/* 3) Boutons Accueil/Liens assortis au style des cartes */
:is(#overlay,.overlay) .overlay-navbtn{
  padding: 6px 12px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  background: rgba(18,24,38,.78) !important;
  backdrop-filter: blur(6px) !important;
  font-size: .9rem !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
:is(#overlay,.overlay) .overlay-navbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 8px 24px rgba(14,165,233,.18);
}
/* rapprocher visuellement la 1re carte */
:is(#overlay,.overlay) .overlay-head{ margin: 8px 0 2px !important; }

/* 4) Petits écrans très étroits : desc un peu plus fine */
@media (max-width: 360px){
  :is(#overlay,.overlay) .overlay-menu.column a .desc{
    max-width: 60% !important;
    font-size: .85rem !important;
  }
}

/* 5) Confort de scroll dans l’overlay */
:is(#overlay,.overlay) *{ overscroll-behavior: contain; }

/* === Overlay tune v8 — chevauchement tête + boutons icône-seule et bord-à-bord === */

/* Variables d’agencement de l’overlay */
:is(#overlay,.overlay){
  --gap: 10px;                               /* écart entre cartes */
  --w: clamp(320px, 92vw, 420px);            /* largeur de la colonne */
  --overlap: 6px;                             /* chevauchement de la 1re carte sous la tête */
}

/* Colonne & tête: même largeur, centrées */
:is(#overlay,.overlay) .overlay-head,
:is(#overlay,.overlay) .overlay-menu.column{
  width: var(--w) !important;
  max-width: var(--w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 1) Chevauchement : on supprime l’espace et on remonte un chouïa la colonne */
:is(#overlay,.overlay) .overlay-head{ margin-bottom: 0 !important; }
:is(#overlay,.overlay) .overlay-menu.column{
  margin-top: calc(-1 * var(--overlap)) !important;   /* la 1ʳᵉ carte “passe sous” la tête */
}

/* 2) Boutons Accueil/Liens = icône-seule, posés au bord de la colonne,
      juste au-dessus de la 1ʳᵉ carte avec le même gap */
:is(#overlay,.overlay) .overlay-navbtn{
  position: absolute !important;
  inset: auto 0 auto 0 !important;                    /* on s’aligne sur la largeur de .overlay-head */
  bottom: calc(var(--gap) + var(--overlap)) !important; /* même écart que les cartes */
  transform: none !important;
  width: 34px !important; height: 34px !important;
  display: grid !important; place-items: center !important;
  padding: 0 !important; border-radius: 999px !important;
  font-size: 0 !important;                             /* on masque le texte */
}
:is(#overlay,.overlay) .overlay-navbtn.home{  left: 0 !important;  right: auto !important; }
:is(#overlay,.overlay) .overlay-navbtn.links{ right: 0 !important; left:  auto !important; }

/* Icônes via pseudo-éléments (le texte est masqué) */
:is(#overlay,.overlay) .overlay-navbtn.home::before{  content: "🏠"; font-size: 16px; }
:is(#overlay,.overlay) .overlay-navbtn.links::before{ content: "🔗"; font-size: 16px; }

/* 3) Mobile : on garde le principe, on resserre un peu l’offset bord-à-bord si besoin */
@media (max-width: 480px){
  :is(#overlay,.overlay){ --w: clamp(300px, 94vw, 340px); --gap: 10px; --overlap: 6px; }
}

/* chevauchement réel : on enlève l'espace de grid et on remonte la rangée */
:is(#overlay,.overlay) .overlay-inner{ gap: 0 !important; } /* plus de « gap » entre tête et contenu */
:is(#overlay,.overlay){ --overlap: 20px; }                  /* ajuste ici: 0–14px selon l'effet voulu */
:is(#overlay,.overlay) .overlay-stage{ margin-top: calc(-1 * var(--overlap)) !important; }

/* === Overlay tune v9 — chevauchement + calques corrects === */

/* 1) On supprime l'espace entre la tête et la colonne
      et on augmente VRAIMENT le chevauchement */
:is(#overlay,.overlay) .overlay-inner{ gap: 0 !important; }

/* ajuste ici la valeur : 24–32px selon l'effet souhaité */
:is(#overlay,.overlay){ --overlap: 20px; }
@media (max-width: 480px){
  :is(#overlay,.overlay){ --overlap: 20px; } /* un peu moins sur mobile */
}

/* la RANGÉE entière (overlay-stage) remonte sous la tête */
:is(#overlay,.overlay) .overlay-stage{
  margin-top: calc(-1 * var(--overlap)) !important;
  position: relative !important;
  z-index: 60 !important;   /* cartes AU-DESSUS de la tête */
}

/* 2) Ordre des calques : tête sous la 1re carte, boutons au-dessus de tout */
:is(#overlay,.overlay) .overlay-head{ z-index: 40 !important; }
:is(#overlay,.overlay) .octo-head{  z-index: 40 !important; }
:is(#overlay,.overlay) .overlay-navbtn{ z-index: 70 !important; }  /* clics garantis */

/* === Overlay tune v10 — masque anti-transparence + boutons plus hauts === */

/* 0) règle l’intensité du chevauchement ici (tu as dit ~20px) */
:is(#overlay,.overlay){ --overlap: 20px; }

/* 1) Masque opaque sous la 1ʳᵉ carte (cache la tête derrière) */
:is(#overlay,.overlay) .overlay-stage{
  position: relative !important;
}
:is(#overlay,.overlay) .overlay-stage::before{
  content:"";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width: var(--w);                         /* même largeur que la colonne */
  height: calc(var(--overlap) + 2px);      /* 2px de confort */
  background: rgb(18,24,38);               /* version OPAQUE de la carte */
  border-top-left-radius:12px;             /* même rayon que les cartes */
  border-top-right-radius:12px;
  z-index:59;                              /* au-dessus de la tête (40) et
                                              juste sous les cartes (60) */
  pointer-events:none;
}

/* 2) Petits boutons : on les remonte un peu */
:is(#overlay,.overlay) .overlay-navbtn{
  bottom: calc(var(--gap) + var(--overlap) + 8px) !important;
}
@media (max-width:480px){
  :is(#overlay,.overlay) .overlay-navbtn{
    bottom: calc(var(--gap) + var(--overlap) + 10px) !important;
  }
}

/* v10.1 — retire le bandeau et rend la 1ʳᵉ carte opaque */

/* 1) on supprime le faux masque que j’avais ajouté */
:is(#overlay,.overlay) .overlay-stage::before{
  content: none !important;
  display: none !important;
}

/* 2) la 1ʳᵉ carte devient opaque (cache la tête), le reste ne bouge pas */
:is(#overlay,.overlay) .overlay-menu.column a:first-child{
  background: rgb(18,24,38) !important;   /* même teinte que tes cartes, mais OPAQUE */
}

/* (optionnel) si tu veux encore 2–3 px d’air pour les mini-boutons */
:is(#overlay,.overlay) .overlay-navbtn{
  bottom: calc(var(--gap) + var(--overlap) + 12px) !important;
}

/* === Kraken push (click animation) === */
.kraken-arm{
  position:absolute; width:120px; height:32px; border-radius:18px;
  background:
    radial-gradient(120% 100% at 10% 50%, #7dd3fc 0%, #0ea5e9 63%, rgba(14,165,233,0) 66%),
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  box-shadow: 0 6px 18px rgba(14,165,233,.25), inset 0 0 0 8px rgba(255,255,255,.08);
  filter: drop-shadow(0 6px 14px rgba(14,165,233,.25));
  z-index: 66; pointer-events:none; opacity:0;
  transform: translate(var(--xStart,0),var(--y,0)) rotate(var(--rot,0deg)) scaleX(var(--sx,1));
  animation: armPop .22s ease-out forwards;
}
@keyframes armPop{
  0%{opacity:0; transform: translate(var(--xStart,0),var(--y,0)) rotate(var(--rot,0deg)) scaleX(var(--sx,1)) }
  100%{opacity:1; transform: translate(var(--xEnd,0),var(--y,0)) rotate(var(--rot,0deg)) scaleX(var(--sx,1)) }
}

/* Carte “poussée” vers la droite */
.link-pushed{
  animation: pushRight 2s cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes pushRight{
  0%{ transform: translateX(0) }
  55%{ transform: translateX(500px) }
  100%{ transform: translateX(0) }
}

/* Carte “poussée” vers la gauche (pour le mode qui pousse les autres) */
.link-pushed-left{
  animation: pushLeft 2s cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes pushLeft{
  0%{ transform: translateX(0) }
  55%{ transform: translateX(-500px) }
  100%{ transform: translateX(0) }
}


/* === Kraken push v3 — bras bien calés + éjection totale === */
.kraken-arm{
  position:absolute; left:0; top:0;
  width:120px; height:34px; border-radius:20px;
  background:
    radial-gradient(120% 100% at 10% 50%, #7dd3fc 0%, #0ea5e9 64%, rgba(14,165,233,0) 67%),
    linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  box-shadow: 0 10px 24px rgba(14,165,233,.30), inset 0 0 0 9px rgba(255,255,255,.10);
  filter: drop-shadow(0 6px 16px rgba(14,165,233,.25));
  z-index: 1000; pointer-events:none; opacity:0;
  transform: translate(var(--xStart,0), var(--y,0)) rotate(-6deg) scaleX(var(--sx,1));
  animation: armSlide var(--armDur,320ms) ease-out forwards;
}
@keyframes armSlide{
  0%   { opacity:0; transform: translate(var(--xStart,0), var(--y,0)) rotate(-6deg) scaleX(var(--sx,1)); }
  100% { opacity:1; transform: translate(var(--xEnd,0),   var(--y,0)) rotate(-6deg) scaleX(var(--sx,1)); }
}

/* éjection : on sort vraiment hors écran (peu importe la position du menu) */
.link-eject{
  animation: ejectLeft var(--ejectDur,560ms) cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes ejectLeft{
  0%   { transform: translateX(0);    opacity:1; }
  45%  { transform: translateX(-32px) }
  100% { transform: translateX(-120vw); opacity:0; } /* off-screen garanti */
}


/* FIX transforms: on scale d'abord, puis on translate (sinon la translation est "retournée") */
.kraken-arm{
  transform: scaleX(var(--sx,1)) rotate(-6deg) translate(var(--xStart,0), var(--y,0)) !important;
}
@keyframes armSlide{
  0%   { opacity:0; transform: scaleX(var(--sx,1)) rotate(-6deg) translate(var(--xStart,0), var(--y,0)); }
  100% { opacity:1; transform: scaleX(var(--sx,1)) rotate(-6deg) translate(var(--xEnd,0),   var(--y,0)); }
}

/* === Kraken push v4 (noms uniques) === */
.kraken-arm{ /* bras bien visibles, au-dessus de tout */
  position:absolute; left:0; top:0;
  width:120px; height:34px; border-radius:20px;
  background:
    radial-gradient(120% 100% at 10% 50%, #7dd3fc 0%, #0ea5e9 64%, rgba(14,165,233,0) 67%),
    linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  box-shadow: 0 10px 24px rgba(14,165,233,.30), inset 0 0 0 9px rgba(255,255,255,.10);
  filter: drop-shadow(0 6px 16px rgba(14,165,233,.25));
  z-index: 2000; pointer-events:none; opacity:0;
  transform: scaleX(var(--sx,1)) rotate(-6deg) translate3d(var(--xStart,0), var(--y,0), 0);
  animation: armSlideV4 var(--armDur,380ms) ease-out forwards;
}
@keyframes armSlideV4{
  0%   { opacity:0; transform: scaleX(var(--sx,1)) rotate(-6deg) translate3d(var(--xStart,0), var(--y,0), 0); }
  100% { opacity:1; transform: scaleX(var(--sx,1)) rotate(-6deg) translate3d(var(--xEnd,0),   var(--y,0), 0); }
}

/* éjection : on sort VRAIMENT hors écran, quoi qu’il arrive */
.link-eject{
  animation: ejectLeftV4 var(--ejectDur,400ms) cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes ejectLeftV4{
  0%   { transform: translateX(0);      opacity:1; }
  45%  { transform: translateX(-32px);  opacity:1; }
  100% { transform: translateX(-140vw); opacity:0; } /* off-screen garanti */
}

/* mobile : un tempo un peu plus lent (lisible) */
@media (max-width:480px){
  .kraken-arm{ animation-duration: var(--armDurMb,200ms); }
  .link-eject{ animation-duration: var(--ejectDurMb,300ms); }
}

/* force la version V4/V5 des bras (au cas où d’anciennes règles traînent) */
.kraken-arm{
  z-index: 2000 !important;
  transform: scaleX(var(--sx,1)) rotate(-6deg) translate3d(var(--xStart,0), var(--y,0), 0) !important;
  animation: armSlideV4 var(--armDur,380ms) ease-out forwards !important;
}