:root{
      --bg0:#F6F8FF;
      --bg1:#EEF2FF;
      --stroke: rgba(20,28,60,.10);
      --stroke2: rgba(20,28,60,.14);

      --text:#0B1020;
      --muted: rgba(11,16,32,.72);
      --muted2: rgba(11,16,32,.55);

      --shadow: 0 18px 60px rgba(16,24,40,.12);
      --shadow2: 0 10px 30px rgba(16,24,40,.10);

      --accent:#6D5CFF;
      --accent2:#1F8CFF;

      --r14:14px;
      --r20:20px;
      --max:1100px;

      --ease:cubic-bezier(.2,.8,.2,1);
      --dur:240ms;

      --ring: 0 0 0 3px rgba(109,92,255,.22), 0 0 0 1px rgba(109,92,255,.28) inset;

      /* ✅ largeur de bande pilotée en JS (s'adapte au menu, une seule ligne) */
      --sidePx: 320px;
      --sideMin: 285px;
      --sideMax: 520px;

      --btnBg: rgba(255,255,255,.70);
      --btnBgHover: rgba(255,255,255,.92);
      --panelBgA: rgba(246,248,255,.86);
      --panelBgB: rgba(246,248,255,.62);

      --iconColor: rgba(11,16,32,.92);
      --moonColor: rgba(11,16,32,.92);

      --fieldBg: rgba(255,255,255,.62);
      --fieldBgFocus: rgba(255,255,255,.82);
      --fieldText: rgba(11,16,32,.92);
      --placeholder: rgba(11,16,32,.55);
    }

    html[data-theme="dark"]{
      --bg0:#0B0F1E;
      --bg1:#070A14;

      --stroke: rgba(255,255,255,.10);
      --stroke2: rgba(255,255,255,.16);

      --text:#F3F5FF;
      --muted: rgba(243,245,255,.78);
      --muted2: rgba(243,245,255,.58);

      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --shadow2: 0 10px 30px rgba(0,0,0,.40);

      --btnBg: rgba(18,22,40,.70);
      --btnBgHover: rgba(18,22,40,.92);

      --panelBgA: rgba(10,14,28,.86);
      --panelBgB: rgba(10,14,28,.62);

      --iconColor: rgba(243,245,255,.92);
      --moonColor: rgba(255,255,255,.98);

      --fieldBg: rgba(18,22,40,.62);
      --fieldBgFocus: rgba(18,22,40,.86);
      --fieldText: rgba(243,245,255,.92);
      --placeholder: rgba(243,245,255,.55);
    }

    *,*::before,*::after{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }

    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text",
                   "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;

      color:var(--text);
      background:
        radial-gradient(1100px 700px at 10% 0%, rgba(109,92,255,.14), transparent 58%),
        radial-gradient(900px 520px at 90% 10%, rgba(31,140,255,.12), transparent 62%),
        radial-gradient(900px 650px at 50% 100%, rgba(109,92,255,.10), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100svh;
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration:none; }
    p{ margin:0 0 1rem; }
    h1,h2,h3{ margin:0 0 .75rem; line-height:1.15; letter-spacing:-.02em; }

    /* ✅ bouton maison en haut à gauche */
    .home-fab{
      position:fixed;
      top: 16px;
      left: 16px;
      z-index: 90;
      width: 46px;
      height: 46px;
      border-radius:999px;
      display:grid;
      place-items:center;
      border:1px solid var(--stroke);
      background: var(--btnBg);
      box-shadow: 0 16px 44px rgba(16,24,40,.12);
      transition: transform var(--dur) var(--ease),
                  box-shadow var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  background var(--dur) var(--ease);
      color: var(--iconColor);
    }
    .home-fab:hover{
      transform: translateY(-2px);
      border-color: rgba(109,92,255,.22);
      background: var(--btnBgHover);
      box-shadow: 0 18px 60px rgba(16,24,40,.14);
    }
    html[data-theme="dark"] .home-fab{ box-shadow: 0 16px 44px rgba(0,0,0,.45); }
    html[data-theme="dark"] .home-fab:hover{ box-shadow: 0 18px 60px rgba(0,0,0,.55); }
    .home-fab:focus-visible{ outline:none; box-shadow: var(--ring); }

    /* ✅ back to top (rond, en bas à droite mais à gauche de la sidebar) */
    .to-top{
      position:fixed;
      right: calc(clamp(var(--sideMin), var(--sidePx), var(--sideMax)) + 16px);
      bottom: 16px;
      z-index: 85;
      width: 46px;
      height: 46px;
      border-radius: 999px;
      display:grid;
      place-items:center;
      border:1px solid var(--stroke);
      background: var(--btnBg);
      box-shadow: 0 16px 44px rgba(16,24,40,.12);
      transition: transform var(--dur) var(--ease),
                  box-shadow var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  background var(--dur) var(--ease),
                  opacity var(--dur) var(--ease);
      color: var(--iconColor);
      opacity: 0;
      pointer-events: none;
    }
    .to-top:hover{
      transform: translateY(-2px);
      border-color: rgba(109,92,255,.22);
      background: var(--btnBgHover);
      box-shadow: 0 18px 60px rgba(16,24,40,.14);
    }
    .to-top:focus-visible{ outline:none; box-shadow: var(--ring); }
    html[data-theme="dark"] .to-top{ box-shadow: 0 16px 44px rgba(0,0,0,.45); }
    html[data-theme="dark"] .to-top:hover{ box-shadow: 0 18px 60px rgba(0,0,0,.55); }

    .to-top.is-visible{
      opacity: 1;
      pointer-events: auto;
    }

    @media (max-width: 980px){
      .to-top{
        right: 16px; /* sidebar en haut sticky => bouton normal en bas à droite */
      }
    }

    .layout{ position:relative; min-height:100svh; }

    .sidebar{
      position:fixed;
      top:0; right:0; bottom:0;
      width: clamp(var(--sideMin), var(--sidePx), var(--sideMax));
      z-index:50;

      backdrop-filter: blur(14px);
      background: linear-gradient(180deg, var(--panelBgA), var(--panelBgB));
      border-left:1px solid rgba(20,28,60,.16);

      box-shadow:
        -18px 0 40px rgba(16,24,40,.12),
        -6px 0 16px rgba(16,24,40,.10),
        -1px 0 0 rgba(20,28,60,.08) inset;

      display:flex;
      flex-direction:column;
      padding: 1rem .9rem .9rem;
      gap: .75rem;
      overflow: hidden;
    }
    html[data-theme="dark"] .sidebar{
      border-left:1px solid rgba(255,255,255,.14);
      box-shadow:
        -18px 0 40px rgba(0,0,0,.45),
        -6px 0 16px rgba(0,0,0,.35),
        -1px 0 0 rgba(255,255,255,.06) inset;
    }

    /* ✅ contenu centré verticalement */
    .content{
      margin-right: clamp(var(--sideMin), var(--sidePx), var(--sideMax));
      min-height:100svh;
      display:flex;
      align-items:center;
    }
    main{ width:100%; padding: 1.1rem 0 3rem; }

    .container{
      width:min(var(--max), calc(100% - 2rem));
      margin-inline:auto;
    }

    /* ✅ zone top de la bande : menu + toggle dessous à droite */
    .side-top{
      display:flex;
      flex-direction:column;
      gap:.55rem;
      align-items:stretch;
      flex: 0 0 auto;
    }

    .side-menu-top{
      width:100%;
      display:flex;
      justify-content:center;
      min-width: 0;
    }

    /* ✅ menu toujours sur une seule ligne */
    .nav-links{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:.25rem;
      padding:.35rem .35rem;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.65);
      box-shadow: 0 10px 26px rgba(16,24,40,.08);
      flex-wrap:nowrap;
      white-space:nowrap;
      max-width:none;
    }
    html[data-theme="dark"] .nav-links{
      background: rgba(18,22,40,.65);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }

    .nav-link{
      position:relative;
      padding:.55rem .85rem;
      border-radius:999px;
      font-weight:650;
      color: rgba(11,16,32,.76);
      transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
      outline:none;
    }
    html[data-theme="dark"] .nav-link{ color: rgba(243,245,255,.74); }

    .nav-link:hover{
      background: rgba(109,92,255,.10);
      color: rgba(11,16,32,.92);
      transform: translateY(-1px);
    }
    html[data-theme="dark"] .nav-link:hover{
      color: rgba(243,245,255,.92);
      background: rgba(109,92,255,.14);
    }

    .nav-link:focus-visible{ box-shadow:var(--ring); }
    .nav-link::after{
      content:"";
      position:absolute;
      left:18px; right:18px; bottom:8px;
      height:2px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      border-radius:999px;
      transform: scaleX(0);
      transform-origin:left;
      transition: transform 260ms var(--ease);
      opacity:.9;
    }
    .nav-link:hover::after{ transform:scaleX(1); }
    .nav-link.is-active{
      background: rgba(109,92,255,.12);
      color: var(--text);
      box-shadow: 0 0 0 1px rgba(109,92,255,.18) inset;
    }
    .nav-link.is-active::after{ transform:scaleX(1); }

    .icon{
      width:22px;
      height:22px;
      display:block;
      color: currentColor;
    }

    /* ✅ bouton mode nuit sous le menu, à droite */
    .theme-fab{
      position: static;
      width: 46px;
      height: 46px;
      padding:0;
      border-radius:999px;
      display:grid;
      place-items:center;
      border:1px solid var(--stroke);
      background: var(--btnBg);
      box-shadow: 0 16px 44px rgba(16,24,40,.12);
      transition: transform var(--dur) var(--ease),
                  box-shadow var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  background var(--dur) var(--ease);
      color: var(--moonColor);
      cursor:pointer;
      margin-left:auto;
    }
    .theme-fab:hover{
      transform: translateY(-2px);
      border-color: rgba(109,92,255,.22);
      background: var(--btnBgHover);
      box-shadow: 0 18px 60px rgba(16,24,40,.14);
    }
    html[data-theme="dark"] .theme-fab{ box-shadow: 0 16px 44px rgba(0,0,0,.45); }
    html[data-theme="dark"] .theme-fab:hover{ box-shadow: 0 18px 60px rgba(0,0,0,.55); }
    .theme-fab:focus-visible{ outline:none; box-shadow: var(--ring); }

    /* ✅ zone centre : gif centré verticalement avec espace égal au-dessus/dessous */
    .side-center{
      flex: 1 1 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: .5rem 0;
      min-height: 0;
    }

    .side-gif{ display:block; width:100%; height:240px; }
    .side-gif canvas{ width:100%; height:100%; display:block; }
    .side-gif img{
      display:block;
      width:auto;
      height:auto;
      max-width:100%;
      border-radius:0;
      box-shadow:none;
      background:none;
      border:0;
      outline:0;
      margin-inline:auto;
    }

    /* ✅ bas de bande : boutons + me contacter + footer */
    .side-bottom{
      flex: 0 0 auto;
      display:flex;
      flex-direction:column;
      gap:.7rem;
      align-items:stretch;
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:.72rem 1rem;
      border-radius: var(--r14);
      border:1px solid var(--stroke);
      background: var(--btnBg);
      color: rgba(11,16,32,.92);
      font-weight:750;
      cursor:pointer;
      transition: transform var(--dur) var(--ease),
                  box-shadow var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  background var(--dur) var(--ease);
      user-select:none;
      -webkit-tap-highlight-color: transparent;
      white-space:nowrap;
    }
    html[data-theme="dark"] .btn{ color: rgba(243,245,255,.92); }
    .btn:hover{
      --hover-scale: 1.03;
      transform: translateY(-2px) scale(var(--hover-scale, 1));
      border-color: rgba(109,92,255,.22);
      box-shadow: 0 16px 44px rgba(16,24,40,.12);
      background: var(--btnBgHover);
    }
    html[data-theme="dark"] .btn:hover{ box-shadow: 0 16px 44px rgba(0,0,0,.45); }
    .btn:focus-visible{ outline:none; box-shadow:var(--ring); }

    /* ✅ 3 boutons sur une ligne, CV moins large, les 2 autres récupèrent le reste */
    .side-cta{
      width:100%;
      display:flex;
      align-items:stretch;
      justify-content:stretch;
      gap:.6rem;
      flex-wrap:nowrap;
    }
    .side-cta .btn{
      flex: 1 1 0;
      width: 0;
      justify-content:center;
    }
    .side-cta .btn-cv{ flex: .65 1 0; }

    .contact-cta{
      width:100%;
      justify-content:center;
      font-weight:900;
    }

    .side-footer{
      width:100%;
      padding-top: .75rem;
      border-top:1px solid var(--stroke);
      text-align:center;
    }
    .muted{ color:var(--muted2); margin:0; }
    .side-footer .muted{
      font-size:.88rem;
      letter-spacing:-.01em;
      line-height:1.4;
    }
    .hero{ margin-top: 8rem;}
    .hero-grid{ display:grid; grid-template-columns: 1fr; gap:1.2rem; align-items:stretch; }
    .hero-content{ display:flex; flex-direction:column; justify-content:center; min-height: 200px; }

    .hero-title{ font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom:.85rem; }
    .hero-title .gradient-text{
      display:inline-block;
      font-size: clamp(2.6rem, 5.2vw, 4.9rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.05;
    }

    .gradient-text{
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-shadow: 0 8px 26px rgba(109,92,255,.12);
    }

    .section{ padding: 2rem 0; }

    /* Larger gap between the main (menu) sections */
    section#entreprise,
    section#e5,
    section#e6,
    section#veille {
      margin-top: 10rem;
    }

    /* No per-section background overrides */
    section{ background: transparent; }

    .section-head{ margin-bottom:1.4rem; }

    /* ✅ catégories toolbox */
    .toolbox-categories{
      display:flex;
      flex-direction:column;
      gap: 1.25rem;
    }
    .tool-category{
      padding: .95rem;
      border-radius: var(--r20);
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.55);
      box-shadow: 0 10px 26px rgba(16,24,40,.06);
    }
    html[data-theme="dark"] .tool-category{
      background: rgba(18,22,40,.55);
      box-shadow: 0 10px 26px rgba(0,0,0,.30);
    }
    .category-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: .75rem;
      margin-bottom: .85rem;
      padding: 0 .15rem;
    }
    .category-title{
      margin:0;
      font-size: 1.05rem;
      font-weight: 850;
      letter-spacing:-.02em;
    }
    .category-subtitle{
      margin:0;
      color: var(--muted2);
      font-size: .92rem;
      font-weight: 650;
      letter-spacing:-.01em;
    }

    /* ✅ 4 cartes par ligne */
    .cards-grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:1rem;
    }

    .skill{
      width:100%;
      text-align:left;
      border-radius: var(--r14);
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.70);
      color: rgba(11,16,32,.92);
      font-weight:750;
      padding:.72rem 1rem;
      cursor:pointer;
      transition: transform var(--dur) var(--ease),
                  box-shadow var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  background var(--dur) var(--ease);
      user-select:none;
      -webkit-tap-highlight-color: transparent;
      box-shadow:none;
      will-change: transform;
    }
    html[data-theme="dark"] .skill{
      background: rgba(18,22,40,.70);
      color: rgba(243,245,255,.92);
    }
    .skill:hover{
      --hover-scale: 1.03;
      transform: translateY(-2px) scale(var(--hover-scale, 1));
      border-color: rgba(109,92,255,.22);
      box-shadow: 0 16px 44px rgba(16,24,40,.12);
      background: rgba(255,255,255,.92);
    }
    html[data-theme="dark"] .skill:hover{
      box-shadow: 0 16px 44px rgba(0,0,0,.45);
      background: rgba(18,22,40,.92);
    }
    .skill:focus-visible{ outline:none; box-shadow:var(--ring); }

    .skill-top{ display:flex; align-items:center; gap:.75rem; }
    .skill-icon{
      width:46px; height:46px;
      border-radius:16px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.80);
      border:1px solid var(--stroke);
      box-shadow: 0 10px 26px rgba(16,24,40,.08);
      flex:0 0 auto;
      overflow:hidden;
    }
    html[data-theme="dark"] .skill-icon{
      background: rgba(18,22,40,.85);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }
    .skill-icon img{
      width:26px; height:26px;
      display:block;
      filter: drop-shadow(0 8px 14px rgba(16,24,40,.10));
      object-fit: contain;
    }
    .skill-name{
      margin:0;
      font-size:1.02rem;
      letter-spacing:-.02em;
      font-weight:600;
      color: rgba(11,16,32,.92);
    }
    html[data-theme="dark"] .skill-name{ color: rgba(243,245,255,.92); }

    .reveal{
      opacity:0;
      transform: translateY(var(--reveal-y, 12px)) scale(var(--hover-scale, 1));
      transition: opacity 650ms var(--ease), transform 650ms var(--ease);
      will-change: transform, opacity;
    }
    .reveal.is-visible{
      opacity:1;
      --reveal-y: 0px;
    }

    .modal{
      position:fixed; inset:0;
      display:none;
      z-index: 80;
    }
    .modal.is-open{ display:block; }
    .modal-backdrop{
      position:absolute; inset:0;
      background: rgba(11,16,32,.35);
      backdrop-filter: blur(6px);
    }
    .modal-center{
      position:relative;
      min-height:100svh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 1.25rem 0;
    }
    .modal-panel{
      position:relative;
      width:min(720px, calc(100% - 2rem));
      border-radius: var(--r20);
      background: rgba(255,255,255,.92);
      border: 1px solid var(--stroke2);
      box-shadow: var(--shadow);
      padding: 1.1rem 1.1rem 1.2rem;
      transform: translateY(10px) scale(.98);
      opacity:0;
      transition: transform 320ms var(--ease), opacity 320ms var(--ease);
    }
    html[data-theme="dark"] .modal-panel{ background: rgba(18,22,40,.92); }
    .modal.is-open .modal-panel{ transform: translateY(0) scale(1); opacity:1; }

    .modal-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.8rem;
    }
    .modal-title{
      display:flex;
      align-items:center;
      gap:.8rem;
      margin:0;
      font-size: 1.25rem;
      letter-spacing:-.02em;
    }
    .modal-title .modal-icon{
      width:44px; height:44px;
      border-radius: 16px;
      background: rgba(255,255,255,.85);
      border: 1px solid var(--stroke);
      display:grid; place-items:center;
      overflow:hidden;
      box-shadow: 0 10px 26px rgba(16,24,40,.08);
      flex:0 0 auto;
    }
    html[data-theme="dark"] .modal-title .modal-icon{
      background: rgba(18,22,40,.85);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }
    .modal-title .modal-icon img{ width:26px; height:26px; display:block; object-fit: contain; }

    .modal-close{
      border-radius: 12px;
      padding:.55rem .75rem;
      border:1px solid var(--stroke);
      background: var(--btnBg);
      cursor:pointer;
      font-weight:800;
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
      color: inherit;
    }
    .modal-close:hover{ transform: translateY(-1px); background: var(--btnBgHover); }
    .modal-close:focus-visible{ outline:none; box-shadow: var(--ring); }

    .modal-body{ text-align:left; }
    .modal-body p{ margin:0 0 .85rem; color: var(--muted); }
    .tags{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin: .25rem 0 0;
      padding:0;
      list-style:none;
      justify-content:flex-start;
    }
    .tag{
      font-size:.9rem;
      font-weight:750;
      padding:.45rem .65rem;
      border-radius: 999px;
      border:1px solid rgba(109,92,255,.18);
      background: rgba(109,92,255,.08);
      color: rgba(11,16,32,.88);
    }
    html[data-theme="dark"] .tag{
      color: rgba(243,245,255,.90);
      background: rgba(109,92,255,.16);
      border-color: rgba(109,92,255,.22);
    }

    /* ✅ modal contact */
    .contact-modal .modal-panel{ width:min(520px, calc(100% - 2rem)); }
    .contact{ width:100%; padding:.25rem 0 0; }

    .contact-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:.55rem;
    }
    .field{ display:flex; flex-direction:column; gap:.35rem; }
    .field.full{ grid-column: 1 / -1; }

    .sr-only{
      position:absolute !important;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }

    .input, .textarea{
      width:100%;
      border-radius: 14px;
      border:1px solid var(--stroke);
      background: var(--fieldBg);
      color: var(--fieldText);
      padding: .6rem .75rem;
      font: inherit;
      outline:none;
      transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    .textarea{ min-height: 110px; resize: vertical; }
    .input::placeholder, .textarea::placeholder{ color: var(--placeholder); }
    .input:focus, .textarea:focus{
      background: var(--fieldBgFocus);
      border-color: rgba(109,92,255,.28);
      box-shadow: var(--ring);
    }

    .contact-actions{ display:flex; justify-content:flex-end; margin-top:.75rem; }
    .btn-send{ width:100%; justify-content:center; font-weight:900; }

    @media (max-width: 980px){
      :root{
        --sidePx: 0px;
        --sideMin: 0px;
        --sideMax: 9999px;
      }
      .sidebar{
        position:sticky;
        top:0; left:0; right:0; bottom:auto;
        width:100%;
        height:auto;
        padding: .9rem 1rem;
        border-left:none;
        border-bottom:1px solid rgba(20,28,60,.16);

        box-shadow:
          0 18px 40px rgba(16,24,40,.12),
          0 6px 16px rgba(16,24,40,.10),
          0 1px 0 rgba(20,28,60,.08) inset;
      }
      html[data-theme="dark"] .sidebar{
        border-bottom:1px solid rgba(255,255,255,.14);
        box-shadow:
          0 18px 40px rgba(0,0,0,.45),
          0 6px 16px rgba(0,0,0,.35),
          0 1px 0 rgba(255,255,255,.06) inset;
      }

      .content{
        margin-right:0;
        display:block;
        align-items:stretch;
      }

      /* ✅ en tablette : 3 colonnes */
      .cards-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .contact-grid{ grid-template-columns: 1fr; }
    }

    @media (max-width: 720px){
      /* ✅ mobile : 2 colonnes */
      .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .home-fab{ top: 14px; left: 14px; }
    }
    @media (max-width: 420px){
      /* ✅ très petit : 1 colonne */
      .cards-grid{ grid-template-columns: 1fr; }
      .category-head{ flex-direction:column; align-items:flex-start; }
    }

    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      .reveal{ transition:none; transform:none; opacity:1; }
      .btn,.nav-link,.skill,.modal-panel,.input,.textarea,.home-fab,.theme-fab,.to-top{ transition:none !important; }
      .skill:hover,.to-top:hover{ transform:none; box-shadow:none; }
      .modal-panel{ transform:none; opacity:1; }
    }

    /* --- Styles supplémentaires (Entreprise / E5 / Veille) --- */
    .lead{
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.55;
      max-width: 150ch;
    }

    /* --- Entreprise (cards + media) --- */
    .media-row{
      display:flex;
      gap:1rem;
      align-items:stretch;
      margin: 1.15rem 0 0;
    }
    .media-video{ flex: 0 0 60%; display:flex; }
    .media-video video{
      width:100%;
      height:100%;
      aspect-ratio: 16 / 9;
      border-radius: var(--r20);
      box-shadow: 0 16px 44px rgba(16,24,40,.12);
      background: rgba(255,255,255,.35);
      object-fit: cover;
      display:block;
      border:0;
    }
    html[data-theme="dark"] .media-video video{
      box-shadow: 0 16px 44px rgba(0,0,0,.45);
      background: rgba(18,22,40,.35);
    }
    .media-logo{
      flex: 0 0 38.5%;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(255, 255, 255, .70);
      padding: 1.2rem;
      border-radius: var(--r20);
      box-shadow: 0 16px 44px rgba(16,24,40,.12);
    }
    html[data-theme="dark"] .media-logo{
      background:#fff;
      box-shadow: 0 16px 44px rgba(0,0,0,.45);
    }
    .media-logo img{
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      display:block;
    }
    @media (max-width: 900px){
      .media-row{ flex-direction:column; }
      .media-video, .media-logo{ flex: 1 1 auto; }
    }

    .experience-subtitle{
      margin: 1.05rem 0 0;
      font-size: 1.35rem;
      letter-spacing:-.02em;
      font-weight: 850;
    }

    .duo-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items:stretch;
    }
    @media (max-width: 720px){ .duo-grid{ grid-template-columns: 1fr; } }

    .duo-card{
      position: relative;
      border-radius: var(--r20);
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.70);
      box-shadow: 0 10px 26px rgba(16,24,40,.08);
      padding: 1.05rem 1.1rem 1.05rem;
      min-height: 220px;
      overflow: hidden;
      display:flex;
      flex-direction:column;
      gap:.75rem;
      transition: transform var(--dur) var(--ease),
                  box-shadow var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  background var(--dur) var(--ease);
      will-change: transform;
    }
    .duo-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(680px 260px at 0% 0%, rgba(109,92,255,.18), transparent 55%),
        radial-gradient(520px 220px at 100% 10%, rgba(31,140,255,.14), transparent 55%);
      opacity:.9;
      pointer-events:none;
    }
    .duo-card::after{
      content:"";
      position:absolute;
      top:0; left:0; right:0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      opacity:.95;
      pointer-events:none;
    }
    .duo-card:hover{
      border-color: rgba(109,92,255,.22);
      box-shadow: 0 16px 44px rgba(16,24,40,.12);
      background: rgba(255,255,255,.86);
    }
    html[data-theme="dark"] .duo-card{
      background: rgba(18,22,40,.70);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }
    html[data-theme="dark"] .duo-card::before{
      opacity:.7;
      background:
        radial-gradient(680px 260px at 0% 0%, rgba(109,92,255,.22), transparent 55%),
        radial-gradient(520px 220px at 100% 10%, rgba(31,140,255,.18), transparent 55%);
    }
    html[data-theme="dark"] .duo-card:hover{
      box-shadow: 0 16px 44px rgba(0,0,0,.45);
      background: rgba(18,22,40,.86);
    }
    .duo-card > *{ position:relative; z-index:1; }

    .duo-head{
      display:flex;
      flex-direction:column;
      gap:.35rem;
      padding-right: 96px;
    }
    .duo-card h3{
      margin:0;
      font-weight: 950;
      letter-spacing:-.02em;
      font-size: 1.2rem;
    }
    .duo-role{
      display:block;
      width:auto;
      padding:0;
      border:0;
      background: transparent;
      border-radius:0;
      color: var(--muted);
      font-weight: 650;
      letter-spacing: 0;
      font-size:1.5rem;
    }
    html[data-theme="dark"] .duo-role{ color: var(--muted); }

    .duo-body{
      display:flex;
      flex-direction:column;
      gap:.55rem;
      flex: 1 1 auto;
      min-height: 0;
    }

    .duo-list{
      margin:0;
      padding:0;
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:.45rem;
    }
    .duo-list li{
      position:relative;
      padding-left: 1.05rem;
      color: var(--muted);
      line-height:1.5;
    }
    .duo-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.58rem;
      width:.48rem;
      height:.48rem;
      border-radius:999px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      box-shadow: 0 6px 18px rgba(109,92,255,.18);
    }

    .duo-date{
      position:absolute;
      top: 12px;
      right: 12px;
      font-size:.86rem;
      font-weight:850;
      letter-spacing:-.01em;
      padding:.35rem .6rem;
      border-radius:999px;
      border:1px solid rgba(109,92,255,.22);
      background: rgba(109,92,255,.10);
      color: rgba(11,16,32,.86);
      pointer-events:none;
      z-index:2;
    }
    html[data-theme="dark"] .duo-date{
      color: rgba(243,245,255,.90);
      background: rgba(109,92,255,.16);
      border-color: rgba(109,92,255,.24);
    }

    .duo-more{ margin-top: auto; padding-top: .4rem; }
    .duo-more .btn{ width:100%; justify-content:center; }

    /* --- E5 / Blocs --- */
    .panel{
      border-radius: var(--r20);
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.70);
      box-shadow: 0 10px 26px rgba(16,24,40,.06);
      overflow:hidden;
      position:relative;
    }
    html[data-theme="dark"] .panel{
      background: rgba(18,22,40,.70);
      box-shadow: 0 10px 26px rgba(0,0,0,.30);
    }

    .panel::after{
      content:"";
      position:absolute;
      top:0; left:0; right:0;
      height:4px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      opacity:.95;
      pointer-events:none;
      z-index:1;
    }

    .panel-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: .75rem;
      padding: .95rem 1rem .9rem;
      border-bottom:1px solid var(--stroke);
      position:relative;
      z-index:2;
    }
    html[data-theme="dark"] .panel-top{
      background: linear-gradient(180deg, rgba(18,22,40,.55), rgba(18,22,40,.25));
    }

    .panel-title{
      margin:0;
      font-size: 1.05rem;
      font-weight: 950;
      letter-spacing:-.02em;
    }
    .panel-actions{
      display:flex;
      gap:.6rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .btn-mini{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.55rem .75rem;
      border-radius: 12px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.55);
      font-weight: 900;
      cursor:pointer;
      transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    html[data-theme="dark"] .btn-mini{ background: rgba(18,22,40,.55); color: rgba(243,245,255,.92); }
    .btn-mini:hover{
      transform: translateY(-1px);
      border-color: rgba(109,92,255,.22);
      background: rgba(255,255,255,.78);
    }
    html[data-theme="dark"] .btn-mini:hover{ background: rgba(18,22,40,.78); }

    .sheet-wrap{
      width:100%;
      height: clamp(520px, 72svh, 900px);
      background: rgba(255,255,255,.35);
      position:relative;
      z-index:0;
      overflow:auto;
    }
    html[data-theme="dark"] .sheet-wrap{ background: rgba(18,22,40,.35); }

    .sheet{
      width:100%;
      height:100%;
      border:0;
      display:block;
      transform: scale(.92);
      transform-origin: 0 0;
      width: calc(100% / .92);
      height: calc(100% / .92);
    }

    .blocks-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      align-items:stretch;
    }

    .bloc-link{
      width:100%;
      text-align:left;
      border-radius: var(--r20);
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.70);
      color: rgba(11,16,32,.92);
      font-weight:850;
      padding: .95rem 1rem;
      cursor:pointer;
      transition: transform var(--dur) var(--ease),
                  box-shadow var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  background var(--dur) var(--ease);
      user-select:none;
      -webkit-tap-highlight-color: transparent;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.9rem;
      min-height: 92px;
      position:relative;
      overflow:hidden;
      will-change: transform;
    }
    html[data-theme="dark"] .bloc-link{
      background: rgba(18,22,40,.70);
      color: rgba(243,245,255,.92);
    }

    .bloc-link::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(720px 280px at 0% 0%, rgba(109,92,255,.16), transparent 55%),
        radial-gradient(520px 240px at 100% 10%, rgba(31,140,255,.12), transparent 55%);
      opacity:.95;
      pointer-events:none;
    }
    html[data-theme="dark"] .bloc-link::before{
      opacity:.70;
      background:
        radial-gradient(720px 280px at 0% 0%, rgba(109,92,255,.22), transparent 55%),
        radial-gradient(520px 240px at 100% 10%, rgba(31,140,255,.16), transparent 55%);
    }

    .bloc-link:hover{
      --hover-scale: 1.01;
      transform: translateY(-2px) scale(var(--hover-scale, 1));
      border-color: rgba(109,92,255,.22);
      box-shadow: 0 16px 44px rgba(16,24,40,.12);
      background: rgba(255,255,255,.88);
    }
    html[data-theme="dark"] .bloc-link:hover{
      box-shadow: 0 16px 44px rgba(0,0,0,.45);
      background: rgba(18,22,40,.88);
    }
    .bloc-link:focus-visible{ outline:none; box-shadow:var(--ring); }

    .bloc-link > *{ position:relative; z-index:1; }

    .bloc-text{
      display:flex;
      flex-direction:column;
      gap:.35rem;
      min-width: 0;
      justify-content:center;
    }
    .bloc-title{
      margin:0;
      font-size: 1.02rem;
      font-weight: 950;
      letter-spacing:-.02em;
      line-height:1.25;
    }
    .bloc-sub{
      margin:0;
      color: var(--muted);
      font-weight:750;
      font-size: .92rem;
      line-height:1.35;
    }

    .bloc-arrow{
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      border-radius: 14px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.55);
      display:grid;
      place-items:center;
    }
    html[data-theme="dark"] .bloc-arrow{ background: rgba(18,22,40,.55); }
    .bloc-arrow svg{ width:20px; height:20px; display:block; }

    /* --- Veille / Dashboard --- */
    .card{
      border-radius: var(--r20);
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.70);
      box-shadow: 0 10px 26px rgba(16,24,40,.06);
      padding: 1.05rem 1.1rem 1.05rem;
      position:relative;
      overflow:hidden;
      transition: transform var(--dur) var(--ease),
                  box-shadow var(--dur) var(--ease),
                  border-color var(--dur) var(--ease),
                  background var(--dur) var(--ease);
      will-change: transform;
    }
    html[data-theme="dark"] .card{
      background: rgba(18,22,40,.70);
      box-shadow: 0 10px 26px rgba(0,0,0,.30);
    }
    .card::after{
      content:"";
      position:absolute;
      top:0; left:0; right:0;
      height:4px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      opacity:.95;
      pointer-events:none;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(109,92,255,.22);
      box-shadow: 0 16px 44px rgba(16,24,40,.10);
      background: rgba(255,255,255,.85);
    }
    html[data-theme="dark"] .card:hover{
      box-shadow: 0 16px 44px rgba(0,0,0,.42);
      background: rgba(18,22,40,.85);
    }

    .dash{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 1rem;
      align-items:stretch;
    }
    @media (max-width: 980px){ .dash{ grid-template-columns: 1fr; } }

    .stats{
      display:grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      align-items:stretch;
    }
    .stat{
      display:flex;
      flex-direction:column;
      gap:.35rem;
      justify-content:center;
      min-height: 120px;
    }
    .stat-k{
      font-size: .92rem;
      font-weight: 850;
      color: var(--muted2);
      letter-spacing:-.01em;
      margin:0;
    }
    .stat-v{
      font-size: clamp(1.4rem, 2.3vw, 1.85rem);
      font-weight: 950;
      letter-spacing:-.03em;
      margin:0;
    }
    .stat-hint{
      margin:0;
      color: var(--muted);
      line-height:1.5;
      font-size: .96rem;
    }

    .bento{
      display:grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 1rem;
      align-items:stretch;
    }
    .span-12{ grid-column: span 12; }
    .span-8{ grid-column: span 8; }
    .span-7{ grid-column: span 7; }
    .span-6{ grid-column: span 6; }
    .span-5{ grid-column: span 5; }
    .span-4{ grid-column: span 4; }
    @media (max-width: 980px){
      .span-8,.span-7,.span-6,.span-5,.span-4{ grid-column: span 12; }
    }

    .two-col{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items:stretch;
    }
    @media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }

    .list{
      margin:0;
      padding:0;
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:.45rem;
    }
    .list li{
      position:relative;
      padding-left: 1.05rem;
      color: var(--muted);
      line-height:1.55;
    }
    .list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.62rem;
      width:.48rem;
      height:.48rem;
      border-radius:999px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      box-shadow: 0 6px 18px rgba(109,92,255,.18);
    }

    .chips{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin: .25rem 0 0;
      padding:0;
      list-style:none;
    }
    .chip{
      font-size:.9rem;
      font-weight:850;
      padding:.45rem .7rem;
      border-radius: 999px;
      border:1px solid rgba(109,92,255,.18);
      background: rgba(109,92,255,.08);
      color: rgba(11,16,32,.88);
    }
    html[data-theme="dark"] .chip{
      color: rgba(243,245,255,.90);
      background: rgba(109,92,255,.16);
      border-color: rgba(109,92,255,.22);
    }

    .feed{
      display:flex;
      flex-direction:column;
      gap: .75rem;
    }
    .item{
      display:grid;
      grid-template-columns: 1fr auto;
      gap: .75rem;
      align-items:start;
    }
    @media (max-width: 720px){ .item{ grid-template-columns: 1fr; } }
    .item h3{
      margin:0 0 .35rem;
      font-size: 1.05rem;
      letter-spacing:-.02em;
      font-weight: 950;
    }
    .meta{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      justify-content:flex-end;
      align-items:center;
      color: var(--muted2);
      font-weight: 850;
    }
    @media (max-width: 720px){ .meta{ justify-content:flex-start; } }

    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.28rem .6rem;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.55);
      font-size:.86rem;
      font-weight:850;
      white-space:nowrap;
    }
    html[data-theme="dark"] .pill{ background: rgba(18,22,40,.55); }

    .item p{ margin:0; color: var(--muted); line-height:1.55; }
    .item .actions{
      display:flex;
      gap:.5rem;
      flex-wrap:wrap;
      margin-top:.6rem;
    }

    .gloss{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }
    @media (max-width: 980px){ .gloss{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }