/* Mise en page fluide et sans chevauchement (14/09/2026)
   Chargé en dernier : remplace les positions absolues de l’accueil
   et de la partie Site web par des grilles qui s’adaptent à l’écran. */

.home-btn span,.where,header>a{font-size:clamp(12px,1.25vw,18px)}
.portrait-card{cursor:default}
.door:hover{transform:rotate(0) scale(1.03);box-shadow:10px 10px 0 var(--ink)}

/* ---------- ACCUEIL ---------- */
@media (min-width:801px) and (min-height:521px){
  .lobby{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto 1fr auto;
    grid-template-areas:"intro intro doors" "portrait note doors" "hint hint doors";
    column-gap:3.5vw;row-gap:2.5vh;height:100svh;overflow-y:auto;overflow-x:hidden;
    padding:calc(76px + 4vh) 4vw 84px}
  .intro{grid-area:intro;position:relative;left:auto;top:auto;min-width:0}
  .intro>p{font-size:clamp(12px,1.2vw,18px);margin:0}
  .intro h1{font-size:clamp(2.6rem,min(6.2vw,10.5vh),8.4rem);margin:.3em 0 0}
  .portrait-card{grid-area:portrait;position:relative;left:auto;bottom:auto;align-self:end;
    width:clamp(170px,min(17vw,30vh),300px);min-width:0;padding:10px 10px 38px;transform:rotate(-3deg)}
  .manifesto-note{grid-area:note;position:relative;left:auto;bottom:auto;align-self:end;justify-self:start;
    width:clamp(150px,14vw,210px);margin-bottom:2vh}
  .manifesto-note.open{position:fixed;z-index:85;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);
    width:min(620px,90vw);max-height:80svh;overflow-y:auto;box-shadow:12px 12px 0 var(--ink)}
  .hint{grid-area:hint;position:static;margin:0}
  .doors{grid-area:doors;position:relative;right:auto;top:auto;width:auto;height:auto;align-self:center;
    display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:clamp(20px,2.4vw,36px)}
  .door{position:relative;inset:auto;width:auto;height:auto;min-height:clamp(170px,30vh,330px);padding:clamp(14px,1.4vw,22px)}
  .d1{transform:rotate(-1.5deg)}.d2{transform:rotate(1.5deg)}.d3{transform:rotate(1deg)}.d4{transform:rotate(-1deg)}
  .door b{font-size:clamp(1.35rem,min(2.3vw,4.4vh),2.9rem)}
  .door small,.door i{font-size:clamp(11px,min(1vw,1.9vh),16px)}
  .door span{font-size:clamp(13px,min(1.15vw,2.1vh),18px);max-width:none}
}
/* Tablette en portrait : on empile */
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait){
  .lobby{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto;
    grid-template-areas:"intro intro" "doors doors" "portrait note" "hint hint";row-gap:5vh;height:100svh}
  .intro h1{font-size:clamp(3rem,10vw,7rem)}
  .door{min-height:24vh}
  .door b{font-size:clamp(1.6rem,3.6vw,2.6rem)}
  .door span{font-size:16px}
  .door small,.door i{font-size:13px}
  .portrait-card{width:34vw}
  .manifesto-note{width:260px}
}
/* Téléphone */
@media (max-width:800px),(max-height:520px){
  .door{height:auto!important;min-height:200px}
  .door b{font-size:clamp(1.5rem,7vw,2.4rem);overflow-wrap:normal}
  .manifesto-note{width:auto;max-width:88vw;transform:none}
  .lobby{padding-bottom:90px}
}
@media (max-width:560px){
  .doors{grid-template-columns:1fr;gap:22px}
  .door{min-height:170px}
}

/* ---------- FORMATEUR IA : les textes tiennent dans chaque écran ---------- */
@media (min-width:801px) and (min-height:521px){
  .frame{padding:clamp(56px,9vh,110px) 6vw clamp(40px,7vh,90px)}
  .text-frame h3{font-size:clamp(1.8rem,min(4vw,6.6vh),5rem)}
  .text-frame p{font-size:clamp(14px,min(1.45vw,2.5vh),24px)}
  .courses section{padding:min(22px,2.4vh) 0;gap:2.5vw}
  .courses b{font-size:clamp(1.5rem,min(3.2vw,5.6vh),4.5rem)}
  .courses p{font-size:clamp(14px,min(1.5vw,2.55vh),25px);margin:0}
  .courses i{font-size:clamp(12px,min(1.1vw,1.9vh),18px)}
  .refs>p:last-child{font-size:clamp(1rem,min(2.2vw,3.6vh),3rem);margin-top:4vh}
  .books{flex-wrap:wrap;align-content:center;row-gap:3vh}
  .books>.label{position:static;flex-basis:100%;margin:0}
  .books img{height:44vh}
  .books figcaption b{font-size:clamp(17px,min(1.9vw,3.2vh),29px)}
  .books figcaption span{font-size:clamp(13px,min(1.3vw,2.2vh),20px)}
  .books .book-coming{font-size:clamp(12px,min(1.1vw,2vh),17px)}
  .books .book-restricted{font-size:clamp(11px,min(1.1vw,2vh),17px)}
  .linkedin>b{font-size:clamp(4rem,min(11vw,18vh),13rem)}
  .linkedin h3{font-size:clamp(1.5rem,min(2.4vw,4vh),2.2rem)}
  .call p{font-size:clamp(1.8rem,min(4vw,7vh),4.5rem)}
}

/* ---------- CRÉATEUR WEB ---------- */
.web-intro>p{font:500 18px/1.4 var(--mono);margin:0}
.web-stage .web-pitch article{order:-1}
.web-stage article{position:static;inset:auto;width:auto;margin:0}
.word-cloud{display:flex;flex-wrap:wrap;gap:30px 20px}
.word-cloud span:nth-child(n){position:relative!important;inset:auto!important;display:inline-block;margin:0;
  padding:10px 16px;font-size:clamp(12px,1.1vw,18px);box-shadow:5px 5px 0 var(--ink)}
.word-cloud span:nth-child(1){transform:rotate(-2deg)}
.word-cloud span:nth-child(2){transform:rotate(2deg)}
.word-cloud span:nth-child(3){transform:rotate(-1.5deg)}
.word-cloud span:nth-child(4){transform:rotate(2.5deg)}
.word-cloud span:nth-child(5){transform:rotate(-2deg)}
.r-web.shaken .word-cloud span:nth-child(n){transform:translate(var(--x),var(--y)) rotate(var(--r))}
.chaos{position:static;inset:auto;align-self:flex-start}
.web-gallery{position:static;inset:auto}

@media (min-width:801px) and (min-height:521px){
  .r-web{overflow-x:auto;overflow-y:hidden}
  .web-stage{display:flex;align-items:center;gap:6vw;width:max-content;height:calc(100svh - 76px);min-height:0;
    padding:max(72px,9vh) 6vw 76px 4vw}
  .web-intro{flex:none}
  .web-intro>p{font-size:clamp(12px,1.2vw,18px)}
  .web-stage h2{font-size:clamp(3rem,min(8vw,13.5vh),13rem);width:auto;margin:.3em 0 0}
  .web-pitch{flex:none;width:clamp(320px,34vw,600px);display:flex;flex-direction:column;gap:4.5vh}
  .web-stage article{font-size:clamp(15px,min(1.6vw,2.8vh),26px)}
  .web-stage article a{margin-top:2.5vh}
  .web-gallery{flex:none;width:auto;height:100%;display:flex;align-items:center;gap:4vw}
  .web-gallery figure:nth-child(n){min-width:0;transform:rotate(-.8deg)}
  .web-gallery figure:nth-child(even){transform:rotate(.8deg)}
  .web-gallery figure:hover{transform:rotate(0)}
  .web-gallery img,.web-gallery .al3x1s-site>a{width:min(29vw,50vh);height:calc(100svh - 76px - max(72px,9vh) - 76px - 50px)}
  .web-gallery .al3x1s-site img{width:100%;height:100%}
}
@media (max-width:800px),(max-height:520px){
  .r-web{overflow-y:auto;overflow-x:hidden}
  .web-stage{display:block;width:100%;height:auto;min-height:0;padding:120px 6vw 110px}
  .web-stage h2{font-size:clamp(2.6rem,14vw,6rem);width:auto}
  .web-pitch{display:flex;flex-direction:column;gap:6vh;width:auto;margin-top:7vh}
  .web-stage article{font-size:20px}
  .web-gallery{display:grid;grid-template-columns:1fr 1fr;gap:6vh 5vw;width:auto;height:auto;margin-top:10vh}
  .web-gallery figure:nth-child(n){min-width:0;transform:none}
  .web-gallery img{width:100%;height:auto}
}
@media (max-width:560px){
  .web-gallery{grid-template-columns:1fr}
  .word-cloud span:nth-child(n){font-size:14px}
}

.about{overflow-x:hidden}

/* ---------- ANIA : cartes qui passent à la ligne ---------- */
@media (min-width:801px) and (min-height:521px){
  .ania-cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .ania-cards b{font-size:clamp(1.6rem,2.6vw,2.6rem);overflow-wrap:break-word}
  .ania-cards p{font-size:clamp(16px,1.5vw,22px)}
}

/* « Remuez la page » : couleurs toujours lisibles */
.r-web.shaken .word-cloud span:nth-child(n){background:var(--c);color:var(--ink);border-color:var(--ink)}

/* Téléphone : le bouton retour devient un bandeau sous l’en-tête */
@media (max-width:800px),(max-height:520px){
  .exit{left:0;right:0;top:62px;width:100%;border-width:0 0 1px;text-align:left;padding:12px 16px}
  .room,.about{padding-top:101px}
  .web-stage{padding-top:48px}
}

/* ---------- Curseur repris d’al3x1s.com ---------- */
.pointer{display:none!important}
.has-halo body,.has-halo button,.has-halo a{cursor:none}
.has-halo img{cursor:default}
.cursor-halo{position:fixed;top:0;left:0;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,107,0,.35);
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:transform .22s ease,width .22s ease,height .22s ease,opacity .2s ease}
.cursor-halo.hover{width:38px;height:38px;border-color:rgba(255,107,0,.55)}
.cursor-particle{position:fixed;width:3px;height:3px;border-radius:50%;background:#ff6b00;pointer-events:none;
  z-index:9997;opacity:.7;transform:translate(-50%,-50%)}

/* ---------- « Oui, c’est moi » : portrait réduit de moitié ---------- */
@media (min-width:801px) and (min-height:521px){
  .portrait-card{width:clamp(110px,min(8.5vw,15vh),150px);padding:6px 6px 26px}
  .portrait-card figcaption{padding-top:7px;font-size:9px}
}
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait){
  .portrait-card{width:17vw}
}

/* ---------- Flèches de défilement ---------- */
.scroll-cue{position:fixed;z-index:78;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:#241d19;color:#fff;font:500 22px/1 var(--mono);display:grid;place-items:center;padding:0;
  box-shadow:0 4px 18px rgba(0,0,0,.28)}
.scroll-cue--right{right:18px;top:50%;animation:cueRight 1.6s ease-in-out infinite}
.scroll-cue--down{left:50%;bottom:18px;animation:cueDown 1.6s ease-in-out infinite}
.scroll-cue:hover{background:#ff6b00;color:#241d19}
@keyframes cueRight{0%,100%{transform:translate(0,-50%)}50%{transform:translate(7px,-50%)}}
@keyframes cueDown{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none}}
@media (max-width:800px),(max-height:520px){.scroll-cue{width:44px;height:44px;font-size:19px}}
.scroll-cue[hidden]{display:none}

/* ---------- 14/09 : accueil sans photo, 4 rubriques 30 % plus grandes ---------- */
@media (min-width:801px) and (min-height:521px){
  .lobby{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);grid-template-rows:auto 1fr auto;
    grid-template-areas:"intro doors" "note doors" "hint doors";padding-bottom:76px}
  .intro h1{font-size:clamp(2.6rem,min(5.6vw,10vh),8rem)}
  .manifesto-note{grid-area:note}
  .doors{gap:clamp(24px,2.6vw,40px)}
  .door{min-height:clamp(220px,34vh,430px);padding:clamp(18px,1.8vw,28px)}
  .door b{font-size:clamp(1.75rem,min(3vw,5.7vh),3.8rem)}
  .door small,.door i{font-size:clamp(14px,min(1.3vw,2.4vh),21px)}
  .door span{font-size:clamp(17px,min(1.5vw,2.7vh),23px)}
}
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait){
  .lobby{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;
    grid-template-areas:"intro" "doors" "note" "hint"}
  .intro h1{font-size:clamp(3rem,10vw,7rem)}
  .door{min-height:31vh}
  .door b{font-size:clamp(2.1rem,4.7vw,3.4rem)}
  .door span{font-size:21px}
  .door small,.door i{font-size:17px}
}
@media (max-width:800px),(max-height:520px){
  .door{min-height:260px}
  .door b{font-size:clamp(1.95rem,9vw,3.1rem)}
  .door span{font-size:21px}
  .door small,.door i{font-size:17px}
}
@media (max-width:560px){.door{min-height:220px}}

/* ---------- Qui suis-je : images « Oui, c’est moi ! » réduites de moitié ---------- */
.pub-gallery{columns:8}
@media (max-width:1100px){.pub-gallery{columns:6}}
@media (max-width:800px),(max-height:520px){.pub-gallery{columns:4}}
@media (max-width:520px){.pub-gallery{columns:2}}
.pub-gallery figcaption{font-size:12px;letter-spacing:.04em}

/* ---------- 14/09 : titre en haut / en bas, « Pourquoi tout ça ? » à côté de « Qui suis-je ? » ---------- */
.intro h1 .h1-top,.intro h1 .h1-bottom{display:block}
@media (min-width:801px) and (min-height:521px){
  .lobby{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"intro doors" "hint note";column-gap:2vw;row-gap:2.5vh;padding:calc(76px + 4vh) 7vw 18px 4vw}
  .intro{display:flex;flex-direction:column;min-height:0}
  .intro h1{flex:1;display:flex;flex-direction:column;justify-content:space-between;margin:.3em 0 0}
  .intro h1 .h1-bottom{margin-top:.5em}
  .doors{align-self:center}
  .manifesto-note{grid-area:note;align-self:end;justify-self:start;margin:0;transform:none}
  .manifesto-note.open{transform:translate(-50%,-50%)}
  .hint{align-self:end;margin:0 0 4px}
}
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait){
  .lobby{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;
    grid-template-areas:"intro" "doors" "note" "hint";padding:calc(76px + 4vh) 4vw 90px}
  .intro h1{flex:none;display:block}
  .intro h1 .h1-bottom{margin-top:0}
}
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait){.intro{display:block;min-height:auto}}

/* ---------- 14/09 : photo entre les deux moitiés du titre, couleurs ---------- */
.intro h1 .hero-ia{color:var(--ink)}
.intro h1 .hero-accent{color:var(--ania-orange)}
.h1-photo{display:block;margin:.28em 0}
.h1-photo img{display:block;width:min(100%,420px);height:auto;border:8px solid #fff;box-shadow:7px 7px 0 var(--ink);transform:rotate(-2deg)}
@media (min-width:801px) and (min-height:521px){
  .intro h1 .h1-bottom{margin-top:0}
  .h1-photo{flex:1 1 0;min-height:0;display:flex;align-items:center;margin:.22em 0;padding:10px 12px}
  .h1-photo img{width:auto;height:auto;max-width:100%;max-height:100%}
}
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait){
  .h1-photo{display:block;padding:0}
  .h1-photo img{width:min(100%,420px);max-height:none}
}

/* ---------- 14/09 : Créateur web — captures pleine largeur, sans légende ---------- */
.web-gallery figcaption{display:none}
@media (min-width:801px) and (min-height:521px){
  .web-gallery img{object-fit:cover;object-position:top center;background:none}
  .web-gallery img,.web-gallery .al3x1s-site>a{height:calc(100svh - 76px - max(72px,9vh) - 76px)}
}

/* ======================================================================
   14/09 : ACCUEIL FOND NOIR, CARTES RONDES — autres pages : crème → blanc
   ====================================================================== */
html,body{background:#0d0d0d}
.lobby{background:#0d0d0d;color:#fff}
.intro>p,.hint{color:rgba(255,255,255,.85)}
.intro h1,.intro h1 .hero-ia{color:#fff}
.intro h1 .hero-accent{color:var(--ania-orange)}
.h1-photo img{box-shadow:none}

/* En-tête : noir sur l’accueil, blanc dans les pages */
body:not(.inside) header{background:rgba(13,13,13,.92);border-bottom-color:rgba(255,255,255,.18);color:#fff}
body:not(.inside) .home-btn b{background:#fff;color:#0d0d0d}
body:not(.inside) .where strong{color:var(--ania-orange)}
body:not(.inside) .about-btn{box-shadow:0 0 0 1px rgba(255,255,255,.75)}
body.inside header{background:rgba(255,255,255,.94)}

/* « Pourquoi ça ? » : pilule comme « Qui suis-je ? » */
.manifesto-note:not(.open){border-radius:999px;padding:13px 18px;width:auto;box-shadow:none;transform:none}
.manifesto-note:not(.open) b{font:500 16px/1.35 var(--mono);white-space:nowrap}
.manifesto-note.open{border-radius:22px}

/* Cartes rondes */
.door{border-radius:50%;aspect-ratio:1;align-items:center;justify-content:center;text-align:center;
  box-shadow:none;border:0;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.d1,.d2,.d3,.d4{transform:none}
.door:hover,.door:focus-visible{transform:scale(1.1);box-shadow:none;z-index:9}
.door b{margin:.35em 0;overflow-wrap:normal}
.door span{max-width:78%!important;margin:0 auto}
.door i{margin-top:.8em}

@media (min-width:801px) and (min-height:521px){
  .doors{align-self:stretch;justify-self:stretch;container-type:size;display:grid;
    grid-template-columns:repeat(2,auto);grid-auto-rows:auto;align-content:center;justify-content:start;gap:clamp(28px,3vw,48px)}
  .door{--d:min(calc(50cqw - 24px),calc(50cqh - 24px));width:var(--d);height:var(--d);min-height:0;
    padding:calc(var(--d)*.12);font-size:calc(var(--d)*.043)}
  .door small,.door i{font-size:1em}
  .door b{font-size:2.35em}
  .door span{font-size:1.28em;line-height:1.3}
}
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait){
  .doors{container-type:inline-size;align-self:auto;justify-content:center}
  .door{--d:min(calc(50cqw - 24px),380px);height:var(--d)}
}
@media (max-width:800px),(max-height:520px){
  .doors{container-type:inline-size;justify-items:center}
  .door{--d:min(calc(50cqw - 12px),360px);width:var(--d);height:var(--d)!important;min-height:0;
    padding:calc(var(--d)*.12);font-size:calc(var(--d)*.043)}
  .door small,.door i{font-size:1em}
  .door b{font-size:2.35em}
  .door span{font-size:1.28em;line-height:1.3}
}
@media (max-width:560px){
  .door{--d:min(88cqw,340px);min-height:0}
}

/* Autres pages : fonds crème → blanc (les textes ne changent pas) */
.exit{background:#fff}
.r-formation .text-frame,.r-formation .linkedin{background:#fff}
.r-web,.r-web .web-stage{background:#fff}
.r-web .word-cloud span:nth-child(even){background:#fff}
.pub-gallery img{background:#fff}
@media (max-width:800px),(max-height:520px){
  .doors{gap:34px}
  .door{--d:min(calc(50cqw - 17px),360px)}
}
@media (max-width:560px){.doors{gap:34px}.door{--d:min(88cqw,340px)}}

/* ---------- 14/09 : photo d’accueil au format Polaroid ---------- */
.h1-photo img{aspect-ratio:1;object-fit:cover;background:#fff;border:0;
  padding:clamp(7px,.9vw,14px) clamp(7px,.9vw,14px) clamp(26px,3.4vw,52px);box-sizing:border-box;transform:rotate(-2.5deg)}
.h1-photo img{aspect-ratio:auto}
@media (min-width:801px) and (min-height:521px){
  .h1-photo img{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain}
}
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait),(max-width:800px),(max-height:520px){
  .h1-photo img{width:min(78%,380px);height:auto;max-height:none}
}

/* ---------- 14/09 : Polaroid +20 %, curseur ×2 ---------- */
.cursor-halo{width:48px;height:48px}
.cursor-halo.hover{width:76px;height:76px}
.h1-photo img{transform:rotate(-1.5deg)}
@media (min-width:801px) and (min-height:521px){
  .intro h1{margin-top:.15em}
  .h1-photo{margin:0;padding:6px 8px}
}
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait),(max-width:800px),(max-height:520px){
  .h1-photo img{width:min(94%,456px)}
}
@media (min-width:801px) and (min-height:521px){.h1-photo{padding:2px 8px}}
.h1-photo img{transform:rotate(-1deg)}
@media (min-width:801px) and (min-height:521px){.h1-photo{padding:4px 8px}}
@media (min-width:801px) and (max-width:1100px) and (orientation:portrait),(max-width:800px),(max-height:520px){.h1-photo{padding:10px 0}}

/* ---------- 14/09 : accroche Créateur web — rouge / vert inversés ---------- */
.r-web .web-stage h2{color:var(--web-red)}
.r-web .web-stage h2 .web-h2-red{color:#d7262e}
.r-web .web-stage h2 .seen-100{color:var(--web-red)}

/* Bouton retour toujours lisible (texte noir sur blanc) */
.exit,.r-ania .exit,.r-photo .exit,.about .exit,.r-formation .exit,.r-web .exit{background:#fff;color:#0d0d0d;border-color:#0d0d0d}

/* ---------- 14/09 : tous les boutons en pilule, comme « Qui suis-je ? » ---------- */
.exit,.chaos,.manifesto-note:not(.open),.about-btn,.word-cloud span:nth-child(n){border-radius:999px}
.exit{padding:11px 18px;font:500 14px/1.2 var(--mono);border:1px solid #0d0d0d}
.chaos{padding:13px 22px;font:500 16px/1.2 var(--mono)}

/* Créateur web : étiquettes rouges ou blanches liserées de rouge */
.r-web .word-cloud span:nth-child(n){box-shadow:none;border:2px solid #d7262e;padding:11px 20px}
.r-web .word-cloud span:nth-child(odd){background:#d7262e;color:#fff}
.r-web .word-cloud span:nth-child(even){background:#fff;color:#d7262e}
.r-web.shaken .word-cloud span:nth-child(odd){background:#d7262e;color:#fff;border-color:#d7262e}
.r-web.shaken .word-cloud span:nth-child(even){background:#fff;color:#d7262e;border-color:#d7262e}
.r-web .chaos{background:#d7262e;color:#fff;border:2px solid #d7262e}
.r-web .chaos:hover{background:#fff;color:#d7262e}

@media (max-width:800px),(max-height:520px){
  .exit{left:12px;right:auto;top:72px;width:auto;border-width:1px;padding:9px 14px;font-size:12px}
}

/* Accroche Créateur web : première moitié en orange */
.r-web .web-stage h2 .web-h2-red{color:var(--ania-orange)}

/* Créateur web : étiquettes et « Remuez la page » en orange / blanc liseré orange */
.r-web .word-cloud span:nth-child(n),.r-web.shaken .word-cloud span:nth-child(n){border-color:var(--ania-orange)}
.r-web .word-cloud span:nth-child(odd),.r-web.shaken .word-cloud span:nth-child(odd){background:var(--ania-orange);color:#fff}
.r-web .word-cloud span:nth-child(even),.r-web.shaken .word-cloud span:nth-child(even){background:#fff;color:var(--ania-orange)}
.r-web .chaos{background:var(--ania-orange);border-color:var(--ania-orange);color:#fff}
.r-web .chaos:hover{background:#fff;color:var(--ania-orange)}

/* ---------- 14/09 : Promptographe — accents orange ---------- */
.r-photo .gallery-head h2 span{color:var(--ania-orange)}
.r-photo .gallery figcaption{color:var(--ania-orange)}
/* Sur le fond gris, un lien orange serait illisible : pilule orange, texte noir */
.r-photo .photo-end a{display:inline-block;background:var(--ania-orange);color:#0d0d0d;border:2px solid var(--ania-orange);
  border-radius:999px;padding:13px 22px;text-decoration:none}
.r-photo .photo-end a:hover{background:#0d0d0d;color:var(--ania-orange);border-color:#0d0d0d}

/* ---------- 14/09 : « Pourquoi ça ? » blanc / noir, s’ouvre en rond ---------- */
.manifesto-note,.manifesto-note b,.manifesto-note span,.manifesto-note strong{color:#0d0d0d}
.manifesto-note{background:#fff}
.manifesto-note:not(.open):hover{background:var(--ania-orange)}
.manifesto-note.open{background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45)}
@media (min-width:801px) and (min-height:521px){
  .manifesto-note.open{--d:min(92vmin,880px);width:var(--d);height:var(--d);max-height:none;border-radius:50%;
    padding:calc(var(--d)*.155);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .manifesto-note.open b{font-size:calc(var(--d)*.016)}
  .manifesto-note.open span{font-size:calc(var(--d)*.0205);line-height:1.45;margin-top:.8em}
  .manifesto-note.open strong{margin-top:.7em}
}
@media (max-width:800px),(max-height:520px){
  .manifesto-note.open{border-radius:28px}
}

/* ---------- 14/09 : Qui suis-je — mentions légales et CGU ---------- */
.legal{margin:4vh 5vw 14vh;padding-top:6vh;border-top:2px solid rgba(255,255,255,.6);color:#fff}
.legal>span{font:600 15px var(--mono);letter-spacing:.08em}
.legal h2{font-size:clamp(34px,4.5vw,72px);line-height:1;margin:.4em 0 .6em}
.legal h2#cgu{margin-top:1.6em}
.legal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:4vh 4vw}
.legal h3{font:600 15px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .8em;color:var(--ania-orange)}
.legal p{font-size:clamp(15px,1.15vw,18px)!important;line-height:1.6!important;margin:0 0 .9em}
.legal a{color:#fff;text-decoration:underline}
.legal-update{margin-top:5vh!important;font:500 13px var(--mono)!important;opacity:.8}

/* ---------- 14/09 : « FERMER » dans le rond orange au survol du texte ouvert ---------- */
.cursor-halo{display:grid;place-items:center}
.cursor-halo.close{width:84px;height:84px;background:rgba(255,107,0,.12);border-color:rgba(255,107,0,.85)}
.cursor-halo.close::after{content:'FERMER';font:600 12px/1 var(--mono);letter-spacing:.06em;color:#ff6b00}
/* Écrans tactiles (pas de curseur) : indication écrite en bas du texte */
html:not(.has-halo) .manifesto-note.open::after{content:'FERMER ×';display:block;margin-top:1.2em;font:600 13px var(--mono);color:#ff6b00}

/* Carte ANIA : texte blanc */
.d4,.d4 small,.d4 b,.d4 span,.d4 i{color:#fff}

/* ---------- 14/09 : bloc « Sports / Centres d’intérêt / Fun fact » ---------- */
.offwork{background:var(--ania-orange)!important;color:#0d0d0d}
.offwork h3{color:#fff!important;font-weight:700!important}
.offwork p,.offwork i,.offwork a{color:#0d0d0d}
.offwork i{opacity:.75}

/* Page « Qui suis-je ? » : fond noir */
.about{background:#0d0d0d!important;color:#fff}

/* Repère « Vous êtes ici » sur Qui suis-je : orange */
body.theme-about .where strong{color:var(--ania-orange)}