/* ==========================================================================
   ACCUEIL — sections 1 à 3 (entrée, définition, qui je suis)
   Sections « épinglées » : la scène reste fixe pendant que la page défile ;
   js/accueil.js lit l'avancement du scroll et anime les éléments.
   ========================================================================== */

.pin { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.full { position: absolute; inset: 0; }
.plein-cadre { position: absolute !important; inset: 0; }

.etiquette { font: 500 .72rem/1 var(--texte); letter-spacing: .22em; opacity: .7; }

/* Longueur de défilement de chaque section */
#s-intro { height: 330vh; }      /* 680 avant le 11/11 : plus de phase « cerveau flou », l'écran « dans ma tête » reste ~1 écran puis part par le haut */
#s-def   { height: 310vh; }
#s-qui   { height: 260vh; }

/* ---------- Mots qui apparaissent un à un ---------- */
.mot { display: inline-block; opacity: 0; transform: translateY(35%); transition: opacity .35s, transform .35s; }
.mot.on { opacity: 1; transform: none; }

/* ---------- 1 · Entrée ---------- */
/* Fond unique des sections 1 et 2 : reste fixe pendant le défilement, sous les scènes */
#decor { position: relative; }
#fond { position: absolute; inset: 0; overflow: hidden; z-index: 0; clip-path: circle(0 at 50% 50%); }      /* 11/11/2026 : dans l'écran d'entrée, il part avec lui (avant : fixe derrière l'entrée et la Définition) */
#fondimg { position: absolute !important; inset: -40px; }
#decor .pin { z-index: 1; }
#decor .stage { background: none; }
#welcome { z-index: 5; will-change: opacity, transform, filter; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 400; }
#welcome .bienvenue { font-family: var(--titre); text-transform: uppercase; line-height: .95; font-size: clamp(3.5rem, 11vw, 9.4rem); }
#welcome .monde { display: block; font-size: clamp(3rem, 9vw, 8rem); margin-top: -.1em; line-height: 1.1; }
#welcome .invite { margin-top: 28px; font-family: var(--texte); font-weight: 500; text-transform: none; font-size: .95rem; letter-spacing: .08em; opacity: .85; }

/* La porte : l'ouverture est transparente, son ombre portée géante forme le mur crème tout autour.
   Le battant pivote sur sa gauche (rotateY) ; le « rideau » cache la pièce tant que la porte est fermée. */
.porte { overflow: hidden; pointer-events: none; z-index: 2; }
.porte-ouverture { position: absolute; left: 50%; top: 50%; height: min(64vh, 64svh); aspect-ratio: .5; margin: calc(min(64vh, 64svh) / -2) 0 0 calc(min(64vh, 64svh) / -4); box-sizing: border-box; border: clamp(8px, 1.4vh, 14px) solid color-mix(in srgb, var(--chocolat) calc(var(--a, 1) * 100%), transparent); border-radius: 999px 999px 0 0 / 22% 22% 0 0; box-shadow: 0 0 0 100vmax var(--creme); perspective: 1400px; will-change: transform; }
.porte-rideau { position: absolute; inset: 0; background: var(--creme); border-radius: inherit; }
.porte-battant { position: absolute; inset: 0; background: var(--kraft, #CBB38F); border-radius: 999px 999px 0 0 / 22% 22% 0 0; transform-origin: 0 50%; will-change: transform; box-shadow: inset 0 0 0 clamp(8px, 1.4vh, 14px) rgba(46, 32, 25, .12), inset 0 0 0 clamp(10px, 1.7vh, 17px) rgba(246, 237, 226, .35); }
.porte-battant::before, .porte-battant::after { content: ""; position: absolute; left: 20%; right: 20%; border: 2px solid rgba(46, 32, 25, .22); border-radius: 8px; }
.porte-battant::before { top: 14%; height: 30%; }
.porte-battant::after { top: 52%; height: 30%; }
.porte-poignee { position: absolute; right: 9%; top: 52%; width: clamp(14px, 2.6vh, 24px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #F2DA86 55%, #c9ae55); box-shadow: 0 2px 5px rgba(46, 32, 25, .4); }

.headwrap { position: absolute; left: 50%; bottom: 0; width: min(100vw, 78vh); aspect-ratio: 1 / 1; transform: translateX(-50%); }   /* photo carrée : arrive du bas, ~78 % de la hauteur */
#headzoom { position: absolute; inset: 0; will-change: transform; }
/* Bloc de couleur provisoire (silhouette) tant que la photo n'est pas là */
.silhouette { position: absolute !important; inset: 0; }
.silhouette:not(.charge) { left: 22%; right: 22%; border-radius: 50% 50% 0 0 / 62% 62% 0 0; }
.silhouette:not(.charge)::after { content: ""; position: absolute; left: 35.4%; top: 33.2%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: var(--chocolat); opacity: .5; transform: translate(-50%, -50%); }
.silhouette img { object-fit: cover; object-position: center top; }
.silhouette.charge { border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(46, 32, 25, .18); }

#inside { z-index: 3; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20vh 20px 0; text-align: center; pointer-events: none; }
#inside .dedans1 { font-family: var(--titre); text-transform: uppercase; line-height: .95; font-size: clamp(2.8rem, 8vw, 7.4rem); }
/* « Faites comme chez vous. » = chute : serif italique, bleu */
#inside .dedans2 { font-family: var(--serif); font-style: italic; color: var(--bleu); font-size: clamp(2.5rem, 6.4vw, 6rem); margin-top: .1em; line-height: 1.1; }

/* ---------- 2 · Définition ---------- */
#veil { background: var(--creme); opacity: 0; }
.br { position: absolute; top: 16vh; height: 68vh; width: clamp(50px, 9vw, 120px); border: clamp(14px, 2.2vw, 26px) solid var(--rose); }
.br.l { left: clamp(12px, 4vw, 56px); border-right: none; border-radius: 999px 0 0 999px; }
.br.r { right: clamp(12px, 4vw, 56px); border-left: none; border-radius: 0 999px 999px 0; }
#defbox { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16vw; }
#deflab { opacity: 0; }
#slit { overflow: hidden; line-height: .9; padding-top: .05em; }
#word { font-size: clamp(5rem, 17vw, 14rem); transform: translateY(105%); }
#word sup { font-size: .3em; vertical-align: top; }
#pron { margin-top: 10px; opacity: 0; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
#pron .prononciation { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.6rem); opacity: .75; }
#pron .pastille { border: 1px solid var(--chocolat); border-radius: 999px; padding: 4px 12px; font-size: .7rem; letter-spacing: .2em; }
#deftext { margin: 22px 0 0; font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.5rem); line-height: 1.2; max-width: 900px; }
#deftext .w { opacity: 0; color: var(--chocolat); transition: opacity .25s; }
#deftext .w.in { opacity: .35; }
#deftext .w.on { opacity: 1; }
#deftext .w.em { font-style: italic; }
#deftext .w.em.on { color: var(--bleu); }
#syn { margin: 18px 0 0; font-size: .75rem; letter-spacing: .18em; opacity: 0; }
#syn .abrev { font-family: var(--serif); font-style: italic; letter-spacing: 0; font-size: 1rem; }

/* ---------- 3 · Qui je suis (fond rose poudré) ---------- */
#s-qui .stage { background: var(--rose); display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(24px, 9vw, 140px); }
#s-qui .etiquette { margin-bottom: 18px; }
#sig { margin: 0; font-weight: 400; }
#sig .titre-qui { display: block; font-family: var(--titre); text-transform: uppercase; line-height: .95; font-size: clamp(2.6rem, 7vw, 6.2rem); }
#sig .chute-qui { display: block; text-transform: none; font-family: var(--serif); font-style: italic; color: var(--bleu); line-height: 1.05; font-size: clamp(2.4rem, 6.6vw, 6rem); margin-top: .05em; }
#para { margin-top: clamp(24px, 5vh, 56px); max-width: 860px; }
@media (min-width: 1000px) { #para { max-width: none; } }   /* « … : j'ai arrêté de choisir. » reste sur la même ligne */
#para .ln { font-size: clamp(1.1rem, 2vw, 1.7rem); line-height: 1.4; opacity: .15; filter: blur(8px); transition: opacity .45s, filter .45s; }
#para .ln.on { opacity: 1; filter: none; }
#para .ln:last-child { font-size: clamp(1.5rem, 3.4vw, 2.8rem); line-height: 1.2; margin-top: .3em; }

@media (max-width: 560px) {
  #defbox { padding: 0 20px; }
  .br { display: none; }
}

/* ---------- Mouvement réduit : tout s'affiche, sans épinglage ---------- */
.statique .pin { height: auto !important; }
.statique .stage { position: relative; height: auto; min-height: 100svh; }
.statique #welcome { position: relative; min-height: 70svh; }
.statique #headlayer,.statique #fond { display: none; }
.statique #decor .stage { background: var(--creme-fonce); }
.statique #inside { position: relative; padding: 10vh 20px; }
.statique #defbox { position: relative; min-height: 100svh; }
.statique .mot { transition: none; }

/* ==========================================================================
   SECTIONS 4 à 7 : parcours, jobs étudiants, manifeste, compétences + qualités
   Alternance des fonds : rose (3) · crème foncé (4) · rose (5) · crème foncé (6) · rose (7)
   ========================================================================== */

/* Titre de section commun : Anton en majuscules, chute en serif italique bleu sur sa ligne */
.titre-section { font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: .98; margin: .25em 0 0; }
.titre-section em { display: block; font-size: 1.06em; line-height: 1.1; }
.titre-section.sur-une-ligne em { display: inline; }
.titre-long { font-size: clamp(1.7rem, 3.6vw, 3.2rem); max-width: 18em; }
@media (min-width: 900px) { .titre-long { font-size: clamp(1.7rem, 3.1vw, 3rem); max-width: none; } }   /* « Des jobs à la pelle, des imprévus en pagaille. » tient sur une ligne */
#syn .edition { display: block; margin-top: 10px; opacity: .7; }
.comp-lien { position: absolute; top: clamp(70px, 12vh, 140px); right: var(--marge); z-index: 2; }
@media (max-width: 700px) { .comp-lien { position: static; margin-bottom: 18px; } }
.sechead { padding: 0 var(--marge); }

/* ---------- 4 · Parcours (fond crème foncé) ---------- */
#s-parc { height: auto; }
#s-parc .stage { position: relative; height: auto; overflow: visible; background: var(--creme-fonce); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hauteur-entete) + clamp(30px, 6vh, 70px)) 0 clamp(50px, 8vh, 90px); }
/* La rangée se fait défiler de gauche à droite (flèches, trackpad / Maj + molette, doigt) ; la molette seule fait défiler la page vers le bas ou le haut. */
#track { display: flex; gap: clamp(24px, 4vw, 56px); padding: 0 var(--marge); margin-top: clamp(20px, 4vh, 40px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding: 0 var(--marge); scrollbar-width: none; overscroll-behavior-x: contain; }
#track::-webkit-scrollbar { display: none; }
.step { scroll-snap-align: start; }
.step { --cw: clamp(250px, 28vw, 380px); width: var(--cw); flex: none; }
.step .image { height: min(calc(var(--cw) * .75), 32vh); border-radius: 3px; }   /* 4:3, réduit sur écran bas */
.step .tag { display: inline-block; margin-top: 14px; font-size: .65rem; letter-spacing: .2em; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--chocolat); }
.step .tag.stage-tag { background: var(--chocolat); color: var(--creme); }
.step .annee { font-family: var(--titre); font-size: clamp(1.9rem, 3vw, 2.6rem); margin-top: 8px; line-height: 1; }
.step .titre-etape { font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.3; margin-top: 6px; }
.step .lieu { font-size: .7rem; letter-spacing: .14em; opacity: .65; margin: 4px 0 8px; }
.step .texte-etape { font-size: .95rem; line-height: 1.5; }
.step .texte-etape em { font-size: 1.1em; }
#pidx { font-size: .75rem; letter-spacing: .16em; opacity: .75; }
.parc-pied { display: flex; justify-content: flex-end; padding: 0 var(--marge); margin-top: clamp(18px, 3vh, 30px); }
.parc-piste { position: relative; }
/* Flèches : ronds blancs à flèche bleue, de chaque côté de la rangée, à hauteur des photos */
.parc-fleche { position: absolute; z-index: 3; top: calc(min(clamp(250px, 28vw, 380px) * .75, 32vh) / 2 + clamp(20px, 4vh, 40px)); transform: translateY(-50%); width: 58px; height: 58px; border-radius: 50%; border: 0; background: #fff; color: var(--bleu); display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 6px 20px rgba(46, 32, 25, .28); transition: opacity var(--d-1), box-shadow var(--d-1) var(--ease-out); }
.parc-fleche--g { left: clamp(10px, 2vw, 28px); }
.parc-fleche--d { right: clamp(10px, 2vw, 28px); }
.parc-fleche:disabled { opacity: 0; pointer-events: none; }
.parc-fleche:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
@media (max-width: 700px) { .parc-fleche { width: 48px; height: 48px; } .parc-fleche--g { left: 8px; } .parc-fleche--d { right: 8px; } }
@media (hover: hover) and (pointer: fine) { .parc-fleche:hover:not(:disabled) { box-shadow: 0 8px 26px rgba(8, 41, 155, .35); } }

/* ---------- 5 · Jobs étudiants (fond rose) ---------- */
#s-jobs { position: relative; background: var(--rose); padding: clamp(60px, 10vh, 120px) 0 clamp(70px, 12vh, 140px); overflow: hidden; }
.rows { margin-top: clamp(30px, 6vh, 60px); }
.row { white-space: nowrap; font-family: var(--titre); text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.15; }
.row .mv { display: inline-block; }
.row.out { color: transparent; -webkit-text-stroke: 1px var(--chocolat); }
.m1 { animation: defile-gauche 47.5s linear infinite; }      /* bandes 2× plus courtes qu'avant (iPhone) : durées 2× plus courtes, même vitesse */
.m2 { animation: defile-droite 55s linear infinite; }
@keyframes defile-gauche { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes defile-droite { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- 6 · Manifeste (fond crème foncé) ---------- */
#s-man { height: 750vh; }   /* long à dessein : le manifeste est ralenti pour laisser lire */
#s-man .stage { background: var(--creme-fonce); }
#verre { position: absolute; left: 50%; top: 50%; width: min(66vh, 60vw); transform: translate(-50%, -50%) rotate(var(--inclinaison, 0deg)); opacity: .5; pointer-events: none; }
#verre-svg, #verre-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(46, 32, 25, .18)); animation: flotte 11s ease-in-out infinite; }
@keyframes flotte {
  0%, 100% { transform: translateY(-2.5%) rotate(-1.6deg) scale(1); }
  50%      { transform: translateY(2.5%) rotate(1.6deg) scale(1.025); }
}
.grp { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.grp .st { position: absolute; left: var(--marge); top: 18vh; max-width: min(640px, 80vw); margin: 0; font-size: clamp(2.6rem, 6.4vw, 5.7rem); }
.grp .st span { opacity: .16; transition: opacity .2s; }
.grp .st span.on { opacity: 1; }
.grp .sub { position: absolute; left: var(--marge); margin: 0; font-size: clamp(1rem, 1.6vw, 1.3rem); opacity: 0; transition: opacity .35s; max-width: 560px; }
.grp .ans { position: absolute; right: var(--marge); bottom: 14vh; margin: 0; text-align: right; font-family: var(--serif); font-style: italic; color: var(--bleu); font-size: clamp(2.2rem, 5.6vw, 5.2rem); line-height: 1.04; max-width: min(820px, 86vw); opacity: 0; transform: translateX(50px); transition: opacity .4s, transform .4s; }
.grp .ans.on { opacity: 1; transform: none; }
#manlab { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; }

/* ---------- 7 · Compétences + qualités (fond rose) ---------- */
#s-comp { position: relative; background: var(--rose); padding: clamp(70px, 12vh, 140px) var(--marge) clamp(60px, 10vh, 120px); overflow: hidden; }
#zones { margin-top: clamp(24px, 5vh, 48px); }
.z { border-top: 1px solid var(--chocolat); padding: 16px 0; cursor: pointer; }
.z:last-of-type { border-bottom: 1px solid var(--chocolat); }
.zh { display: flex; align-items: baseline; gap: 20px; }
.zn { font-size: .75rem; letter-spacing: .14em; opacity: .65; min-width: 24px; }
.zt { font-family: var(--titre); text-transform: uppercase; font-weight: 400; font-size: clamp(2rem, 5.4vw, 4.5rem); line-height: 1; transition: color .25s; }
.zi { margin-left: auto; font-family: var(--serif); font-style: italic; font-size: clamp(.95rem, 1.6vw, 1.25rem); opacity: .65; text-align: right; }
.z.open .zt { color: var(--bleu); } @media (hover: hover) and (pointer: fine) { .z:hover .zt { color: var(--bleu); } }
.zb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.z.open .zb { grid-template-rows: 1fr; }
.zb > div { overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 0 6px 44px; }
.chips span { border: 1px solid var(--chocolat); border-radius: 999px; padding: 8px 14px; font-size: .9rem; }
.famille { padding: 14px 0 0 44px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.famille + .chips { padding-top: 8px; }
#qhead { margin-top: clamp(60px, 10vh, 110px); }
.bande { margin: clamp(20px, 4vh, 40px) calc(-1 * var(--marge)) 0; white-space: nowrap; overflow: hidden; font-family: var(--titre); text-transform: uppercase; font-size: clamp(2.5rem, 6.2vw, 5.5rem); line-height: 1.15; }
.bande > div { display: inline-block; animation: defile-gauche 110s linear infinite; }
.bande.contour { color: transparent; -webkit-text-stroke: 1.2px var(--chocolat); margin-top: 0; }
.bande.contour > div { animation: defile-droite 120s linear infinite; }
/* Qualités : le défilement passe au JavaScript (js/accueil.js) pour qu'on puisse aussi les faire glisser à la main */
.bande.glisse > div, .bande.contour.glisse > div { animation: none; will-change: transform; }
#qual, #qual2 { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
#qual.saisie, #qual2.saisie { cursor: grabbing; }
.invite-qualites { margin-top: 14px; }

@media (max-width: 560px) {
  .zi { display: none; }
  .chips, .famille { padding-left: 0; }
  .grp .sub { max-width: 80vw; }
}

@media (prefers-reduced-motion: reduce) {
  #verre-svg, #verre-img { animation: none; }
  .m1, .m2, .bande > div, .bande.contour > div { animation: none; }
  .row, .bande { white-space: normal; }
}
.statique #s-parc .stage { display: block; padding: calc(var(--hauteur-entete) + 24px) 0 40px; }
.statique #track { width: auto; flex-wrap: wrap; overflow: visible; }
.statique .parc-pied, .statique .parc-fleche { display: none; }
.statique #s-man .stage { display: block; padding: 60px var(--marge); }
.statique #verre { display: none; }
.statique .grp { position: relative; inset: auto; opacity: 1; margin-bottom: 48px; }
.statique .grp .st, .statique .grp .sub, .statique .grp .ans { position: static; opacity: 1; transform: none; max-width: none; text-align: left; }
.statique .grp .st span { opacity: 1; }
.statique #manlab { display: none; }


/* ==========================================================================
   SECTIONS 8 à 10 : projets (titres géants), globe photo, sortie, coordonnées
   ========================================================================== */

/* ---------- 8 · Projets (fond crème foncé) ---------- */
#s-proj { background: var(--creme-fonce); --npfs: 100px; --nplh: 102px; --nppw: 260px; }
#s-proj .sechead { position: relative; z-index: 6; padding: clamp(60px, 9vw, 110px) var(--marge) 10px; }
.invite-projets { margin: 8px 0 0; font-size: .9rem; opacity: .85; }
#np-scroller { position: relative; margin-top: -20vh; }
#np-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#np-names { position: absolute; left: 0; right: 0; top: 50%; will-change: transform; }
.np-nm { height: var(--nplh); display: flex; align-items: center; justify-content: center; font-family: var(--titre); text-transform: uppercase; font-size: var(--npfs); line-height: 1; white-space: nowrap; color: rgba(46, 32, 25, .14); transition: color .35s; }
.np-nm.on { color: var(--chocolat); }
.np-w { position: relative; }
.np-num { position: absolute; top: 50%; left: 0; transform: translate(-120%, -50%); font-family: var(--texte); font-size: .8rem; font-weight: 600; opacity: 0; transition: opacity .3s; }
.np-nm.on .np-num { opacity: 1; }
#np-poster { position: absolute; left: 50%; top: 50%; width: var(--nppw); aspect-ratio: 3 / 4; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.np-pc { position: absolute; inset: 0; isolation: isolate; border-radius: 4px; overflow: hidden; opacity: 0; transform: scale(.94); transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .2, 1); display: flex; flex-direction: column; justify-content: space-between; padding: 16px; color: var(--creme); }
.np-pc.on { opacity: 1; transform: scale(1); }
.np-pc .np-art { position: absolute !important; inset: 0; z-index: -1; }
.np-pc .np-tg { font-family: var(--serif); font-size: clamp(.95rem, 1.6vw, 1.25rem); line-height: 1.15; text-align: right; max-width: 85%; margin-left: auto; }
.np-pc .np-tg i { display: block; }
.np-prize { align-self: flex-start; background: var(--creme); color: var(--chocolat); font-size: .6rem; font-weight: 700; letter-spacing: .1em; padding: 5px 9px; border-radius: 99px; max-width: 100%; }
#np-over { position: absolute; left: 0; right: 0; top: 50%; height: var(--nplh); transform: translateY(-50%); z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; font-family: var(--titre); text-transform: uppercase; font-size: var(--npfs); line-height: 1; white-space: nowrap; color: var(--tint, var(--rose)); clip-path: inset(0 calc(50% - var(--nppw) / 2)); }
#np-hit { position: absolute; left: 50%; top: 50%; width: var(--nppw); aspect-ratio: 3 / 4; transform: translate(-50%, -50%); z-index: 4; }
.np-coin { position: absolute; bottom: 18px; z-index: 5; display: flex; gap: 6px; }
.np-g { left: var(--marge); }
.np-d { right: var(--marge); }
.np-coin .bouton { padding: .6em 1em; background: var(--creme-fonce); }
.np-coin .bouton.on { background: var(--bleu); color: var(--creme); }
#np-grid { position: absolute; inset: 0; z-index: 4; background: var(--creme-fonce); display: none; align-items: center; }
#np-grid.on { display: flex; }
#np-row { display: flex; gap: 18px; padding: 0 var(--marge); overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; cursor: grab; }
.np-card { isolation: isolate; flex: 0 0 clamp(220px, 24vw, 300px); aspect-ratio: 3 / 4; position: relative; border-radius: 4px; overflow: hidden; scroll-snap-align: start; color: var(--creme); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: transform .3s; }
.np-card:focus-visible { transform: translateY(-6px); } @media (hover: hover) and (pointer: fine) { .np-card:hover { transform: translateY(-6px); } }
.np-card .np-art { position: absolute !important; inset: 0; z-index: -1; }
.np-pc.claire, .np-card.claire { color: var(--chocolat); }
.np-art.logo-seul img { object-fit: contain; padding: 16%; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35)); }
.np-card .np-ct { font-family: var(--titre); text-transform: uppercase; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: .9; }
.np-card .np-tg { font-family: var(--serif); font-size: 1rem; line-height: 1.2; }
.np-card .np-tg i { display: block; }
.bandeau-projets { background: var(--rose); overflow: hidden; white-space: nowrap; padding: 16px 0; }
#bandeau { display: inline-block; font-family: var(--titre); text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.15; animation: defile-gauche 80s linear infinite; }
#bandeau em { margin: 0 .2em; }

/* ---------- 9 · Globe (fond crème foncé) ---------- */
#s-globe { position: relative; background: var(--creme-fonce); min-height: 100vh; min-height: 100svh; padding: clamp(70px, 12vh, 120px) var(--marge); overflow: hidden; }
#gwrap { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: center; margin: 20px 0 16px; }
#gpanel { align-self: start; }
#gpanel .invite { opacity: .7; margin: 0 0 16px; max-width: 28em; }
#gpanel .pays { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
#gpanel .pays button { border: 1px solid var(--chocolat); background: none; color: inherit; border-radius: 999px; padding: 6px 13px; font: inherit; font-size: .85rem; cursor: pointer; }
#gpanel .pays button.on { background: var(--bleu); border-color: var(--bleu); color: var(--creme); }
#gpanel .nom-pays { font-family: var(--titre); text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; margin: 0; }
#gpanel .phrase-pays { font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.15; margin: 6px 0 0; }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tuiles .image { aspect-ratio: 4 / 3; border-radius: 3px; }
.gzw { position: relative; }
#globe { width: min(100%, 72vh); aspect-ratio: 1; height: auto; margin: 0 auto; touch-action: none; cursor: grab; display: block; }   /* toujours carré : sinon le globe est écrasé */
.gzb { position: absolute; right: 6px; bottom: 6px; display: flex; flex-direction: column; gap: 6px; }
.gzb button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--bleu); background: var(--creme-fonce); color: var(--bleu); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.gzb button:focus-visible { background: var(--bleu); color: var(--creme); } @media (hover: hover) and (pointer: fine) { .gzb button:hover { background: var(--bleu); color: var(--creme); } }
#gbouton { margin-top: 10px; }
@media (max-width: 760px) { #gwrap { grid-template-columns: 1fr; } #gpanel { order: 2; } }

/* ---------- 10 · Sortie (fond crème) ---------- */
#fin-zone { position: relative; }
#s-globe { position: sticky; top: 0; z-index: 1; }                                  /* le haut est recalé par le script si le bloc dépasse l'écran : son bas reste visible */
#s-out { height: 300vh; margin-top: -100vh; margin-top: -100svh; position: relative; z-index: 2; pointer-events: none; }       /* la scène de fin démarre pile quand le globe est collé */
#s-out .stage { background: none; pointer-events: none; }
#land2 { overflow: hidden; opacity: 0; will-change: opacity; }
#land2 .plein-cadre { will-change: transform; }
#land2 img { object-position: 50% 62% !important; }
#land2::after { content: ""; position: absolute; inset: 0; background: var(--creme); opacity: var(--voile, 0); pointer-events: none; }
#headzoom2 { position: absolute; inset: 0; will-change: transform; }
#outmsg { z-index: 3; position: absolute; left: 0; right: 0; top: 9vh; text-align: center; opacity: 0; padding: 0 20px; }
#outmsg .merci { font-size: clamp(2rem, 5vw, 4.4rem); margin-top: 10px; }
#outmsg .monde-sortie { margin: -.1em 0 0; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.1; }
#outmsg .suite { margin: 6px 0 0; font-size: clamp(1.1rem, 2.4vw, 1.7rem); }
#outbtns { z-index: 3; position: absolute; left: 0; right: 0; bottom: 5vh; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; opacity: 0; padding: 0 20px; }

/* ---------- Coordonnées (fond rose, avant le pied de page chocolat) ---------- */
/* coordonnées : quatre petites étiquettes de papier (e-mail, LinkedIn, localisation, CV), comme des cartes de visite posées sur la scène */
#outcoords { z-index: 3; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; opacity: 0; padding: 0 var(--marge); pointer-events: none; }
#outcoords > .etiquette { display: none; }
#outcoords.actif .valeur { pointer-events: auto; }   /* cliquable seulement quand les étiquettes sont visibles : invisibles, elles ne doivent rien intercepter (ex. un pays du globe) */
#outcoords .coords-grille { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 22px; max-width: 1220px; margin: 0 auto; }
#outcoords .coords-grille > div { flex: 0 1 280px; padding: 18px 20px 20px; background: var(--creme); border: 1.5px solid var(--chocolat); border-radius: 6px; box-shadow: 4px 5px 0 var(--chocolat); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .3s ease; }
#outcoords .coords-grille > div:nth-child(1) { transform: rotate(-2deg); }
#outcoords .coords-grille > div:nth-child(2) { transform: rotate(1.2deg) translateY(8px); }
#outcoords .coords-grille > div:nth-child(3) { transform: rotate(-1deg); }
#outcoords .coords-grille > div:nth-child(4) { transform: rotate(1.8deg) translateY(6px); }
@media (hover: hover) and (pointer: fine) { #outcoords .coords-grille > div:hover { transform: rotate(0) translateY(-4px); } }
#outcoords .coords-grille > div::before { content: ""; position: absolute; top: 8px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; border: 1.5px solid var(--chocolat); background: color-mix(in srgb, var(--rose) 70%, transparent); }   /* œillet de l'étiquette */
#outcoords .cle { margin-top: 12px; }
#outcoords .valeur { font-size: clamp(.9rem, 1.1vw, 1.05rem); overflow-wrap: break-word; }
@media (max-width: 600px) {
  #outcoords { top: 56%; }
  #outcoords .coords-grille { gap: 9px; }
  #outcoords .coords-grille > div { flex: 1 1 100%; padding: 8px 14px 10px; box-shadow: 3px 4px 0 var(--chocolat); }
  #outcoords .coords-grille > div::before { display: none; }
  #outcoords .cle { margin-top: 0; font-size: .65rem; }
  #outcoords .valeur { font-size: .95rem; margin-top: 2px; }
}
.coords-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin-top: 22px; max-width: 1200px; }
.coords-grille .cle { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.coords-grille .valeur { font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin: 6px 0 0; display: inline-block; }
#grand-nom { font-family: var(--titre); text-transform: uppercase; font-size: 18vw; line-height: .85; margin-top: clamp(40px, 8vh, 80px); color: rgba(46, 32, 25, .09); white-space: nowrap; user-select: none; }

@media (max-width: 560px) {
  .np-coin .bouton { font-size: .65rem; }
  .np-card { flex-basis: 150px; padding: 10px; }
  .np-card .np-ct { font-size: 1.5rem; }
  .np-card .np-tg { font-size: .8rem; }
  .np-pc { padding: 10px; }
  .np-pc .np-tg { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { #bandeau { animation: none; white-space: normal; } }
.statique #s-proj #np-scroller { height: auto !important; }
.statique #np-stage { position: relative; height: auto; min-height: 80svh; padding: 40px 0 70px; }
.statique #np-names, .statique #np-poster, .statique #np-over, .statique #np-hit, .statique .np-g { display: none; }
.statique #np-grid { display: flex; position: relative; inset: auto; }
.statique .np-coin.np-d { position: static; padding: 24px var(--marge) 0; }
.statique #s-out { height: auto !important; margin-top: 0; }
.statique #s-globe { position: relative; }
.statique #s-out .stage { min-height: 100svh; }
.statique #land2, .statique #headlayer2, .statique .porte, .statique #tv-scene, .statique #tv-blanc, .statique #cerveau { display: none; }
.statique #outmsg, .statique #outbtns { position: relative; opacity: 1; inset: auto; padding-top: 12vh; }
.statique #outcoords { position: relative; opacity: 1; top: auto; left: auto; margin: 6vh auto 0; transform: none; }

#verre.photo #verre-svg { display: none; }
#verre.photo #verre-img { display: block; }
#verre-img[hidden] { display: none; }

/* « Dans ma tête » : l'image dérive très lentement, comme une respiration */
#fondimg img, #land2 img { animation: derive 40s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes derive { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { #fondimg img, #land2 img { animation: none; } }



/* ---------- Entrée : « Welcome » se dissout, l'image aux écrans apparaît, on zoome dans l'écran du milieu, le cerveau glisse ---------- */
#fond { background: var(--creme); }
#tv-scene { z-index: 4; visibility: hidden; overflow: hidden; background: #d6c6e8; pointer-events: none; }
.tv-affiche { position: absolute; left: 0; top: 0; will-change: transform; }   /* taille et position posées par le script : l'image remplit toujours l'écran */
.tv-zoom { position: absolute; inset: 0; will-change: transform; }
.tv-zoom img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.tv-ecran { position: absolute; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .5)); animation: lueur 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes lueur { 50% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .95)); } }
.tv-ecran .verre { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: screen; }
.tv-ecran .verre::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: var(--allume, 0); }
.tv-ecran .bruit { position: absolute; inset: -40px; background: url('../images/accueil/tv-bruit.png'); background-size: 96px; opacity: 0; transition: opacity .35s; animation: neige .6s steps(1) infinite; }
@keyframes neige { 0% { transform: translate(0, 0); } 17% { transform: translate(-19px, -45px); } 34% { transform: translate(-41px, -6px); } 51% { transform: translate(-10px, -30px); } 68% { transform: translate(-35px, -16px); } 85% { transform: translate(-4px, -38px); } }
.tv-ecran .mire { position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
  background: linear-gradient(90deg, #dcdcdc 0 14.3%, #dcdc50 14.3% 28.6%, #50dcdc 28.6% 42.9%, #50dc70 42.9% 57.2%, #dc50dc 57.2% 71.5%, #dc5050 71.5% 85.8%, #5050dc 85.8%); }
.tv-ecran.e-bruit .bruit { opacity: .8; }
.tv-ecran.e-mire .mire { opacity: .75; }
#tv-blanc { z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
/* le cerveau sur son plateau : il glisse et grossit jusqu'à sa place ; la main sort du bas de l'écran */
#cerveau { opacity: 0; pointer-events: none; overflow: hidden; }
#cerveau img { position: absolute; bottom: 0; left: 50%; height: 56%; width: auto; transform: translate(-50%, var(--gl, 0)) scale(var(--sc, 1)); transform-origin: 50% 100%; will-change: transform; }
@media (min-aspect-ratio: 11 / 10) {
  #cerveau img { left: 70%; height: 92%; }
  #inside { inset: 0 auto 0 0; width: 56%; align-items: flex-start; justify-content: center; text-align: left; padding: 0 0 0 7vw; }
  #inside .dedans1 { font-size: clamp(2.6rem, 6vw, 6rem); }
  #inside .dedans2 { font-size: clamp(2.3rem, 5vw, 5rem); }
}
@media (prefers-reduced-motion: reduce) { .tv-ecran, .tv-ecran .bruit { animation: none; } }

.glisser-aide { display: none; }   /* visible seulement sur téléphone */

/* ==========================================================================
   VERSION TÉLÉPHONE (≤ 700 px) — retouches du 03/11 : rien de tout ceci ne s'applique à l'ordinateur
   ========================================================================== */
@media (max-width: 700px) {
  /* Définition : « [ DÉFINITION ] » décollé de « MARAH », et les bandes roses de chaque côté */
  #deflab { margin-bottom: 18px; }
  .br { display: block; top: 14vh; height: 72vh; width: 24px; border-width: 9px; }
  .br.l { left: 6px; }
  .br.r { right: 6px; }
  #defbox { padding: 0 38px; }

  /* Compétences : « ( MES COMPÉTENCES ) » remonté et décollé du bouton, bouton centré */
  #s-comp { padding-top: calc(clamp(70px, 12vh, 140px) - 18px); }
  #s-comp > .etiquette { margin-bottom: 20px; }
  .comp-lien { display: block; width: max-content; max-width: 150px; margin: 0 0 22px; padding: .6em 1.1em; font-size: .62rem; line-height: 1.3; text-align: left; white-space: normal; }

  /* Mes projets : seulement la vue « Défilé » (plus de vue « Affiches » ni de boutons pour changer) */
  #np-grid, #np-grid.on { display: none !important; }
  #np-vDefile, #np-vAffiches { display: none; }

  /* Mes photos : globe plus petit, les 4 photos d'un pays se font défiler à la main (swipe) sous le sélecteur */
  #s-globe { padding-top: 84px; padding-bottom: 28px; }
  #globe { width: min(100%, 27svh); }
  #gwrap { margin: 10px 0 6px; gap: 12px; }
  #gpanel .pays { margin-bottom: 10px; }
  #gpanel .nom-pays { font-size: 1.7rem; }
  #gpanel .phrase-pays { font-size: 1.15rem; margin-top: 4px; }
  .tuiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-top: 10px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tuiles::-webkit-scrollbar { display: none; }
  .tuiles .image { flex: 0 0 54%; scroll-snap-align: start; }
  .glisser-aide { display: block; margin: 8px 0 0; font-size: .8rem; letter-spacing: .04em; opacity: .75; }
}

/* iPhone SE et écrans courts (≤ 720 px de haut) */
@media (max-width: 700px) and (max-height: 720px) {
  #cerveau img { height: 46%; bottom: -5%; }      /* le plateau et le cerveau descendent : ils ne touchent plus « Faites comme chez vous » */
  #globe { width: min(100%, 31svh); }             /* la terre un peu plus grande */
}

/* ==========================================================================
   ÉCHELLE DE TEXTE UNIQUE — téléphone (≤ 700 px), accueil : 12 · 14 · 16 · 20 · 24 · 32 px (voir CLAUDE.md « Stratégie mobile »)
   Les très grands mots « de décor » (WELCOME, MARAH, manifeste, noms de projets, bandes qui défilent) restent en grand : ce sont des affiches, pas du texte à lire.
   ========================================================================== */
@media (max-width: 700px) {
  /* 32 px · titres de section */
  .titre-section, .titre-section.titre-long, .merci { font-size: 2rem; }
  .titre-section em, .titre-section.titre-long em { font-size: 1.05em; }
  /* 24 px · intertitres */
  .zt, #gpanel .nom-pays { font-size: 1.5rem; }
  /* 20 px · chutes, sous-titres en italique, titres de cartes */
  .titre-etape, .suite, #gpanel .phrase-pays { font-size: 1.25rem; }
  /* 16 px · texte courant */
  .ln, .texte-etape, .abrev, .prononciation, .valeur, .invite { font-size: 1rem; }
  .w { font-size: 1.5rem; }
  /* 14 px · petits textes */
  .invite-projets, #gpanel .pays button, .glisser-aide { font-size: .875rem; }
  /* 12 px · étiquettes, pastilles, mentions, boutons */
  .etiquette, .pastille, .tag, .lieu, .famille, .cle, .np-num, .np-tg, .comp-lien, .np-coin .bouton, #gbouton, #outbtns .bouton { font-size: .75rem; }
}

/* Téléphone : les scènes épinglées sont raccourcies (~20 %), plus agréables à parcourir au pouce ; tout reste piloté par le défilement natif, dans les deux sens */
@media (max-width: 700px) {
  #s-intro { height: 900vh; }
  #s-def { height: 400vh; }
  #s-qui { height: 340vh; }
  #s-man { height: 860vh; }
  #s-out { height: 340vh; }
}

/* Téléphone : pastilles de pays du globe (accueil) à 44 px de haut (40 px sur écran court) */
@media (max-width: 700px) {
  #gpanel .pays button { min-height: 44px; padding: 6px 16px; }
}
@media (max-width: 700px) and (max-height: 720px) {
  #gpanel .pays button { min-height: 40px; }
}

/* Téléphone : boutons de zoom du globe et liens des coordonnées à 44 px */
@media (max-width: 700px) {
  .gzb button { width: 44px; height: 44px; }
  #outcoords .valeur { display: inline-block; padding: 8px 0; }
}

/* Téléphone (retouches de Marah du 03/11) : bouton « compétences » petit sous la liste, pastilles de compétences plus petites, globe zoomé à deux doigts */
@media (max-width: 700px) {
  .comp-lien { margin: 22px 0 0; font-size: .7rem; padding: .5em 1em; }
  #qhead { margin-top: 30px; }
  .chips { gap: 6px; padding-top: 12px; }
  .chips span { font-size: .75rem; padding: 4px 10px; }
  .famille { font-size: .65rem; }
  .gzb { display: none; }
}

/* Cartes de projets (téléphone uniquement) */
#np-cartes { display: none; }
@media (max-width: 700px) {
  #np-scroller, .bandeau-projets, #s-proj .invite-projets { display: none; }
  #s-proj { padding-bottom: 40px; }
  #np-cartes { display: grid; gap: 18px; padding: 8px var(--marge) 0; }
  .pcarte { position: relative; overflow: hidden; display: block; border-radius: 14px; color: var(--creme); text-decoration: none; padding-bottom: 18px; isolation: isolate; box-shadow: 0 10px 24px rgba(46, 32, 25, .18); }
  .pcarte--claire { color: var(--chocolat); }
  .pcarte-visuel { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
  .pcarte-visuel .np-art { position: absolute !important; inset: 0; }
  .pcarte-num { position: absolute; right: 12px; bottom: 6px; z-index: -1; font-family: var(--titre); font-size: 6.5rem; line-height: .9; opacity: .14; pointer-events: none; }
  .pcarte-domaines { margin: 14px 18px 0; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; line-height: 1.5; }
  .pcarte-nom { margin: 6px 18px 0; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 1.75rem; line-height: 1; }
  .pcarte-accroche { margin: 8px 18px 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.25; opacity: .95; }
  .pcarte-cta { display: flex; align-items: center; gap: 12px; margin: 16px 18px 0; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .pcarte-cta i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; font-style: normal; font-size: 1.15rem; }
  .pcartes-tous { justify-self: start; margin-top: 4px; }
}

/* Téléphone : scènes encore plus courtes (≈ 30 écrans au total au lieu de 43) */
@media (max-width: 700px) {
  #s-intro { height: 300vh; }      /* 665 avant le 11/11 (plus de phase « cerveau flou ») */
  #s-def { height: 300vh; }
  #s-qui { height: 260vh; }
  #s-man { height: 500vh; }
  #s-out { height: 300vh; }
}
@media (max-width: 700px) { .pcarte-nom { color: inherit; } }   /* le nom prend la couleur de la carte (les titres h3 étaient en brun sur fond sombre) */
@media (max-width: 700px) { #gpanel .pays { justify-content: center; } }   /* pastilles de pays centrées (les deux lignes au milieu) */


/* ---------- Compteur d'entrée (05/11/2026) : rideau crème « 000 → 100 », puis il se lève ---------- */
.compteur { position: fixed; inset: 0; z-index: 300; background: var(--creme); color: var(--chocolat); display: flex; align-items: flex-end; justify-content: space-between; padding: var(--marge); transition: transform .9s var(--ease-out); }
.compteur.leve { transform: translateY(-100%); }
.compteur-nb { font-family: var(--titre); font-size: clamp(4rem, 11vw, 9rem); line-height: .8; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.compteur-barre { position: absolute; left: var(--marge); right: var(--marge); top: var(--marge); height: 2px; background: var(--chocolat); transform-origin: 0 50%; transform: scaleX(0); }
html.compteur-actif, html.compteur-actif body { overflow: hidden; }

.compteur-welcome { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 400; pointer-events: none; }
.compteur-welcome .bienvenue { font-family: var(--titre); text-transform: uppercase; line-height: .95; font-size: clamp(3.5rem, 11vw, 9.4rem); }
.compteur-welcome .monde { display: block; font-size: clamp(3rem, 9vw, 8rem); margin-top: -.1em; line-height: 1.1; }

/* ---------- Écran d'entrée : « HELLO (prénom), MEET ME. » + « Touchez les écrans pour entrer » (05/11/2026) ---------- */
.tv-affiche { container-type: inline-size; }
.eu { position: absolute; z-index: 3; margin: 0; pointer-events: none; text-shadow: 0 0 2cqw rgba(246, 237, 226, .7); }
.eu-hello, .eu-meet { font-family: var(--titre); text-transform: uppercase; font-size: var(--fs, 5.6cqw); line-height: .95; white-space: nowrap; color: var(--chocolat); }
.eu-hello { right: calc(100% - var(--hx, 45%)); top: var(--hy, 40%); }
.eu-meet { left: var(--mx, 68%); top: var(--my, 56%); }
.eu-meet em { font-size: 1.04em; text-transform: none; }
.eu-nom { left: var(--nx, 64%); top: var(--ny, 41%); white-space: nowrap; }
/* « {{ xxx }} » : dans la typo des chutes (serif italique bleu). Une fois le prénom validé, il est remplacé par le prénom en grandes lettres Anton,
   qui monte par le dessous pendant que la ligne tapée s'en va par le haut (le tout dans un masque). */
.nom-pile { display: grid; overflow: hidden; align-items: center; padding: .08em 0; }
.nom-saisie, .nom-final { grid-area: 1 / 1; transition: transform .8s var(--ease-out), opacity .5s var(--ease-out), visibility 0s; }
.nom-saisie { display: flex; align-items: baseline; gap: .3em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--nfs, 5.4cqw); line-height: 1.1; color: var(--bleu); }
.nom-saisie .acc { pointer-events: none; }
/* Petite bulle de dialogue au-dessus du « {{ xxx }} » : elle dit qu'on peut taper son prénom ; elle s'en va quand le prénom est validé (07/11/2026) */
.nom-bulle { position: absolute; left: 50%; bottom: calc(100% + .5em); transform: translateX(-50%); z-index: 4; white-space: nowrap; pointer-events: none; padding: .62em 1.1em .68em; background: var(--chocolat); color: var(--creme); border-radius: 1.2em; font-family: var(--texte); font-style: normal; font-weight: 500; font-size: clamp(15px, .5em, 19px); line-height: 1.2; text-shadow: none; filter: drop-shadow(0 .2em .5em rgba(46, 32, 25, .22)); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s; }
/* petite mèche en bas, qui pointe vers le « xxx » : c'est lui qui parle (brun chocolat) */
.nom-bulle::after { content: ""; position: absolute; left: 50%; top: calc(100% - 1px); width: 1.5em; height: 1.1em; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 0H20C14.5 2 12.5 7 10.5 14C8.5 7 5.5 2 0 0Z' fill='%232E2019'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.eu-nom.fait .nom-bulle { opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s; }
#prenom { pointer-events: auto; width: calc(var(--n, 3) * .44em + .3em); min-width: 1.6em; max-width: 26cqw; border: 0; background: transparent; color: var(--bleu); font: inherit; padding: 0 .1em; outline: none; border-radius: 0; text-shadow: inherit; caret-color: var(--bleu); }
#prenom::placeholder { color: var(--bleu); opacity: 1; }
#prenom:focus-visible { outline: 0; }
.nom-final { visibility: hidden; transform: translateY(110%); pointer-events: auto; border: 0; background: transparent; padding: 0; margin: 0; cursor: text; text-align: left; font-family: var(--titre); text-transform: uppercase; font-size: var(--nomfs, var(--fs, 5.6cqw)); line-height: .95; color: var(--bleu); text-shadow: inherit; }
.nom-final:focus-visible { outline: 3px solid var(--bleu); outline-offset: .4cqw; }
.eu-nom.fait .nom-final { visibility: visible; transform: none; }
.eu-nom.fait .nom-saisie { transform: translateY(-110%); opacity: 0; visibility: hidden; transition: transform .8s var(--ease-out), opacity .5s var(--ease-out), visibility 0s .8s; }
#entree-invite { position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); text-align: center; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); padding: 9px 16px; background: var(--creme); color: var(--chocolat); border-radius: 999px; pointer-events: none; animation: invite-entree 1s var(--ease-out) 1.2s both; }
@keyframes invite-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tv-bouton { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; pointer-events: none; border-radius: 12px; }
html.entree-verrou .tv-bouton { pointer-events: auto; }
.tv-bouton:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }
html.entree-verrou { scrollbar-width: none; }
html.entree-verrou::-webkit-scrollbar { display: none; }
.statique .eu, .statique #entree-invite { display: none; }
html.entree-verrou .progression { opacity: 0; }
:root { --mono-entree: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; }

/* ---------- Transitions entre les écrans (refonte 05/11/2026) ---------- */
/* Chaque section qui arrive recouvre la dernière hauteur d'écran de la précédente (ordinateur seulement) ;
   le geste est posé par js/accueil.js (cercle, glissement, carte, zoom) ou ici (volet). Les sections gardent chacune leur fond opaque. */
#s-jobs .stage { position: static; height: auto; overflow: visible; }      /* téléphone : les Jobs restent une section normale */
@media (min-width: 701px) {
  /* 11/11/2026 (demande de Marah) : plus aucune transition entre les écrans de l'accueil (ni cercle, ni volet, ni glissement, ni carte) :
     chaque écran arrive simplement par le bas en défilant. Les hauteurs ont perdu l'écran de recouvrement (100vh) : la vitesse des animations dans chaque écran est inchangée. */
  #s-def { height: 290vh; }      /* 360 avant le 11/11 : la Définition démarre dès qu'elle entre, donc moins de défilement nécessaire */
  #s-qui { height: 350vh; }
  #s-man { height: 800vh; }
  main.plein { overflow-x: clip; }
}


/* ---------- Retouches du 06/11/2026 (ordinateur) ---------- */
@media (min-width: 701px) {
  #s-proj .sechead .titre-section { font-size: clamp(3.4rem, 7.6vw, 7rem); }     /* « Les idées qui sont devenues réelles. » en plus grand */
}
@media (min-width: 761px) {
  /* « Le monde, vu par moi » : tout le bloc tient dans l'écran, on voit son haut (titre) et son bas (bouton) */
  #s-globe { padding-top: calc(var(--hauteur-entete) + 10px); padding-bottom: clamp(36px, 6vh, 60px); }
  #globe { width: max(260px, min(100%, 72vh, calc(100svh - 430px))); }
}


/* ---------- Retouches du 07/11/2026 (demandes de Marah, écran par écran) ---------- */
/* écran 3 : le cerveau sur son plateau flotte doucement tout seul */
#cerveau { animation: cerveau-flotte 6.5s ease-in-out infinite alternate; }
@keyframes cerveau-flotte { from { transform: translateY(-1.4vh) rotate(-.8deg); } to { transform: translateY(1.4vh) rotate(.8deg); } }
@media (prefers-reduced-motion: reduce) { #cerveau { animation: none; } }
/* écran 4 : « [ DÉFINITION ] » un peu plus haut */
#deflab { position: relative; top: -2.6vh; }
/* écran 5 : « …pour les faire exister » plus bas et plus gros */
#para .ln:last-child { font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: 1.1; margin-top: .25em; }
/* écran 7 : les sous-compétences s'illuminent en bleu au survol */
@media (hover: hover) and (pointer: fine) {
  .chips span { transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out); }
  .chips span:hover { background: var(--bleu); border-color: var(--bleu); color: var(--creme); }
}
/* Jobs étudiants : dans la continuité du Parcours (même fond crème, pas de nouvelle page) */
#s-jobs { background: var(--creme-fonce); }
/* écran 10 : monogramme MS bleu, un peu transparent, qui flotte */

@media (min-width: 761px) {
  #s-globe { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(16px, 3vw, 48px); align-content: start; }
  #gwrap { display: contents; }
  #s-globe > .etiquette { grid-column: 1; grid-row: 1; }
  #s-globe > .titre-section { grid-column: 1; grid-row: 2; }
  #gpanel { grid-column: 1; grid-row: 3; align-self: start; }
  #s-globe > .bouton { grid-column: 1; grid-row: 4; align-self: end; justify-self: start; }
  #s-globe .gzw { grid-column: 2; grid-row: 1 / 5; align-self: center; justify-self: center; width: 100%; }
  #globe { width: min(100%, calc(100svh - 150px)); }
}
#s-out { display: none; }                      /* écran 12 supprimé : le pied de page prend le relais */

@media (min-width: 1000px) { #para .ln { font-size: clamp(1.05rem, 1.75vw, 1.5rem); } #para .ln:last-child { font-size: clamp(2.2rem, 5.2vw, 4.6rem); } }   /* la 2e ligne du texte « Qui suis-je » reste sur une seule ligne */
#fin-zone { background: var(--creme-fonce); }

/* écran 10 : monogramme MS beige, un ton plus foncé que le fond, qui flotte (le SVG sert de masque) */
#verre { opacity: 1; }
#verre.photo #verre-img { display: none; }
#verre.photo::before { content: ""; display: block; width: 100%; aspect-ratio: 132.52 / 74.3; background: #D3C5AC; -webkit-mask: url("../assets/monogramme-MS-bleu.svg") center / contain no-repeat; mask: url("../assets/monogramme-MS-bleu.svg") center / contain no-repeat; animation: flotte 11s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #verre.photo::before { animation: none; } }

/* « Défilez, ça ne mord pas ↓ » sous « Faites comme chez vous » (08/11/2026) */
#inside .dedans3 { margin-top: clamp(22px, 4vh, 44px); font-family: var(--texte); font-weight: 500; font-size: clamp(.8rem, 1.1vw, 1rem); letter-spacing: .16em; text-transform: uppercase; color: var(--chocolat); opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
#inside .dedans3.on { opacity: .85; transform: none; animation: invite-souffle 2.4s ease-in-out 1s infinite; }
@keyframes invite-souffle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.statique #inside .dedans3 { opacity: .85; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) { #inside .dedans3.on { animation: none; } }

/* La Définition démarre pendant la dernière hauteur d'écran de l'entrée (sinon un écran entier de cerveau flou, vide, avant « MARAH ») — 08/11/2026 */
#s-def { margin-top: 0; position: relative; z-index: 2; }
#s-def .stage { background: var(--creme); }      /* écran beige à part (11/11/2026) */
/* 11/11/2026 : la Définition n'est plus posée par-dessus la fin de l'entrée ; elle arrive par le bas comme les autres écrans */
.statique #s-def { margin-top: 0; }

/* ---------- Téléphone (11/11/2026, demande de Marah) : plus aucune transition entre les écrans de l'accueil (ni cercle, ni volet) : tout défile simplement.
   Les hauteurs ont perdu l'écran de recouvrement (100vh) : la vitesse des animations est inchangée. ---------- */
@media (max-width: 700px) {
  #s-def { height: 280vh; }
  #s-qui { height: 310vh; margin-top: 0; box-shadow: none; }
  #s-proj { margin-top: 0; box-shadow: none; }
  #s-man { height: 550vh; }
  #fin-zone { margin-top: 0; box-shadow: none; }
}
.statique #fin-zone, .statique #s-proj, .statique #s-qui { margin-top: 0; }

/* Téléphone : « HELLO + prénom » sur une seule ligne, « MEET ME. » un peu plus petit dessous, le tout au-dessus de la tête et des écrans (08/11/2026) */
#eu-tel { display: none; }
@media (max-width: 700px) {
  #eu-tel { position: absolute; inset: 0; z-index: 6; display: block; pointer-events: none; --fs: 13.5vw; --nfs: 13.5vw; --nomw: 56vw; }
  #eu-tel-haut { position: absolute; left: 0; right: 0; padding: 0 14px; display: flex; flex-direction: column; align-items: center; gap: .1vw; text-align: center; }
  #eu-tel-l1 { display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline; gap: .28em; max-width: 100%; }
  #eu-tel .eu { position: static; }
  #eu-tel .eu-hello { font-size: var(--fs); line-height: .98; }
  #eu-tel .eu-meet { font-size: var(--fs); line-height: .98; }          /* même taille que « HELLO » et le prénom */
  #eu-tel .eu-nom { font-size: var(--nfs); position: relative; left: auto; top: auto; }   /* la bulle se centre sur le xxx */
  #eu-tel #prenom { max-width: 40vw; min-width: 2.4em; text-align: center; }
  #eu-tel .nom-pile { justify-items: center; }
  #eu-tel .nom-final { text-align: center; }
  #eu-tel .nom-bulle { font-size: 11.5px; padding: .5em .85em .55em; bottom: calc(100% + 2px); }   /* petite bulle juste au-dessus du xxx : ne prend pas de largeur en plus */
}

/* Bulle « C'est ici, oui oui » au-dessus des TV quand la souris les survole (écran d'entrée, ordinateur ; 11/11/2026). Petite, et toujours dans l'écran (décalage --dx, ou placée dessous). */
.tv-bulle { --dx: 0px; position: absolute; z-index: 5; transform: translate(calc(-50% + var(--dx)), calc(-100% - 12px)) scale(.9); transform-origin: 50% 100%; opacity: 0; visibility: hidden; pointer-events: none; white-space: nowrap; padding: .55em .95em .6em; background: var(--chocolat); color: var(--creme); border-radius: 1.1em; font-family: var(--texte); font-weight: 500; font-size: clamp(12px, 1.05cqw, 15px); line-height: 1.2; filter: drop-shadow(0 .2em .5em rgba(46, 32, 25, .25)); transition: opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s; }
.tv-bulle::after { content: ""; position: absolute; left: calc(50% - var(--dx)); top: calc(100% - 1px); width: 1.4em; height: 1em; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 0H20C14.5 2 12.5 7 10.5 14C8.5 7 5.5 2 0 0Z' fill='%232E2019'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.tv-bulle.dessous { transform-origin: 50% 0; transform: translate(calc(-50% + var(--dx)), 12px) scale(.9); }
.tv-bulle.dessous::after { top: auto; bottom: calc(100% - 1px); transform: translateX(-50%) rotate(180deg); }
@media (hover: hover) and (pointer: fine) { html.entree-verrou .tv-bouton:hover + .tv-bulle { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--dx)), calc(-100% - 12px)); transition: opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility 0s; } html.entree-verrou .tv-bouton:hover + .tv-bulle.dessous { transform: translate(calc(-50% + var(--dx)), 12px); } }
html.entree-verrou .tv-bouton:focus-visible + .tv-bulle { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--dx)), calc(-100% - 12px)); transition: opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility 0s; }
html.entree-verrou .tv-bouton:focus-visible + .tv-bulle.dessous { transform: translate(calc(-50% + var(--dx)), 12px); }
@media (max-width: 700px) { .tv-bulle { display: none; } }
.statique .tv-bulle { display: none; }

/* « Revenir à l'accueil » : en haut à gauche, sous le logo, sur l'écran « Vous êtes dans ma tête » (on ne peut plus remonter en défilant ; 11/11/2026) */
.revenir-accueil { position: fixed; z-index: 70; left: 40px; top: 60px; padding: 10px 10px 10px 8px; border: 0; background: none; color: var(--chocolat); font: 500 .75rem/1 var(--texte); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s .35s; }
.revenir-accueil.visible { opacity: .9; visibility: visible; transition: opacity .35s var(--ease-out), visibility 0s; }
.revenir-accueil:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .revenir-accueil.visible:hover { opacity: 1; color: var(--bleu); } }
@media (max-width: 700px) { .revenir-accueil { left: 8px; top: 50px; font-size: .7rem; } }
.statique .revenir-accueil { display: none; }