    /* â”€â”€ DOCUMENTATION â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    /* â”€â”€ Documentation Gallery â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    .doc-filters { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
    .doc-filter-btn {
      padding:.45rem 1.1rem;
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:var(--r-pill);
      font-size:.72rem; font-weight:600;
      letter-spacing:.07em; text-transform:uppercase; color:var(--text-2);
      cursor:pointer;
      transition:background .22s, border-color .22s, color .22s;
    }
    .doc-filter-btn:hover,
    .doc-filter-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
    .doc-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
    .dg-card {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:var(--r); overflow:hidden;
      display:flex; flex-direction:column;
      transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .28s;
    }
    .dg-card.hidden { display:none; }
    .dg-card:hover { transform:translateY(-6px); box-shadow:var(--shadow),var(--shadow-glow); border-color:var(--accent); }
    .dg-visual {
      height:140px; position:relative; overflow:hidden;
      background:#ffffff;
      flex-shrink:0;
    }
    .dg-visual::before {
      content:''; position:absolute; inset:0;
      background-image:linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size:28px 28px; opacity:.5;
    }
    .dg-visual-icon {
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
    }
    .dg-visual-img {
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:contain; object-position:center;
      padding:10px;
      transition:transform .4s var(--ease);
    }
    .dg-card:hover .dg-visual-img { transform:scale(1.04); }
    .dg-visual.no-grid::before { display:none; }
    .dg-visual-icon span {
      width:58px; height:58px;
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:14px;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 16px rgba(0,0,0,.08);
      font-size:1.5rem;
    }
    .dg-tags-overlay {
      position:absolute; bottom:.7rem; left:.7rem;
      display:flex; flex-wrap:wrap; gap:.35rem;
    }
    .dg-tag {
      padding:.18rem .55rem;
      background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.12);
      border-radius:var(--r-pill); backdrop-filter:blur(6px);
      font-size:.6rem; font-weight:600;
      letter-spacing:.06em; text-transform:uppercase; color:#1A1A1C;
    }
    .dg-bkmk {
      position:absolute; top:.7rem; right:.7rem;
      width:32px; height:32px;
      background:rgba(255,255,255,.76); border:1px solid rgba(0,0,0,.10);
      border-radius:8px; backdrop-filter:blur(6px);
      display:flex; align-items:center; justify-content:center;
      transition:background .22s, border-color .22s;
    }
    .dg-bkmk:hover { background:var(--accent-dim); border-color:var(--accent); }
    .dg-body { padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.65rem; flex:1; }
    .dg-title {
      font-family:'Oswald',sans-serif;
      font-size:1rem; font-weight:600;
      letter-spacing:.02em; color:var(--text); line-height:1.25;
    }
    .dg-desc { font-size:.78rem; color:var(--text-2); line-height:1.65; flex:1; }
    .dg-open {
      display:inline-flex; align-items:center; gap:.45rem;
      font-size:.68rem; font-weight:600;
      letter-spacing:.09em; text-transform:uppercase;
      color:var(--accent); text-decoration:none;
      padding:.55rem 1rem;
      background:var(--accent-dim); border:1px solid var(--border);
      border-radius:var(--r); align-self:flex-start;
      transition:background .22s, border-color .22s, gap .22s var(--ease);
    }
    .dg-open:hover { background:var(--accent-glow); border-color:var(--accent); gap:.7rem; }
    .doc-pagination {
      display:flex; align-items:center; justify-content:center; gap:1rem;
      margin-top:2.5rem;
    }
    .doc-pag-btn {
      padding:.5rem 1.3rem;
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:var(--r-pill);
      font-size:.72rem; font-weight:600;
      letter-spacing:.07em; text-transform:uppercase; color:var(--text-2);
      cursor:pointer;
      transition:background .22s, border-color .22s, color .22s;
    }
    .doc-pag-btn:hover:not(:disabled) { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
    .doc-pag-btn:disabled { opacity:.35; cursor:default; }
    .doc-pag-info {
      font-size:.72rem; font-weight:600;
      letter-spacing:.07em; text-transform:uppercase; color:var(--text-2);
      min-width:90px; text-align:center;
    }
    @media (max-width:1024px) { .doc-gallery { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:640px)  { .doc-gallery { grid-template-columns:1fr; } }

    /* â”€â”€ ATTESTATION LINK â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    .exp-attest-link {
      display:flex; align-items:center; gap:.5rem;
      padding:.6rem .85rem;
      border:1px solid var(--border-2); border-radius:6px;
      font-size:.68rem; font-weight:600;
      letter-spacing:.1em; text-transform:uppercase;
      color:var(--accent);
      text-decoration:none; cursor:pointer;
      transition:background .2s, border-color .22s;
      margin-bottom:.55rem; list-style:none;
      background:none;
    }
    .exp-attest-link:last-child { margin-bottom:0; }
    .exp-attest-link:hover { background:var(--accent-dim); border-color:var(--border); }
    .exp-attest-link .chev { margin-left:auto; }

    /* â”€â”€ VEILLE â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    .veille-grid {
      display:grid; grid-template-columns:1fr 1fr;
      gap:2rem;
    }
    .veille-card {
      background:var(--bg-card);
      border:1px solid var(--border-2);
      border-radius:var(--r); overflow:hidden;
      display:flex; flex-direction:column;
      text-decoration:none; color:inherit;
      transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .28s;
    }
    .veille-card:hover {
      transform:translateY(-10px);
      box-shadow:var(--shadow), var(--shadow-glow);
      border-color:var(--accent);
    }

    /* Visuel haut de carte */
    .veille-visual {
      height:200px; position:relative; overflow:hidden;
      background:linear-gradient(135deg, var(--bg-card-2) 0%, var(--bg) 100%);
      border-bottom:1px solid var(--border-2);
      display:flex; align-items:center; justify-content:center;
      transition:border-color .28s;
    }
    .veille-card:hover .veille-visual { border-color:rgba(0,0,0,.12); }

    /* Grille de fond dans le visuel */
    .veille-visual::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(var(--border-2) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-2) 1px, transparent 1px);
      background-size:30px 30px; opacity:.9;
    }
    /* Orbe de lumière en haut à droite */
    .veille-visual::after {
      content:''; position:absolute;
      width:240px; height:240px; border-radius:50%;
      background:radial-gradient(circle, rgba(26,26,28,.06) 0%, transparent 65%);
      top:-60px; right:-60px; pointer-events:none;
      transition:opacity .38s;
    }
    .veille-card:hover .veille-visual::after { opacity:1; }

    /* Icône centrale */
    .veille-big-icon {
      width:76px; height:76px;
      background:var(--bg-card);
      border:1px solid var(--border);
      border-radius:18px;
      display:flex; align-items:center; justify-content:center;
      position:relative; z-index:1;
      box-shadow:0 4px 20px rgba(0,0,0,.10), var(--shadow);
      transition:transform .38s var(--ease), box-shadow .38s var(--ease), background .28s;
    }
    .veille-card:hover .veille-big-icon {
      transform:scale(1.1);
      box-shadow:0 8px 32px rgba(0,0,0,.14), var(--shadow);
      background:var(--bg-card-2);
    }

    /* Badge type (coin haut gauche) */
    .veille-type-badge {
      position:absolute; top:1rem; left:1rem; z-index:2;
      padding:.22rem .65rem;
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:var(--r-pill);
      font-size:.58rem; font-weight:700;
      letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
      box-shadow:var(--shadow);
    }

    /* Corps texte */
    .veille-body {
      padding:1.8rem 2rem 2rem;
      display:flex; flex-direction:column; gap:.75rem; flex:1;
    }
    .veille-title {
      font-family:'Oswald',sans-serif;
      font-size:1.3rem; font-weight:700;
      color:var(--text); line-height:1.2;
    }
    .veille-desc { font-size:.82rem; color:var(--text-2); line-height:1.8; flex:1; }

    /* Bouton CTA */
    .veille-cta {
      display:inline-flex; align-items:center; gap:.55rem;
      margin-top:.4rem; padding:.7rem 1.5rem;
      background:var(--accent-dim); border:1px solid var(--border);
      border-radius:var(--r-pill);
      font-size:.72rem; font-weight:700;
      letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
      width:fit-content;
      transition:background .28s, border-color .28s, box-shadow .28s, gap .28s var(--ease);
    }
    .veille-card:hover .veille-cta {
      background:var(--accent-glow);
      border-color:var(--border);
      box-shadow:0 4px 14px rgba(0,0,0,.08);
      gap:.85rem;
    }
    @media (max-width:768px) { .veille-grid { grid-template-columns:1fr; } }

    /* â”€â”€ Ã€ PROPOS REDESIGN â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    .about-new {
      display:grid; grid-template-columns:300px 1fr;
      gap:2rem; align-items:start;
    }

    /* Carte profil gauche — redesigned */
    .ap-profile {
      background:var(--bg-card);
      border:1px solid var(--border-2);
      border-radius:var(--r); padding:2rem 1.5rem;
      display:flex; flex-direction:column; align-items:center;
      text-align:center; gap:.85rem;
      position:sticky; top:calc(var(--nav-h) + 1.5rem);
      transition:background .5s var(--ease), border-color .5s, box-shadow .5s var(--ease), transform .5s var(--ease);
      transform-style:preserve-3d; perspective:600px;
    }
    .ap-profile:hover {
      border-color:rgba(0,0,0,.16);
      box-shadow:0 16px 48px rgba(0,0,0,.10);
      transform:translateY(-4px);
    }

    /* Avatar — encadré rectangulaire 220px */
    .ap-avatar-ring {
      width:220px; height:220px;
      border-radius:16px;
      padding:5px; margin-bottom:.7rem; flex-shrink:0;
      background:linear-gradient(145deg, rgba(26,26,28,.10) 0%, rgba(26,26,28,.04) 50%, rgba(26,26,28,.14) 100%);
      border:none;
      animation:none;
      overflow:visible;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.75) inset,
        0 0 0 1.5px rgba(0,0,0,.06),
        0 8px 32px rgba(0,0,0,.12),
        0 2px 8px rgba(0,0,0,.07);
      transition:box-shadow .4s, transform .4s var(--ease);
    }
    .ap-profile:hover .ap-avatar-ring {
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.85) inset,
        0 0 0 1.5px rgba(0,0,0,.10),
        0 14px 44px rgba(0,0,0,.17),
        0 4px 12px rgba(0,0,0,.09);
      transform:translateY(-2px);
    }
    .ap-avatar-inner {
      width:100%; height:100%; border-radius:11px;
      background:var(--bg-card-2);
      overflow:hidden;
      animation:none;
    }
    .ap-avatar-inner img {
      width:100%; height:100%;
      object-fit:cover;
      object-position:center top;
      border-radius:11px;
      image-rendering:auto;
      display:block;
      transition:transform .6s var(--ease), filter .6s;
    }
    .ap-profile:hover .ap-avatar-inner img {
      transform:scale(1.05);
      filter:brightness(1.06) contrast(1.03);
    }
    .ap-name {
      font-family:'Oswald',sans-serif;
      font-size:1.22rem; font-weight:700;
      color:var(--text); letter-spacing:.02em;
    }
    .ap-role {
      font-size:.68rem; font-weight:600;
      letter-spacing:.12em; text-transform:uppercase;
      color:var(--accent);
    }

    /* Contacts */
    .ap-contacts {
      width:100%; list-style:none;
      display:flex; flex-direction:column; gap:.55rem;
      padding-top:.85rem; border-top:1px solid var(--border-2);
      transition:border-color .45s;
    }
    .ap-contacts li {
      display:flex; align-items:center; gap:.5rem;
      font-size:.72rem; color:var(--text-3);
      justify-content:center;
    }
    .ap-contacts li svg { flex-shrink:0; color:var(--accent); }
    .ap-contacts a { color:var(--accent); transition:opacity .2s; }
    .ap-contacts a:hover { opacity:.72; }

    /* Grille stats 2Ã—2 */
    .ap-stats {
      width:100%; display:grid; grid-template-columns:1fr 1fr;
      gap:.6rem; padding-top:.85rem;
      border-top:1px solid var(--border-2);
      transition:border-color .45s;
    }
    .ap-stat {
      background:var(--bg-card-2); border:1px solid var(--border-2);
      border-radius:8px; padding:.85rem .5rem;
      display:flex; flex-direction:column; align-items:center; gap:.2rem;
      transition:background .28s, border-color .28s;
    }
    .ap-stat:hover { background:var(--accent-dim); border-color:var(--border); }
    .ap-stat-val {
      font-family:'Oswald',sans-serif;
      font-size:1.55rem; font-weight:700; color:var(--accent);
      font-variant-numeric:tabular-nums;
    }
    .ap-stat-lbl {
      font-size:.54rem; letter-spacing:.1em; text-transform:uppercase;
      color:var(--text-3); text-align:center; line-height:1.35;
    }

    .ap-right { display:flex; flex-direction:column; gap:1.2rem; }

    /* Card "Qui suis-je?" avec glow accent */
    .ap-who {
      background:var(--bg-card);
      border:1.5px solid var(--accent);
      border-radius:var(--r); padding:1.8rem 2rem;
      box-shadow:0 4px 24px rgba(0,0,0,.07);
      transition:background .45s, box-shadow .5s var(--ease), transform .5s var(--ease), border-color .4s;
    }
    .ap-who:hover {
      transform:translateY(-3px);
      box-shadow:0 12px 40px rgba(0,0,0,.10);
      border-color:rgba(26,26,28,.5);
    }
    .ap-who-head {
      display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem;
    }
    .ap-who-icon {
      width:36px; height:36px;
      background:var(--accent-dim); border:1px solid var(--border);
      border-radius:8px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      transition:background .28s;
    }
    .ap-who h2 {
      font-family:'Oswald',sans-serif;
      font-size:1.35rem; font-weight:700; color:var(--text);
    }
    .ap-who p {
      font-size:.88rem; color:var(--text-2); line-height:1.85; margin-bottom:.9rem;
    }
    .ap-who p:last-child { margin-bottom:0; }
    .ap-who strong { color:var(--text); font-weight:600; }

    /* Rangée bottom (2 cards) */
    .ap-bottom { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
    .ap-card {
      background:var(--bg-card); border:1px solid var(--border-2);
      border-radius:var(--r); padding:1.5rem;
      transition:background .28s, border-color .28s;
    }
    .ap-card:hover { background:var(--bg-card-2); border-color:var(--border); }
    .ap-card-title {
      font-family:'Oswald',sans-serif;
      font-size:.86rem; font-weight:600;
      letter-spacing:.08em; text-transform:uppercase;
      color:var(--accent); margin-bottom:1rem;
      display:flex; align-items:center; gap:.5rem;
    }
    .ap-card-title::before {
      content:''; width:18px; height:1.5px; background:var(--accent);
    }
    .ap-list { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
    .ap-list li {
      display:flex; align-items:center; gap:.6rem;
      font-size:.8rem; color:var(--text-2);
    }
    .ap-list li::before {
      content:''; width:6px; height:6px; border-radius:50%;
      background:var(--accent); flex-shrink:0;
    }

    /* Profile card premium entrance */
    .ap-profile.reveal-l {
      opacity:0; transform:translateX(-60px) rotateY(8deg) scale(0.95);
      filter:blur(8px);
      transition:opacity 1.2s cubic-bezier(.16,1,.3,1),
                 transform 1.4s cubic-bezier(.16,1,.3,1),
                 filter .8s cubic-bezier(.4,0,.2,1);
    }
    .ap-profile.reveal-l.in {
      opacity:1; transform:translateX(0) rotateY(0) scale(1); filter:blur(0);
    }

    @media (max-width:1024px) { .about-new { grid-template-columns:260px 1fr; } }
    @media (max-width:900px) {
      .about-new { grid-template-columns:1fr; }
      .ap-profile { position:static; }
    }
    @media (max-width:600px) { .ap-bottom { grid-template-columns:1fr; } }
