/*
Theme Name: Damien Duhal — Portfolio
Author: Damien Duhal
Description: Portfolio bitmap moderne « Signal brut » — carousel 3D avec visuels pixelisés multi-résolution (dithering Bayer), formes pointues en escalier de pixels, serif éditoriale, transition en damier de blocs. Projets via le type de contenu « Projets » (image à la une pixelisée automatiquement), menu via Apparence → Menus, textes et couleurs via le Customizer. Aucun plugin requis.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: damienduhal
*/
  :root{
    --fond:#0A0B0D;          /* noir bleuté profond */
    --surface:#111318;
    --texte:#EDEEF2;
    --gris:#878D9A;
    --violet:#AE4FE0;        /* accent du CV + surfaces pleines (menu, footer, bandeau) */
    --violet-clair:#D9A8F5;
    --noir:#000000;          /* formes pointues, plus noir que le fond */
    --chrome-a:#C8CDD6;
    --chrome-b:#F2F4F7;
    --px:8px;                /* unité pixel des créneaux */
    --cw:288px;
    --ch:389px;
    --ease:cubic-bezier(.22,1,.36,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Instrument Sans',sans-serif;
    background:var(--fond);
    color:var(--texte);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--violet);color:var(--fond)}
  img{image-rendering:pixelated}

  /* ---- trame de dithering (Bayer) plein écran ---- */
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='white'/%3E%3Crect width='1' height='1' x='2' y='2' fill='white'/%3E%3Crect width='1' height='1' x='2' y='0' fill='white' opacity='.4'/%3E%3Crect width='1' height='1' x='0' y='2' fill='white' opacity='.4'/%3E%3C/svg%3E");
    background-size:4px 4px;
  }

  /* ============================================================
     SYSTÈME DE MASQUES — tout texte sort du sol (conservé)
     ============================================================ */
  .masque{
    display:inline-block;overflow:hidden;vertical-align:bottom;
    padding-bottom:.08em;margin-bottom:-.08em;
  }
  .masque .m-int{
    display:inline-block;transform:translateY(115%);
    transition:transform .9s var(--ease);
  }
  .vu .masque .m-int{transform:none}
  .masque.d2 .m-int{transition-delay:.12s}
  .mot{display:inline-block;overflow:hidden;vertical-align:bottom}
  .mot .m-int{
    display:inline-block;transform:translateY(115%);
    transition:transform .7s var(--ease);
  }
  .vu .mot .m-int{transform:none}

  /* ---- chargeur : cadre pixel qui se dessine ---- */
  .chargeur{
    position:fixed;inset:0;z-index:400;background:var(--fond);
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
    padding:26px clamp(20px,4vw,56px);
    transition:opacity .5s;
  }
  .chargeur.part{opacity:0;pointer-events:none}
  .chargeur .ch-label{
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;
    color:var(--gris);text-align:right;
  }
  .chargeur .ch-pct{
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;
    color:var(--gris);font-variant-numeric:tabular-nums;
  }
  .cadre-morph{
    position:fixed;left:50%;top:50%;width:200px;height:270px;
    margin:-135px 0 0 -100px;z-index:410;pointer-events:none;
    transition:transform .95s var(--ease),opacity .4s;
    display:grid;place-items:center;
  }
  .cadre-morph .seg{
    position:absolute;background:var(--texte);
  }
  .seg-h{left:0;right:0;height:2px;transform:scaleX(0);transition:transform .45s var(--ease)}
  .seg-v{top:0;bottom:0;width:2px;transform:scaleY(0);transition:transform .45s var(--ease)}
  .seg-1{top:0;transform-origin:left}
  .seg-2{right:0;transform-origin:top;transition-delay:.4s}
  .seg-3{bottom:0;transform-origin:right;transition-delay:.8s}
  .seg-4{left:0;transform-origin:bottom;transition-delay:1.2s}
  body.trace .seg-h{transform:scaleX(1)}
  body.trace .seg-v{transform:scaleY(1)}
  .cadre-morph .coin{
    position:absolute;width:8px;height:8px;background:var(--violet);
    opacity:0;transition:opacity .3s 1.6s;
  }
  body.trace .coin{opacity:1}
  .coin-1{top:-3px;left:-3px}.coin-2{top:-3px;right:-3px}
  .coin-3{bottom:-3px;right:-3px}.coin-4{bottom:-3px;left:-3px}
  .cadre-morph .initiales{
    font-family:'Instrument Serif',serif;font-weight:800;
    font-size:56px;letter-spacing:.02em;color:var(--texte);
    opacity:0;transition:opacity .4s .9s;
  }
  body.trace .initiales{opacity:1}
  .cadre-morph .initiales i{font-style:normal;color:var(--violet)}

  /* ---- formes pointues du CV, version escalier de pixels ---- */
  .pointe{
    position:absolute;pointer-events:none;z-index:1;
  }
  .pointe.p-esc{ /* triangle en marches, pointe bas-droite */
    clip-path:polygon(0 0,100% 0,100% 16.6%,83.3% 16.6%,83.3% 33.3%,66.6% 33.3%,66.6% 50%,50% 50%,50% 66.6%,33.3% 66.6%,33.3% 83.3%,16.6% 83.3%,16.6% 100%,0 100%);
  }
  .pointe.p-esc-inv{ /* miroir, pointe haut-gauche */
    clip-path:polygon(100% 100%,0 100%,0 83.3%,16.6% 83.3%,16.6% 66.6%,33.3% 66.6%,33.3% 50%,50% 50%,50% 33.3%,66.6% 33.3%,66.6% 16.6%,83.3% 16.6%,83.3% 0,100% 0);
  }
  .p-noir{background:var(--noir)}
  .p-violet{background:var(--violet)}
  .p-fond{background:var(--fond)}

  /* ---- jauges logiciels en blocs ---- */
  .outil{display:inline-flex;align-items:center;gap:10px}
  .outil .jauge{display:inline-flex;gap:2px}
  .outil .jauge i{width:6px;height:6px;background:rgba(var(--rgb-texte),.14)}
  .outil .jauge i.ok{background:var(--violet)}
  .vu .outil .jauge i.ok{animation:allume .2s steps(1) backwards}
  @keyframes allume{from{background:rgba(var(--rgb-texte),.14)}}

  /* ---- traîne de pixels derrière le curseur ---- */
  .cur-t{
    position:fixed;top:0;left:0;background:var(--violet);
    pointer-events:none;z-index:299;
    transform:translate(-50%,-50%);
  }
  @media (hover:none){.cur-t{display:none}}

  /* ---- scrollbar pixel ---- */
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:var(--fond)}
  ::-webkit-scrollbar-thumb{background:var(--violet);border:2px solid var(--fond)}

  /* ---- curseur : carré pixel ---- */
  .curseur{
    position:fixed;top:0;left:0;width:12px;height:12px;
    background:var(--violet);pointer-events:none;z-index:300;
    transform:translate(-50%,-50%);
    transition:width .25s var(--ease),height .25s var(--ease);
  }
  .curseur.grab{width:58px;height:58px;background:var(--violet)}
  .curseur .cur-label{
    position:absolute;inset:0;display:grid;place-items:center;
    font-family:'Space Mono',monospace;font-size:9px;color:var(--fond);
    letter-spacing:.08em;opacity:0;transition:opacity .3s;
  }
  .curseur.grab .cur-label{opacity:1}
  @media (hover:none){.curseur{display:none}}

  /* ---- nav ---- */
  .nav-site{
    position:fixed;top:0;left:0;right:0;z-index:130;
    display:flex;justify-content:space-between;align-items:center;
    padding:22px clamp(20px,4vw,56px);
  }
  .logo{
    font-family:'Instrument Serif',serif;font-weight:800;font-size:18px;
    text-decoration:none;color:var(--texte);letter-spacing:-.02em;
    transition:color .4s;
  }
  .logo em{font-style:normal;color:var(--violet);transition:color .4s}
  body.menu-ouvert .logo{color:var(--texte)}
  body.menu-ouvert .logo em{color:var(--violet)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

  .burger{position:relative;width:48px;height:48px;background:none;border:0;cursor:pointer}
  .burger span{
    position:absolute;left:11px;top:50%;width:26px;height:2px;
    background:var(--texte);
    transition:transform .45s var(--ease),background .3s;
  }
  .burger span:first-child{transform:translateY(-4px)}
  .burger span:last-child{transform:translateY(3px)}
  .burger:hover span:first-child{transform:translateY(-6px)}
  .burger:hover span:last-child{transform:translateY(5px)}
  body.menu-ouvert .burger span{background:var(--texte)}
  body.menu-ouvert .burger span:first-child{transform:rotate(45deg)}
  body.menu-ouvert .burger span:last-child{transform:rotate(-45deg)}

  /* ---- menu déroulant : plein écran BLEU, bord crénelé ---- */
  .menu{
    position:fixed;inset:0;z-index:120;
    background:var(--noir);
    transform:translateY(-101%);
    transition:transform .85s var(--ease),visibility 0s .85s;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 clamp(20px,4vw,56px) 0;
    visibility:hidden;
  }
  .menu::after{ /* dents de pixels sous le rideau */
    content:"";position:absolute;top:100%;left:0;right:0;height:var(--px);
    background:repeating-linear-gradient(90deg,var(--violet) 0 var(--px),transparent var(--px) calc(var(--px)*2));
  }
  body.menu-ouvert .menu{
    transform:translateY(0);visibility:visible;
    transition:transform .85s var(--ease),visibility 0s 0s;
  }
  .menu-liens{display:flex;flex-direction:column;margin-bottom:6vh}
  .m-lien{
    --d:0s;
    display:flex;align-items:baseline;gap:clamp(14px,3vw,32px);
    text-decoration:none;color:var(--texte);
    padding:clamp(4px,1.2vh,12px) 0;
    position:relative;
  }
  .m-lien::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:rgba(var(--rgb-texte),.14);
    transform:scaleX(0);transform-origin:left;
    transition:transform .8s var(--ease);
  }
  body.menu-ouvert .m-lien::after{transform:none;transition-delay:var(--d)}
  .m-lien:nth-child(1){--d:.30s}
  .m-lien:nth-child(2){--d:.38s}
  .m-lien:nth-child(3){--d:.46s}
  .m-lien:nth-child(4){--d:.54s}
  .m-num{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--violet)}
  .m-num .m-int{transition:transform .7s var(--ease)}
  body.menu-ouvert .menu .masque .m-int{transform:none;transition-delay:var(--d)}
  .m-roll{
    display:inline-block;overflow:hidden;white-space:nowrap;max-width:calc(100vw - 140px);
    font-family:'Instrument Serif',serif;
    font-size:clamp(38px,8.5vh,96px);line-height:1.16;
    height:1.16em;                       /* UNE ligne visible : la 2e attend sous le masque */
    letter-spacing:-.03em;text-transform:uppercase;
  }
  .m-roll .pile span{display:block;height:1.16em;line-height:1.16}
  .m-roll .entree{display:block;transform:translateY(115%);transition:transform .8s var(--ease)}
  body.menu-ouvert .entree{transform:none;transition-delay:var(--d)}
  .m-roll .pile{display:flex;flex-direction:column;transition:transform .5s var(--ease)}
  .m-roll .pile span:last-child{color:var(--violet)}
  .m-lien:hover .pile,.m-lien:focus-visible .pile{transform:translateY(-50%)}
  .menu-bas{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
    padding:22px 0 26px;border-top:1px solid rgba(var(--rgb-texte),.16);
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;
    color:var(--gris);overflow:hidden;
  }
  .menu-bas>span{display:inline-block;transform:translateY(52px);transition:transform .7s var(--ease)}
  body.menu-ouvert .menu-bas>span{transform:none;transition-delay:.68s}
  .menu-bas a{color:var(--texte);text-decoration:none}
  .menu-bas a:hover{color:var(--violet)}

  /* ---- hero ---- */
  .hero{
    min-height:100svh;display:flex;flex-direction:column;
    justify-content:flex-end;position:relative;overflow:hidden;
    padding-bottom:28px;
  }
  .hero::after{ /* vignette */
    content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
    background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(0,0,0,.35) 100%);
  }
  .lueur{ /* glow bleu derrière le cylindre */
    position:absolute;left:50%;top:44%;width:min(82vw,920px);aspect-ratio:1;
    transform:translate(-50%,-50%);z-index:0;pointer-events:none;
    background:radial-gradient(circle,rgba(var(--rgb-accent),.16) 0%,rgba(var(--rgb-accent),.05) 45%,transparent 70%);
    filter:blur(30px);
    animation:respire 7s ease-in-out infinite;
  }
  @keyframes respire{50%{transform:translate(-50%,-52%) scale(1.07);opacity:.8}}

  .indice-geant{
    position:absolute;left:50%;top:47%;z-index:1;
    transform:translate(-50%,-50%);pointer-events:none;
    font-family:'Instrument Serif',serif;font-weight:800;
    font-size:clamp(150px,36vw,540px);line-height:.9;letter-spacing:-.05em;
    color:transparent;-webkit-text-stroke:1.5px rgba(var(--rgb-texte),.10);
    overflow:hidden;font-variant-numeric:tabular-nums;
  }
  .indice-geant span{display:inline-block;will-change:transform}

  .cote{
    position:absolute;top:52%;z-index:3;pointer-events:none;
    font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.3em;
    color:var(--gris);writing-mode:vertical-rl;
    display:flex;align-items:center;gap:16px;
  }
  .cote::before{content:"";width:1px;height:64px;background:currentColor;opacity:.4}
  .cote-g{left:clamp(16px,2.6vw,44px);transform:translateY(-50%) rotate(180deg)}
  .cote-d{right:clamp(16px,2.6vw,44px);transform:translateY(-50%)}
  @media (max-width:900px){.cote{display:none}}

  .hero-titre{
    position:absolute;top:8svh;left:0;right:0;text-align:center;z-index:1;
    padding:0 16px;pointer-events:none;
  }
  .hero-titre h1{
    font-family:'Instrument Serif',serif;
    font-size:clamp(44px,9.5vw,150px);
    font-weight:800;line-height:.92;letter-spacing:-.035em;
    text-transform:uppercase;
  }
  .hero-titre .ligne{display:block;overflow:hidden}
  .hero-titre .ligne span{display:inline-block;transform:translateY(110%)}
  body.pret .hero-titre .ligne span{animation:monte 1s var(--ease) forwards}
  body.pret .hero-titre .ligne:nth-child(2) span{animation-delay:.12s}
  .hero-titre .l-contour{
    color:transparent;
    -webkit-text-stroke:2px var(--violet);
    text-stroke:2px var(--violet);
  }
  .caret{
    display:inline-block;width:.12em;height:.72em;margin-left:.08em;
    background:var(--violet);vertical-align:baseline;
    animation:clign 1.1s steps(1) infinite;
  }
  @keyframes clign{50%{opacity:0}}
  @keyframes monte{to{transform:translateY(0)}}

  /* ---- scène 3D (mécanique conservée, formes pixel) ---- */
  .scene{
    position:relative;z-index:2;height:82svh;min-height:500px;
    margin-top:-11svh;
    perspective:1250px;perspective-origin:50% 32%;
    display:grid;place-items:center;
    cursor:grab;touch-action:pan-y;
  }
  .scene:active{cursor:grabbing}
  .monde{position:relative;width:0;height:0;transform-style:preserve-3d;will-change:transform}
  .cylindre{position:absolute;width:0;height:0;transform-style:preserve-3d;will-change:transform}

  .carte{
    position:absolute;
    width:var(--cw);height:var(--ch);
    left:calc(var(--cw) / -2);top:calc(var(--ch) / -2);
    overflow:hidden;                       /* ANGLES DROITS : le bloc est la forme */
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border:1px solid rgba(var(--rgb-texte),.14);
    will-change:transform;
    user-select:none;
    background:var(--surface);
  }
  .carte .visuel{position:absolute;inset:0}
  .carte .visuel img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  .carte .visuel .n1,.carte .visuel .n2{opacity:0}
  .carte .voile{position:absolute;inset:0;background:var(--fond);opacity:0}
  .carte .brillance{
    position:absolute;inset:-2px;width:200%;
    background:linear-gradient(105deg,transparent 30%,rgba(var(--rgb-texte),.20) 50%,transparent 70%);
    opacity:0;pointer-events:none;
  }
  .carte .num{
    position:absolute;top:14px;left:14px;
    font-family:'Space Mono',monospace;font-size:11px;color:var(--texte);
    letter-spacing:.14em;background:rgba(var(--rgb-fond),.55);padding:3px 6px;
  }
  .carte .nom{
    position:absolute;bottom:12px;left:14px;right:14px;
    font-family:'Instrument Serif',serif;font-weight:700;
    font-size:17px;color:var(--texte);letter-spacing:-.01em;
    text-shadow:0 1px 0 rgba(0,0,0,.6);
  }
  .carte .lisere{
    position:absolute;inset:0;border:2px solid var(--violet);
    opacity:0;transition:opacity .25s;
  }
  /* coins pixel sur la carte active */
  .carte .lisere::before,.carte .lisere::after{
    content:"";position:absolute;width:8px;height:8px;background:var(--violet);
  }
  .carte .lisere::before{top:-2px;left:-2px}
  .carte .lisere::after{bottom:-2px;right:-2px}

  .reflet .carte{border-color:transparent;background:transparent}
  .reflet .carte .lisere,.reflet .carte .brillance{display:none}
  .reflet .carte::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top,transparent -30%,var(--fond) 78%);
  }

  .anneau{position:absolute;pointer-events:none;will-change:transform;opacity:0}
  .anneau text{
    font-family:'Space Mono',monospace;font-size:30px;letter-spacing:.35em;
    fill:var(--gris);
  }
  .anneau .a-violet{fill:var(--violet)}

  .sol{
    position:absolute;left:50%;bottom:-4svh;width:min(980px,130vw);height:22svh;
    transform:translateX(-50%);z-index:1;pointer-events:none;
    background:radial-gradient(ellipse at 50% 30%,rgba(var(--rgb-accent),.10),transparent 65%);
    filter:blur(8px);
  }

  .legende{
    position:relative;z-index:3;display:flex;align-items:baseline;
    justify-content:space-between;gap:16px;
    padding:0 clamp(20px,4vw,56px);
  }
  .legende .indice,.legende .aide{
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;
    color:var(--gris);
  }
  .legende .projet-actif{
    font-family:'Instrument Serif',serif;font-weight:700;
    font-size:clamp(16px,2.2vw,24px);letter-spacing:-.01em;
    display:flex;align-items:baseline;gap:12px;overflow:hidden;
  }
  .legende .projet-actif .tag{
    font-family:'Space Mono',monospace;font-weight:400;font-size:11px;
    color:var(--violet-clair);letter-spacing:.08em;
  }
  #nomActif,#tagActif{display:inline-block;will-change:transform}

  /* ---- transition en damier de blocs ---- */
  .damier{
    position:fixed;inset:0;z-index:390;pointer-events:none;
    display:grid;
  }
  .damier i{
    background:var(--fond);
    opacity:0;transform:scale(.4);
    transition:opacity .16s steps(2,end),transform .16s steps(2,end);
  }
  .damier i.b{background:var(--violet)}
  .damier.plein i{opacity:1;transform:none;transition-delay:var(--dd)}
  .damier:not(.plein) i{transition-delay:var(--dr)}

  /* ---- bandeau : bleu, orthogonal, dents de pixels ---- */
  .bandeau{
    background:var(--violet);color:var(--fond);
    padding:18px 0;overflow:hidden;white-space:nowrap;
    margin:10vh 0;position:relative;
  }
  .bandeau::before,.bandeau::after{
    content:"";position:absolute;left:0;right:0;height:var(--px);
    background:repeating-linear-gradient(90deg,var(--violet) 0 var(--px),transparent var(--px) calc(var(--px)*2));
  }
  .bandeau::before{bottom:100%}
  .bandeau::after{top:100%}
  .bandeau .piste{display:inline-block;animation:defile 22s linear infinite}
  .bandeau span{
    font-family:'Instrument Serif',serif;font-weight:700;
    font-size:clamp(18px,2.4vw,28px);letter-spacing:-.01em;
    padding:0 28px;
  }
  .bandeau .pt{color:var(--texte);font-style:normal}
  @keyframes defile{to{transform:translateX(-50%)}}

  /* ---- sections ---- */
  section{padding:12vh clamp(20px,4vw,56px)}
  .sec-tete{display:flex;align-items:baseline;gap:20px;margin-bottom:7vh}
  .sec-tete h2{
    font-family:'Instrument Serif',serif;font-weight:800;
    font-size:clamp(32px,5vw,64px);letter-spacing:-.03em;text-transform:uppercase;
  }
  .sec-tete .compte{font-family:'Space Mono',monospace;font-size:12px;color:var(--violet-clair)}

  .liste-projets{border-top:1px solid rgba(var(--rgb-texte),.14)}
  .rang{
    display:grid;grid-template-columns:60px 1fr auto auto;gap:24px;align-items:center;
    padding:26px 8px;border-bottom:1px solid rgba(var(--rgb-texte),.14);
    text-decoration:none;color:var(--texte);position:relative;
    transition:padding .4s var(--ease);
  }
  .rang::before{
    content:"";position:absolute;inset:0;background:var(--violet);
    transform:scaleY(0);transform-origin:bottom;
    transition:transform .35s steps(6,end);
    z-index:0;
  }
  .rang:hover::before,.rang:focus-visible::before{transform:scaleY(1)}
  .rang>*{position:relative;z-index:1;transition:color .3s}
  .rang:hover>*,.rang:focus-visible>*{color:var(--fond)}
  .rang:hover{padding-left:20px}
  .rang .r-num,.rang .r-tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--gris)}
  .rang .r-num{font-size:12px}
  .rang .r-nom{
    font-family:'Instrument Serif',serif;font-weight:700;
    font-size:clamp(20px,3vw,36px);letter-spacing:-.02em;
  }
  .rang .r-an{font-family:'Space Mono',monospace;font-size:11px;color:var(--violet-clair)}
  .rang .r-num,.rang .r-tag,.rang .r-an{
    opacity:0;transition:opacity .6s var(--ease) .25s,color .3s;
  }
  .rang.vu .r-num,.rang.vu .r-tag,.rang.vu .r-an{opacity:1}

  .apercu{
    position:fixed;top:0;left:0;width:224px;height:150px;
    overflow:hidden;pointer-events:none;z-index:90;
    border:1px solid rgba(var(--rgb-texte),.2);
    opacity:0;transform:translate(-50%,-115%) scale(.85);
    transition:opacity .2s steps(3,end),transform .25s var(--ease);
  }
  .apercu.visible{opacity:1;transform:translate(-50%,-115%) scale(1)}
  .apercu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  @media (hover:none){.apercu{display:none}}

  .apropos{display:grid;grid-template-columns:1fr 1fr;gap:6vw}
  .apropos p{
    font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--gris);
    max-width:56ch;
  }
  .apropos p strong{color:var(--texte);font-weight:600}
  .apropos .colonne-meta{
    font-family:'Space Mono',monospace;font-size:12px;line-height:2.1;
    color:var(--gris);letter-spacing:.04em;
  }
  .apropos .colonne-meta b{color:var(--texte);font-weight:700;display:block;margin-top:18px}
  .apropos .colonne-meta b:first-child{margin-top:0}

  .reveal{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.vu{opacity:1;transform:none}

  /* ---- footer : bleu plein, dents en tête ---- */
  footer{
    background:var(--violet);color:var(--fond);
    padding:14vh clamp(20px,4vw,56px) 32px;
    position:relative;margin-top:var(--px);
  }
  footer::before{
    content:"";position:absolute;bottom:100%;left:0;right:0;height:var(--px);
    background:repeating-linear-gradient(90deg,var(--violet) 0 var(--px),transparent var(--px) calc(var(--px)*2));
  }
  footer .cta{
    font-family:'Instrument Serif',serif;font-weight:800;
    font-size:clamp(40px,8vw,120px);letter-spacing:-.035em;line-height:.95;
    text-transform:uppercase;text-decoration:none;color:var(--fond);
    display:inline-block;
  }
  footer .cta em{font-style:normal;color:var(--texte);transition:color .3s}
  footer .cta:hover em{color:#FFFFFF}
  footer .bas{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
    margin-top:10vh;padding-top:24px;border-top:1px solid rgba(var(--rgb-fond),.3);
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;
    color:rgba(var(--rgb-fond),.65);
  }
  footer .bas a{color:var(--fond);text-decoration:none}
  footer .bas a:hover{color:var(--texte)}

  @media (max-width:760px){
    :root{--cw:180px;--ch:243px}
    .scene{perspective:1050px;height:56svh;min-height:340px}
    .apropos{grid-template-columns:1fr}
    .rang{grid-template-columns:40px 1fr auto}
    .rang .r-tag{display:none}
    .legende .aide{display:none}
  }
  /* ============================================================
     VOIX SERIF (Instrument Serif : un seul poids, l'italique fait l'accent)
     ============================================================ */
  .hero-titre h1{font-weight:400;line-height:.95;letter-spacing:-.015em}
  .hero-titre .l-contour{font-style:italic;-webkit-text-stroke:1.5px var(--violet)}
  .sec-tete h2{font-weight:400;font-style:italic;letter-spacing:-.01em}
  .m-roll{font-weight:400}
  .m-roll .pile span:last-child{font-style:italic}
  footer .cta{font-weight:400}
  .indice-geant{font-weight:400;-webkit-text-stroke:1.5px rgba(var(--rgb-texte),.12)}
  .legende .projet-actif{font-weight:400;font-style:italic}
  .rang .r-nom{font-weight:400;transition:font-style 0s}
  .rang:hover .r-nom,.rang:focus-visible .r-nom{font-style:italic}
  .carte .nom{font-weight:400;font-style:italic;font-size:19px}
  .cadre-morph .initiales{font-weight:400;font-style:italic}
  .bandeau span{font-weight:400;font-style:italic}
  .logo{font-weight:400;font-style:italic;font-size:21px;letter-spacing:0}

  /* ============================================================
     EMBELLISSEMENTS CARROUSEL
     ============================================================ */
  /* poussière de pixels qui monte derrière le cylindre */
  .poussiere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .px-p{
    position:absolute;bottom:-12px;background:var(--violet);
    animation:monte-px linear infinite;
  }
  .px-p.clair{background:rgba(var(--rgb-texte),.5)}
  @keyframes monte-px{
    0%{transform:translateY(0);opacity:0}
    8%{opacity:.7}
    100%{transform:translateY(-92svh);opacity:0}
  }
  /* second anneau au sol : pointillés pixels contre-rotatifs */
  .anneau2{position:absolute;pointer-events:none;will-change:transform;opacity:0}
  .anneau2 circle{
    fill:none;stroke:var(--violet);stroke-width:4;
    stroke-dasharray:4 16;opacity:.55;
  }
  /* invite sur la carte active */
  .carte .lisere .ouvrir{
    position:absolute;bottom:10px;right:12px;
    font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
    color:var(--violet);background:rgba(var(--rgb-fond),.6);padding:3px 6px;
  }
  /* lecture d'angle en direct */
  .legende .rot{color:var(--violet);font-variant-numeric:tabular-nums}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;transition-delay:0s !important}
    .hero-titre .ligne span{transform:none}
  }

/* ============================================================
   Voile d'arrivée (le damier prend le relais dès que le JS tourne)
   ============================================================ */
.voile-page{position:fixed;inset:0;background:var(--fond);z-index:389;pointer-events:none}
.damier.instant i{transition:none !important}

/* ============================================================
   Logo du site : nav + loader
   ============================================================ */
.logo-img{height:32px;max-height:32px;width:auto;max-width:180px;display:block;object-fit:contain}
.logo-chargeur{
  position:absolute;width:52%;max-height:38%;object-fit:contain;
  opacity:0;transition:opacity .4s .9s;
  filter:brightness(0) invert(1);           /* silhouette claire sur fond sombre */
}
body.trace .logo-chargeur{opacity:1}

/* ============================================================
   Barre d'admin WordPress
   ============================================================ */
body.admin-bar .nav-site{top:32px}
body.admin-bar .menu{padding-top:32px}
body.admin-bar .chargeur,body.admin-bar .voile-page{top:32px}
@media (max-width:782px){
  body.admin-bar .nav-site{top:46px}
  body.admin-bar .menu{padding-top:46px}
  body.admin-bar .chargeur,body.admin-bar .voile-page{top:46px}
}
/* nav interne du menu : immunisée contre tout style global */
.menu-liens{position:static;inset:auto;padding:0;z-index:auto;mix-blend-mode:normal}

/* ============================================================
   Pages internes (projets, pages Gutenberg) — charte sombre
   ============================================================ */
.page-int{
  min-height:70vh;max-width:1100px;margin:0 auto;
  padding:20vh clamp(20px,4vw,56px) 12vh;position:relative;
}
.page-int h1{
  font-family:'Instrument Serif',serif;font-weight:400;
  font-size:clamp(36px,6vw,84px);letter-spacing:-.015em;line-height:.95;
  text-transform:uppercase;margin-bottom:5vh;color:var(--texte);
}
.page-int .projet-meta{
  display:block;font-family:'Space Mono',monospace;font-size:12px;
  letter-spacing:.1em;color:var(--violet);margin-bottom:16px;
}
.page-int .projet-visuel{
  width:100%;height:auto;margin-bottom:6vh;
  border:1px solid rgba(var(--rgb-texte),.14);
}
.page-int .contenu{
  font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:var(--gris);
  max-width:72ch;
}
.page-int .contenu p{margin-bottom:1.3em}
.page-int .contenu strong{color:var(--texte)}
.page-int .contenu h2,.page-int .contenu h3{
  font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;
  color:var(--texte);letter-spacing:-.01em;margin:1.6em 0 .6em;
}
.page-int .contenu a{color:var(--violet)}
.page-int .contenu img{max-width:100%;height:auto;border:1px solid rgba(var(--rgb-texte),.14)}
.page-int .contenu blockquote{
  border-left:3px solid var(--violet);padding-left:20px;margin:1.6em 0;
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(20px,2.4vw,30px);color:var(--texte);
}
.page-int .contenu .wp-block-button__link{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;
  background:var(--violet);color:var(--fond);border-radius:0;
  padding:14px 28px;text-decoration:none;transition:background .2s steps(3,end);
}
.page-int .contenu .wp-block-button__link:hover{background:var(--texte)}
.page-int .contenu .wp-block-separator{border:0;border-top:1px solid rgba(var(--rgb-texte),.14);max-width:none}
.page-int .contenu ul,.page-int .contenu ol{padding-left:1.2em;margin-bottom:1.3em}
.page-int .retour{
  display:inline-block;margin-top:8vh;
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;
  color:var(--texte);text-decoration:none;border-bottom:1.5px solid var(--violet);
  padding-bottom:3px;
}

/* ============================================================
   Home composée dans Gutenberg (.contenu-home) — charte sombre
   ============================================================ */
.contenu-home{overflow:hidden}
.contenu-home > *{
  padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px);
  margin-top:0;margin-bottom:7vh;
}
.contenu-home > .bandeau{padding-left:0;padding-right:0;margin:8vh 0}
.contenu-home > .sec-tete{margin-bottom:6vh;padding-top:6vh}
.contenu-home > .liste-projets{margin-bottom:10vh}
.contenu-home h2,.contenu-home h3{
  font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--texte);
}
.contenu-home h3{font-size:clamp(22px,3vw,36px)}
.contenu-home p{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:var(--gris);max-width:68ch}
.contenu-home p strong{color:var(--texte);font-weight:600}
.contenu-home .wp-block-columns{gap:5vw}
.contenu-home figure{margin:0}
.contenu-home img{max-width:100%;height:auto;border:1px solid rgba(var(--rgb-texte),.14)}
.contenu-home .wp-block-button__link{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;
  background:var(--violet);color:var(--fond);border-radius:0;
  padding:14px 28px;text-decoration:none;transition:background .2s steps(3,end);
}
.contenu-home .wp-block-button__link:hover{background:var(--texte)}
.contenu-home .citation-geante p{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(26px,4.5vw,56px);letter-spacing:-.01em;line-height:1.1;
  color:var(--texte);max-width:none;
}
.contenu-home .citation-geante cite{
  font-family:'Space Mono',monospace;font-style:normal;font-size:12px;
  letter-spacing:.08em;color:var(--violet);
}
.contenu-home .wp-block-separator{border:0;border-top:1px solid rgba(var(--rgb-texte),.14);max-width:none}