/* ENTRE LES DEUX — feuille de style du site perso de Célestin.
   Esprit : fond gris bleuté, bulles blanches à contour fin, couleurs franches,
   barre de navigation fixe en bas, gros titres, autocollants inclinés,
   sections « nuit » sombres pour la musique, animations à ressort au défilement. */

:root {
  --fond: #F4EEE2;
  --blanc: #FFFDF8;
  --creme: #F4EFE3;
  --noir: #17151A;
  --nuit: #0F0E13;
  --gris: #9AA5B1;
  --gris-bleu: #B9C4D6;
  --rouge: #FF3B2F;
  --rouge-encre: #D0301F;   /* le rouge des surfaces qui portent du texte : lisible en blanc dessus */
  --bleu-encre: #2A61EE;    /* même chose pour le bleu (5,2:1 en blanc au lieu de 4,5:1 tout juste) */
  --jaune: #FFD23F;
  --bleu: #2F6BFF;
  --vert: #23C76A;
  --violet: #8A5CF6;
  --rose: #FF7AC6;
  --orange: #FF8A3D;
  --moutarde: #E0A526;
  --ligne: #17151A;
  --trait: 2px;
  --r-bulle: 999px;
  --r-carte: 28px;
  --sans: 'DM Sans', system-ui, sans-serif;
  --titre: 'Outfit', 'DM Sans', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --wrap: 1480px;
  --gutter: clamp(16px, 2.2vw, 32px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ressort: cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur: .35s;
  --barre-h: 108px;
  --ombre-c: var(--encre);
  --ombre: 8px 8px 0 var(--ombre-c);
  --encre: #17151A;      /* texte principal */
  --papier: #FFFDF8;     /* surface des cartes et bulles */
  --sourdine: #6B6672;   /* texte secondaire */
  --barre-fond: #F4EEE2;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; cursor: default;
  font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--encre);
  background: var(--fond);
  transition: background .3s ease, color .3s ease;
  padding-bottom: 0;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a[href], button, summary, label { cursor: pointer; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--encre); color: var(--fond); border-radius: var(--r-bulle); }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--sourdine); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.sur { color: var(--sourdine); margin-bottom: 10px; }
.centre { text-align: center; }
::selection { background: var(--jaune); color: var(--noir); }

/* ---------- Curseur personnalisé (souris seulement) ---------- */
/* ---------- Curseur : un point précis, un anneau qui s'étire avec la vitesse, une traînée, et l'œil sur les liens ---------- */
.curseur { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: 0; --teinte: var(--jaune); }
.curseur-pt { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--encre); box-shadow: 0 0 0 1.5px rgba(255, 253, 248, .95); transition: background .25s, box-shadow .25s, opacity .2s; }
.curseur-anneau { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--encre); box-shadow: 0 0 0 1.5px rgba(255, 253, 248, .9); display: grid; place-items: center; background: transparent; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--ang, 0deg)) scale(var(--sx, 1), var(--sy, 1)); transition: border-color .3s, background .3s, width .35s var(--ressort), height .35s var(--ressort), left .35s var(--ressort), top .35s var(--ressort); will-change: transform; }
.curseur-oeil { width: 22px; height: 22px; color: var(--encre); opacity: 0; transform: scale(.4) rotate(-40deg); transition: opacity .25s, transform .4s var(--ressort); overflow: visible; }
.curseur-oeil .logo-pupille { transform: translate(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 5px)); transform-box: fill-box; transform-origin: center; transition: transform .2s ease-out; }
.curseur-trace { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--teinte); opacity: .55; border: 1px solid var(--encre); }
.curseur-trace:nth-child(2) { width: 5px; height: 5px; opacity: .4; }
.curseur-trace:nth-child(3) { width: 4px; height: 4px; opacity: .28; }
.curseur-mot { position: absolute; left: 22px; top: 18px; padding: 6px 10px; background: var(--encre); color: var(--fond); border-radius: var(--r-bulle); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .25s; }
.curseur.is-lien .curseur-anneau { left: -26px; top: -26px; width: 52px; height: 52px; background: var(--teinte); border-color: var(--encre); }
.curseur.is-lien .curseur-oeil { opacity: 1; transform: none; }
.curseur.is-lien .curseur-pt { transform: scale(0); }
.curseur.is-lien .curseur-trace { opacity: 0; }
.curseur.is-mot .curseur-mot { opacity: 1; transform: none; }
.curseur.is-nuit .curseur-pt, .curseur.is-nuit .curseur-trace { background: var(--jaune); }
.curseur.is-nuit .curseur-anneau { border-color: var(--jaune); }
.curseur.is-nuit .curseur-trace { border-color: transparent; }
.curseur.is-fond-sombre .curseur-pt { background: var(--papier); box-shadow: 0 0 0 1.5px rgba(17, 15, 20, .9); }
.curseur.is-fond-sombre .curseur-anneau { border-color: var(--papier); box-shadow: 0 0 0 1.5px rgba(17, 15, 20, .75); }
.curseur.is-fond-sombre .curseur-trace { background: var(--jaune); border-color: transparent; }
.curseur.is-fond-sombre.is-lien .curseur-anneau { border-color: var(--encre); }
.curseur.is-clic .curseur-anneau { --sx: .8; --sy: .8; }
.curseur.is-clic .curseur-pt { transform: scale(1.8); }
.curseur.is-texte { opacity: 0 !important; }
@media (pointer: fine) {
  /* La souris système disparaît partout ; elle ne revient que là où le curseur maison ne peut pas suivre (champs de saisie, lecteurs Spotify). */
  .js.a-curseur, .js.a-curseur *, .js.a-curseur *::before, .js.a-curseur *::after { cursor: none !important; }
  .js.a-curseur input, .js.a-curseur textarea, .js.a-curseur select, .js.a-curseur iframe { cursor: auto !important; }
  .js.a-curseur .curseur { opacity: 1; }
}

/* ---------- Voile de transition entre pages ---------- */

/* ---------- Titres ---------- */
.h1 { font-family: var(--titre); font-weight: 800; font-size: clamp(40px, 7vw, 104px); line-height: .96; letter-spacing: -.035em; text-wrap: balance; }
.h1 em, .h2 em, .hero-titre em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.h2 { font-family: var(--titre); font-weight: 800; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; }
.lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; margin-bottom: 18px; }
.c-txt-rouge { color: var(--txt-rouge, #E00000); } .c-txt-bleu { color: var(--txt-bleu, #1F6FE0); } .c-txt-jaune { color: var(--encre); }
/* Titres révélés mot à mot (chaque mot glisse depuis le bas de sa ligne) */
.mot { display: inline-block; vertical-align: bottom; }
.mot > span { display: inline-block; }
.js .mots-in .mot > span { opacity: 0; transform: translate3d(0, .45em, 0); transition: opacity .55s ease-out, transform 1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--m, 0) * 40ms); will-change: transform, opacity; }
.js .mots-in.is-in .mot > span { opacity: 1; transform: none; }

/* ---------- Bulles, cartes, pastilles ---------- */
.bulle { background: var(--papier); border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); padding: clamp(22px, 3vw, 44px) clamp(28px, 4vw, 64px); }
.bulle-titre { position: relative; display: flex; align-items: flex-end; gap: 22px; padding: 0 0 18px; text-align: left; margin: clamp(48px, 7vw, 110px) 0 20px; border-bottom: var(--trait) solid var(--ligne); }
.bulle-titre .h1 { font-size: clamp(48px, 9vw, 150px); line-height: .9; }
.bulle-titre-large { margin-top: 24px; }
.point { position: relative; flex: none; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; border: var(--trait) solid var(--ligne); box-shadow: 4px 4px 0 var(--encre); }
.point-jaune { background: var(--jaune); } .point-rouge { background: var(--rouge); }
.bulle-texte { max-width: 900px; margin: 0 0 28px; text-align: left; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; border: 0; background: transparent; padding: 0; border-radius: 0; }
.bulle-texte-long { text-align: left; font-size: clamp(17px, 1.3vw, 19px); border-radius: 48px; }
.bulle-texte-long p + p { margin-top: 1em; }

.carte { position: relative; display: block; background: var(--papier); border: var(--trait) solid var(--ligne); border-radius: var(--r-carte); overflow: hidden; text-decoration: none; transition: transform .45s var(--ressort), box-shadow .45s var(--ressort); }
a.carte:hover { transform: translate(-4px, -4px) rotate(-.8deg); box-shadow: var(--ombre); }
.c-rouge { --c: var(--rouge-encre); --c-txt: #FFFFFF; --ombre-c: var(--bleu); } .c-jaune { --c: var(--jaune); --c-txt: #17151A; --ombre-c: var(--rouge); } .c-bleu { --c: var(--bleu-encre); --c-txt: #FFFFFF; --ombre-c: var(--jaune); } .c-noir { --c: #17151A; --c-txt: #FFFFFF; --ombre-c: var(--rouge); }

.pastille { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: var(--trait) solid var(--ligne); flex: none; vertical-align: middle; }
.pastille-rouge { background: var(--rouge); } .pastille-jaune { background: var(--jaune); } .pastille-bleu { background: var(--bleu); } .pastille-noir { background: #111111; } .pastille-blanc { background: #FFFFFF; }

.pilule { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; background: var(--papier); border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .4s var(--ressort), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow .4s var(--ressort); will-change: transform; }
.pilule:hover, .pilule.is-active { background: var(--encre); color: var(--fond); }
.pilule:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 4px 4px 0 var(--ombre-c); }
.pilule:has(.pastille-rouge):hover { background: var(--rouge-encre); color: #FFFFFF; --ombre-c: var(--bleu); } .pilule:has(.pastille-jaune):hover { background: var(--jaune); color: #17151A; --ombre-c: var(--rouge); } .pilule:has(.pastille-bleu):hover { background: var(--bleu-encre); color: #fff; --ombre-c: var(--jaune); } .pilule:has(.pastille-noir):hover { background: #17151A; color: #fff; --ombre-c: var(--rouge); }
.pilule-grande { padding: 16px 28px 16px 18px; font-size: 13px; }
.pilule-info { cursor: default; } .pilule-info:hover { transform: none; background: var(--papier); color: var(--encre); }
.ic { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.15em; flex: none; }

.etiquette { position: absolute; z-index: 2; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; background: #111111; color: #FFFFFF; border-radius: var(--r-bulle); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.drapeau { width: 24px; height: 16px; flex: 0 0 auto; display: block; }
.etiquette .drapeau { width: 21px; height: 14px; }
.sticker .drapeau { width: 26px; height: 17px; margin-right: 2px; }
.etiquette .pastille { width: 10px; height: 10px; border-color: transparent; }
.carte-fleche { position: absolute; z-index: 2; right: 18px; top: 18px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--papier); color: var(--encre); border: var(--trait) solid var(--ligne); border-radius: 50%; transition: transform .45s var(--ressort), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.carte-fleche .ic { width: 20px; height: 20px; }
.carte:hover .carte-fleche { background: var(--encre); color: var(--fond); transform: rotate(45deg) scale(1.1); }

/* Autocollants (façon Saturn) : petites étiquettes inclinées */
.sticker { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; color: #111111; text-decoration: none; background: var(--jaune); border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-5deg); box-shadow: 3px 3px 0 var(--noir); }
.sticker-rouge { background: var(--rouge-encre); color: #FFFFFF; } .sticker-bleu { background: var(--bleu-encre); color: #FFFFFF; } .sticker-blanc { background: var(--papier); color: var(--encre); }

/* ---------- Premier écran ---------- */
.hero { padding-top: clamp(20px, 3vw, 44px); }
.hero-haut { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.hero-titre { font-family: var(--titre); font-weight: 800; font-size: clamp(48px, 9.2vw, 140px); line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.hero-titre em { color: var(--txt-rouge, #E4271C); font-size: 1.08em; }
.hero-titre .souligne, .c-txt-jaune { text-decoration: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12c30-8 60-6 95-3s70 6 99-4' fill='none' stroke='%23FFD23F' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 92% / 100% .22em; padding-bottom: .04em; }
.hero-bas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(20px, 3vw, 36px); align-items: stretch; }
.hero-bande { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px; background: var(--gris-bleu); border: var(--trait) solid var(--ligne); border-radius: 48px; }
.hero-etoile { display: grid; place-items: center; width: 112px; height: 112px; }
.hero-etoile .etoile { width: 100%; height: 100%; color: var(--encre); }
.hero-texte { display: grid; align-items: center; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; border-radius: 40px; }
.hero-cote { display: grid; gap: 14px; grid-template-rows: auto 1fr; }
/* --- L'horloge de l'accueil : aiguilles à l'heure de la ville --- */
.cadran { display: flex; align-items: center; gap: 20px; padding: 16px 22px; background: var(--papier); border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); }
.cadran-svg { flex: none; width: 104px; height: 104px; }
.cadran-fond { fill: var(--blanc); stroke: var(--ligne); stroke-width: var(--trait); }
.cadran-grads line { stroke: var(--encre); stroke-width: 1; opacity: .35; }
.cadran-grads .est-heure { stroke-width: 2.4; opacity: .9; }
.cadran-aig line { stroke: var(--encre); stroke-linecap: round; }
.cadran-aig-h line { stroke-width: 4; }
.cadran-aig-m line { stroke-width: 2.6; }
.cadran-aig-s line { stroke: var(--rouge-encre); stroke-width: 1.4; }
.cadran-axe { fill: var(--encre); stroke: var(--blanc); stroke-width: 1.2; }
.cadran-txt { display: grid; gap: 2px; margin: 0; }
.cadran-sur { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine); }
.cadran-h { font-family: var(--titre); font-weight: 600; font-size: clamp(26px, 2.4vw, 38px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cadran-h .sep { animation: clignote 1s steps(2, start) infinite; }
.cadran-etat { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cadran-etat::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--vert); border: 1px solid var(--ligne); vertical-align: 1px; }
.cadran[data-phase="nuit"] .cadran-etat::before { background: var(--noir); }
.cadran[data-phase="travail"] .cadran-etat::before { background: var(--jaune); }
/* la nuit, le cadran s'assombrit : on voit l'heure et l'état d'un coup d'œil */
.cadran[data-phase="nuit"] .cadran-fond { fill: var(--noir); }
.cadran[data-phase="nuit"] .cadran-grads line { stroke: var(--papier); }
.cadran[data-phase="nuit"] .cadran-aig line { stroke: var(--papier); }
.cadran[data-phase="nuit"] .cadran-aig-s line { stroke: var(--jaune); }
.cadran[data-phase="nuit"] .cadran-axe { fill: var(--papier); stroke: var(--noir); }
@media (max-width: 559px) { .cadran { gap: 14px; padding: 14px 16px; } .cadran-svg { width: 78px; height: 78px; } }
@media (prefers-reduced-motion: reduce) { .cadran-h .sep { animation: none; } }

.hero-liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.type { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 96px; padding: 20px 28px; background: var(--c); color: var(--c-txt); border: var(--trait) solid var(--ligne); border-radius: 18px; font-family: var(--titre); font-weight: 600; font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.02em; text-decoration: none; transition: transform .45s var(--ressort), box-shadow .45s var(--ressort); position: relative; }
.type:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: var(--ombre); }
.type-n { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }

/* ---------- Bandeau défilant (façon Saturn) ---------- */
.defile { margin: clamp(28px, 4vw, 56px) 0 0; padding: 14px 0; color: #111111; background: var(--jaune); border-top: var(--trait) solid var(--ligne); border-bottom: var(--trait) solid var(--ligne); overflow: hidden; transform: rotate(-1.2deg) scale(1.02); }
.defile-piste { display: flex; width: max-content; gap: 0; animation: glisse 28s linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
.defile-piste span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--titre); font-weight: 600; font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -.02em; white-space: nowrap; }
.defile-piste .etoile { width: .8em; height: .8em; color: #111111; }

/* ---------- Duo de cartes / portrait ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.carte-image { aspect-ratio: 4 / 3; }
.carte-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.carte:hover .carte-img { transform: scale(1.04); }
.carte-portrait::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 64px; background: var(--c); border-left: var(--trait) solid var(--ligne); }
.carte-portrait .carte-fleche { right: 10px; }
.carte-portrait .sticker { position: absolute; z-index: 2; left: 22px; bottom: 22px; }
.duo { align-items: start; }
.duo .carte-image { aspect-ratio: 4 / 4.6; min-height: 0; }
.txt p + p { margin-top: 1em; }
.carte-types { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 24px; }
.carte-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }

/* ---------- Mosaïque de dessins ---------- */
.centre .pilule { margin: 8px 0 24px; }


/* ---------- Galerie dense (page dessins) : bord à bord, sans cadres, les meilleurs en grand ---------- */
.dense-zone { padding: 0 6px; margin-top: 8px; }
.dense { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 22vw; grid-auto-flow: dense; gap: 6px; }
.dense-item { margin: 0; position: relative; overflow: hidden; border-radius: 6px; background: var(--papier); }
.dense-item.is-grand { grid-column: span 2; grid-row: span 2; }
.dense-item.is-large { grid-column: span 2; }
.dense-item.is-haut { grid-row: span 2; }
.dense-btn { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.dense-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dense-item:hover img { transform: scale(1.04); }
.dense-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 14px; background: var(--papier); color: var(--encre); border: var(--trait) solid var(--ligne); border-radius: 14px; text-align: left; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .5s var(--ressort); pointer-events: none; }
.dense-cap .mono { color: var(--sourdine); font-size: 10px; }
.dense-titre { font-family: var(--titre); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.dense-item:hover .dense-cap, .dense-btn:focus-visible .dense-cap { opacity: 1; transform: none; }
@media (hover: none) { .dense-cap { display: none; } }
@media (max-width: 1099px) { .dense { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 30vw; } }
@media (max-width: 599px) { .dense { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 46vw; gap: 4px; } .dense-item.is-large { grid-column: span 2; grid-row: span 1; } .dense-item.is-haut { grid-row: span 1; } }

/* ---------- Projets ---------- */
.projets-liste { display: grid; gap: 14px; }
.projet-ligne { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 2fr) 60px; gap: 24px; align-items: center; padding: 22px 28px 22px 22px; background: var(--c); color: var(--c-txt); border: var(--trait) solid var(--ligne); border-radius: var(--r-carte); text-decoration: none; transition: transform .45s var(--ressort), box-shadow .45s var(--ressort); }
.projet-ligne:hover { transform: translate(-3px, -3px); box-shadow: var(--ombre); }
.projet-ligne-vignette { width: 120px; aspect-ratio: 4 / 3; border-radius: 12px; border: var(--trait) solid var(--ligne); overflow: hidden; background: var(--papier); display: grid; place-items: center; transform: rotate(-3deg); transition: transform .5s var(--ressort); }
.projet-ligne:hover .projet-ligne-vignette { transform: rotate(2deg) scale(1.08); }
.projet-ligne-vignette img { width: 100%; height: 100%; object-fit: cover; }
.projet-ligne-vignette .etoile { width: 36px; color: var(--c); }
.projet-ligne-titre { font-family: var(--titre); font-weight: 600; font-size: clamp(30px, 3.4vw, 52px); letter-spacing: -.03em; line-height: 1; }
.projet-ligne-accroche { font-size: 16px; line-height: 1.45; }
.projet-ligne .carte-fleche { position: static; justify-self: end; }
.c-noir .carte-fleche { background: #FFFFFF; color: #111111; }

/* ---------- Page projet (grande image, colonne d'infos collante, images empilées) ---------- */
.projet-tete { padding-top: 24px; }
.projet-tete > p { margin-bottom: 20px; }
.projet-cover { position: relative; border: var(--trait) solid var(--ligne); border-radius: 28px; overflow: hidden; background: var(--c); aspect-ratio: 16 / 8.5; }
.projet-cover img { width: 100%; height: 100%; object-fit: cover; }
.projet-cover.is-contain img { object-fit: contain; }
.projet-cover-vide { position: absolute; inset: 0; display: grid; place-items: center; }
.projet-cover-vide .etoile { width: 22%; max-width: 220px; color: rgba(255,255,255,.75); }
.projet-cover-titre { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.projet-cover-titre .h1 { padding: 14px 28px; background: var(--papier); color: var(--encre); border: var(--trait) solid var(--ligne); border-radius: 24px; font-size: clamp(34px, 5.4vw, 88px); }
.projet-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; margin-top: 24px; align-items: start; }
.projet-aside { position: sticky; top: var(--aside-top, 24px); display: grid; gap: 14px; }
.projet-aside .carte { padding: clamp(22px, 2.6vw, 34px); }
.projet-aside .carte-fiche-txt .txt p + p { margin-top: 1em; }
.projet-aside dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.projet-aside dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sourdine); padding-top: 4px; }
.projet-aside dd { margin: 0; }
.projet-flux { display: grid; gap: 22px; }
.projet-flux figure { background: var(--papier); border: var(--trait) solid var(--ligne); border-radius: 22px; overflow: hidden; }
.projet-flux figure img { width: 100%; }
.projet-flux figcaption { padding: 12px 18px; border-top: var(--trait) solid var(--ligne); font-size: 14px; }
.projet-flux-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.projet-vide { padding: clamp(40px, 6vw, 80px); text-align: center; border-radius: 22px; }
.carte-suivant { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: clamp(24px, 3vw, 40px); background: var(--c); color: var(--c-txt); margin-top: 24px; }
.carte-suivant .h2 { font-size: clamp(36px, 5vw, 80px); }
.carte-suivant .carte-fleche { position: static; width: 64px; height: 64px; }
.carte-suivant .carte-fleche .ic { width: 28px; height: 28px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.tags li { padding: 8px 14px; border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Voyages ---------- */
.voyages-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.voyages-grille-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carte-voyage { aspect-ratio: 4 / 3; background: var(--c); }
.carte-voyage-txt { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 14px 18px; background: var(--papier); border: var(--trait) solid var(--ligne); border-radius: 16px; font-family: var(--titre); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; letter-spacing: -.01em; color: var(--encre); }
.carte-vide { position: absolute; inset: 0; display: grid; place-items: center; }
.etoile-vide { width: 30%; max-width: 160px; color: rgba(255,255,255,.7); }
.c-noir .etoile-vide { color: rgba(255,255,255,.25); }
.carte-bandeau { padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); background: var(--c); color: var(--c-txt); border-radius: var(--r-carte) var(--r-carte) 0 0; }
.carte-bandeau .mono { margin-top: 12px; }
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }

/* ---------- À propos ---------- */
.reperes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Sections « nuit » (musique) ---------- */
.nuit { position: relative; margin-top: clamp(48px, 7vw, 110px); padding: clamp(40px, 6vw, 96px) 0; background: var(--nuit); color: #FFFFFF; border-top: var(--trait) solid var(--ligne); border-bottom: var(--trait) solid var(--ligne); overflow: hidden; }
.nuit::before { content: ''; position: absolute; left: -10%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,59,47,.4), transparent 65%); pointer-events: none; animation: derive 14s ease-in-out infinite alternate; }
.nuit::after { content: ''; position: absolute; right: -15%; bottom: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(138,92,246,.45), transparent 65%); pointer-events: none; animation: derive 18s ease-in-out infinite alternate-reverse; }
.nuit .wrap { position: relative; z-index: 1; }
.nuit .sur { color: var(--jaune); }
.nuit .muted { color: rgba(255,255,255,.62); }
.nuit .h1 { font-size: clamp(40px, 6.4vw, 96px); }
.nuit-tete { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: end; margin-bottom: clamp(24px, 4vw, 48px); }
.nuit-tete p { max-width: 52ch; color: rgba(255,255,255,.82); }
.genres { display: flex; flex-wrap: wrap; gap: 8px; }
.genres li { padding: 8px 14px; border: 1px solid rgba(255,255,255,.5); border-radius: var(--r-bulle); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.genres-grands li { font-family: var(--titre); font-size: clamp(22px, 2.4vw, 34px); text-transform: none; letter-spacing: -.02em; padding: 10px 22px; border-color: #FFFFFF; }
.nuit .pilule { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.nuit .pilule:hover { background: var(--jaune); color: #111111; border-color: var(--jaune); }

/* ---------- Platine et pochettes ---------- */
.platine-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.platine { position: relative; padding: clamp(20px, 3vw, 36px); background: #1A1B21; border: 1px solid rgba(255,255,255,.35); border-radius: 28px; touch-action: none; transition: box-shadow .35s var(--ease), border-color .35s; }
.platine.is-cible { border-color: var(--jaune); box-shadow: 0 0 0 4px rgba(255,230,0,.25), 0 0 60px rgba(255,230,0,.18); }
.platine-infos { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; min-height: 66px; }
.platine-titre { display: grid; gap: 2px; min-width: 0; }
.platine-titre strong { font-family: var(--titre); font-size: 18px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.platine-titre .mono { color: rgba(255,255,255,.6); }
.platine-boutons { display: flex; gap: 8px; flex: none; }
.platine-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #FFFFFF; border-radius: 50%; color: #FFFFFF; transition: transform .35s var(--ressort), background .25s, color .25s; }
.platine-btn:hover { background: var(--jaune); color: #111111; border-color: var(--jaune); transform: scale(1.08); }
.platine-btn .ic { width: 18px; height: 18px; }
.platine-btn[disabled] { opacity: .35; pointer-events: none; }
.platine-sortie { margin-top: 14px; }
.platine-sortie iframe { display: block; width: 100%; height: 152px; border: 0; border-radius: 14px; }
.egaliseur { display: flex; align-items: flex-end; gap: 3px; height: 22px; width: 34px; flex: none; }
.egaliseur i { flex: 1; background: var(--jaune); border-radius: 2px; height: 30%; transform-origin: bottom; }
.is-joue .egaliseur i { animation: egal .7s ease-in-out infinite alternate; }
.is-joue .egaliseur i:nth-child(2) { animation-delay: .15s; } .is-joue .egaliseur i:nth-child(3) { animation-delay: .3s; } .is-joue .egaliseur i:nth-child(4) { animation-delay: .1s; }

.pochettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pochette { position: relative; display: grid; gap: 10px; padding: 10px 10px 14px; background: #1A1B21; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; color: #FFFFFF; text-align: left; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform .45s var(--ressort), box-shadow .45s var(--ressort), border-color .3s; }
.pochette:hover { transform: translateY(-6px) rotate(-1.5deg); border-color: var(--jaune); box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); }
.pochette.is-saisie { opacity: .5; transform: scale(.96); }
.pochette.is-active { border-color: var(--jaune); box-shadow: 0 0 0 3px rgba(255,230,0,.35); }
.pochette-img { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--c, #2A2B33); }
.pochette-img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pochette-img .etoile { position: absolute; inset: 0; margin: auto; width: 40%; color: rgba(255,255,255,.75); }
.pochette-txt { display: grid; gap: 2px; padding: 0 4px; }
.pochette-txt strong { font-family: var(--titre); font-size: 16px; letter-spacing: -.01em; }
.pochette-txt .mono { color: rgba(255,255,255,.6); font-size: 11px; }
.pochette-conseil { margin-top: 14px; color: rgba(255,255,255,.6); font-size: 14px; }
.vinyle-volant { position: fixed; left: 0; top: 0; z-index: 180; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; background: repeating-radial-gradient(circle, #0B0B0E 0 1.5px, #1D1E24 2px 3.4px); box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 30px 60px rgba(0,0,0,.6); pointer-events: none; animation: tourne 3s linear infinite; }
.vinyle-volant .vinyle-label { width: 38%; height: 38%; }
.pochettes-vide { padding: clamp(28px, 4vw, 48px); border: 1px dashed rgba(255,255,255,.4); border-radius: 18px; text-align: center; color: rgba(255,255,255,.7); }
.concerts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Aperçu platine sur l'accueil */
.nuit-accueil { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.nuit-accueil .platine { max-width: 420px; }
.nuit-accueil .vinyle { opacity: 1; transform: none; }


/* ---------- Bouton à glissière (état 1 : texte + capuchon gris à droite ; état 2 : le rond passe à gauche) ---------- */
.glisse { --rond: var(--rouge); --rond-txt: #FFFFFF; position: relative; display: inline-flex; align-items: center; overflow: hidden; padding: 16px 92px 16px 28px; background: var(--papier); border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--encre); transition: transform .4s var(--ressort), box-shadow .4s var(--ressort); }
.glisse-jaune { --rond: var(--jaune); --rond-txt: #111111; } .glisse-bleu { --rond: var(--bleu); --rond-txt: #111111; } .glisse-noir { --rond: #111111; --rond-txt: #FFFFFF; }
.glisse-txt { position: relative; z-index: 1; white-space: nowrap; transition: transform .55s var(--ressort); }
.glisse-cap { position: absolute; top: -1px; bottom: -1px; right: -1px; width: 72px; display: grid; place-items: center; background: var(--gris-bleu); border: var(--trait) solid var(--ligne); border-radius: 0 var(--r-bulle) var(--r-bulle) 0; transition: right .55s var(--ressort), border-radius .35s ease; }
.glisse-rond { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--rond); color: var(--rond-txt); border: var(--trait) solid var(--ligne); transition: width .45s var(--ressort), height .45s var(--ressort); }
.glisse-rond .ic { width: 18px; height: 18px; opacity: 0; transform: scale(.4) rotate(-90deg); transition: opacity .25s, transform .5s var(--ressort); }
.glisse:hover { transform: translateY(-2px); }
.glisse:hover .glisse-cap, .glisse.is-active .glisse-cap { right: calc(100% - 72px); border-radius: var(--r-bulle) 0 0 var(--r-bulle); }
.glisse:hover .glisse-rond, .glisse.is-active .glisse-rond { width: 42px; height: 42px; }
.glisse:hover .glisse-rond .ic, .glisse.is-active .glisse-rond .ic { opacity: 1; transform: none; }
.glisse:hover .glisse-txt, .glisse.is-active .glisse-txt { transform: translateX(62px); }
/* Variante de la barre du bas : plus haute, et un point rouge apparaît sous le texte */
.glisse-cta { padding: 24px 92px 24px 32px; }
.nuit .glisse { background: #FFFFFF; color: #111111; border-color: #111111; }

/* ---------- Bloc « on se parle ? » (état 1 : motif à gauche, texte à droite ; état 2 : rouge à gauche, motif à droite) ---------- */
.appel { position: relative; display: block; min-height: 440px; margin: clamp(48px, 7vw, 110px) 0 0; overflow: hidden; }
a.appel:hover { transform: none; box-shadow: none; }
.appel-motif { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; border-right: var(--trait) solid var(--ligne); background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%20viewBox=%220%200%20200%20200%22%3E%3Cdefs%3E%3CclipPath%20id=%22c%22%3E%3Crect%20x=%224%22%20y=%224%22%20width=%22192%22%20height=%22192%22%20rx=%2270%22/%3E%3C/clipPath%3E%3C/defs%3E%3Crect%20width=%22200%22%20height=%22200%22%20fill=%22%23fff%22/%3E%3Crect%20x=%224%22%20y=%224%22%20width=%22192%22%20height=%22192%22%20rx=%2270%22%20fill=%22%23FFE600%22/%3E%3Cg%20clip-path=%22url(%23c)%22%3E%3Ccircle%20cx=%224%22%20cy=%224%22%20r=%2278%22%20fill=%22%233A8DFF%22/%3E%3Ccircle%20cx=%22196%22%20cy=%22196%22%20r=%2278%22%20fill=%22%233A8DFF%22/%3E%3Ccircle%20cx=%224%22%20cy=%224%22%20r=%2278%22%20fill=%22none%22%20stroke=%22%23111%22%20stroke-width=%221.2%22/%3E%3Ccircle%20cx=%22196%22%20cy=%22196%22%20r=%2278%22%20fill=%22none%22%20stroke=%22%23111%22%20stroke-width=%221.2%22/%3E%3C/g%3E%3Crect%20x=%224%22%20y=%224%22%20width=%22192%22%20height=%22192%22%20rx=%2270%22%20fill=%22none%22%20stroke=%22%23111%22%20stroke-width=%221.2%22/%3E%3C/svg%3E"); background-size: 160px 160px; background-position: -20px -20px; transition: transform .8s var(--ressort); z-index: 1; }
.appel-txt { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; padding: clamp(28px, 4vw, 64px); display: grid; align-content: center; gap: 18px; justify-items: start; transition: opacity .3s ease, transform .5s ease; }
.appel-txt .h1 { font-size: clamp(36px, 5vw, 76px); }
.appel-txt p { max-width: 46ch; font-size: 18px; }
.appel-rouge { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--rouge); display: grid; place-items: center; opacity: 0; transition: opacity .35s ease .15s; }
.appel-bulle { position: relative; padding: 22px 44px; color: #111111; background: #FFFFFF; border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); font-family: var(--titre); font-weight: 600; font-size: clamp(28px, 3.4vw, 52px); letter-spacing: -.03em; transform: scale(.6); transition: transform .6s var(--ressort) .2s; }
.appel-fleche { position: absolute; left: calc(50% + 150px); top: calc(50% - 74px); width: 64px; height: 64px; display: grid; place-items: center; color: #111111; background: #FFFFFF; border: var(--trait) solid var(--ligne); border-radius: 50%; transform: scale(0); transition: transform .6s var(--ressort) .3s; }
.appel-fleche .ic { width: 26px; height: 26px; }
@media (hover: hover) {
  .appel:not(.appel-fixe):hover .appel-motif { transform: translateX(100%); }
  .appel:not(.appel-fixe):hover .appel-txt { opacity: 0; transform: translateX(20px); }
  .appel:hover .appel-rouge { opacity: 1; }
  .appel:hover .appel-bulle, .appel:hover .appel-fleche { transform: none; }
}

/* ---------- À propos / CV ---------- */
.cv-tete { padding-top: 24px; }
.cv-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.cv-hero-txt { display: grid; align-content: start; gap: 22px; }
.cv-titre { font-size: clamp(42px, 6.4vw, 96px); }
.cv-intro { border-radius: 40px; }
.cv-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cv-photo { min-height: 420px; }
.cv-photo .sticker { position: absolute; z-index: 2; right: 22px; bottom: 22px; transform: rotate(4deg); }
.cv-reperes { justify-content: flex-start; margin-top: 18px; }
.cv-sec { margin-top: clamp(48px, 7vw, 96px); }
.cv-sec-tete { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: var(--trait) solid var(--ligne); }
.cv-num { font-size: 14px; color: var(--sourdine); }
.cv-approche { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cv-approche .bulle { border-radius: 40px; }
.cv-principes { display: grid; gap: 12px; }
.cv-principe { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 20px 22px; align-items: center; }
.cv-principe strong { font-family: var(--titre); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.cv-principe p { grid-column: 2; color: var(--sourdine); font-size: 15px; }
.pastille-num { width: 32px; height: 32px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: #111111; }
.pastille-noir.pastille-num { color: #FFFFFF; }
.cv-liste { display: grid; gap: 12px; }
.cv-ligne { display: grid; grid-template-columns: 230px 130px minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 12px 24px; align-items: start; padding: 24px 28px; transition: transform .45s var(--ressort), box-shadow .45s var(--ressort); }
.cv-ligne:hover { transform: translate(-3px, -3px); box-shadow: var(--ombre); }
.cv-periode { display: inline-flex; align-items: flex-start; gap: 10px; }
.cv-periode .pastille { margin-top: 1px; }
.cv-lieu { color: var(--sourdine); padding-top: 3px; }
.cv-role { font-family: var(--titre); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; letter-spacing: -.02em; }
.cv-detail { display: grid; gap: 12px; font-size: 16px; line-height: 1.5; }
.cv-detail .tags { margin: 0; }
.cv-detail .tags span { padding: 6px 12px; border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.cv-liste-petite .cv-role { font-size: clamp(18px, 1.5vw, 22px); }
/* --- Le CV en collage : pastilles de titre, étiquettes scotchées, post-it --- */
.cv-sec-tampon { align-items: center; gap: 14px; border-bottom: 0; padding-bottom: 0; margin-bottom: 26px; }
.cv-sec-tampon .h2 { padding: 8px 30px 12px; background: var(--jaune); color: var(--encre); border: var(--trait) solid var(--ligne); border-radius: 999px; box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 6px var(--anneau, var(--rouge-encre)), 4px 5px 0 var(--ligne); font-size: clamp(22px, 2.6vw, 36px); transform: rotate(-1.4deg); }
.cv-sec-tampon .cv-num { transform: rotate(6deg); }

.cv-etiquettes { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 4px; }
.cv-etiquette { padding: 9px 20px; color: var(--encre); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; box-shadow: 2px 3px 0 rgba(23, 21, 26, .16); clip-path: polygon(2% 8%, 16% 0, 38% 7%, 62% 1%, 84% 8%, 100% 2%, 98% 92%, 82% 100%, 58% 93%, 34% 100%, 14% 94%, 0 100%); }
.cv-etiquette-0 { background: #9BD9F0; transform: rotate(-1.6deg); }
.cv-etiquette-1 { background: var(--jaune); transform: rotate(1.2deg); }
.cv-etiquette-2 { background: #7BE08A; transform: rotate(-.8deg); }
.cv-etiquette-3 { background: #FFB07C; transform: rotate(1.8deg); }
.cv-etiquette-4 { background: #C9B6F5; transform: rotate(-2deg); }

.cv-principes { gap: 18px; }
.cv-postit { position: relative; background: #FFE873; padding: 22px 24px 26px; border-radius: 2px 2px 14px 2px; box-shadow: 4px 6px 0 rgba(23, 21, 26, .14); }
.cv-postit:nth-child(odd) { transform: rotate(-1deg); }
.cv-postit:nth-child(even) { transform: rotate(1.2deg); }
.cv-postit p { color: #4A4436; }
.cv-postit::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(135deg, transparent 48%, rgba(23, 21, 26, .18) 50%, #F3D74F 52%); border-radius: 0 0 14px 0; }

.scotch { position: absolute; z-index: 3; width: 116px; height: 32px; background: rgba(255, 210, 63, .62); box-shadow: 0 1px 3px rgba(23, 21, 26, .18); clip-path: polygon(3% 10%, 97% 0, 100% 88%, 0 100%); }
.scotch-photo { top: 10px; left: 22px; transform: rotate(-6deg); }
.scotch-bloc { top: -13px; right: 34px; width: 96px; height: 28px; transform: rotate(5deg); }
.cv-bloc-competences { overflow: visible; }

/* --- La planche : tout est posé de travers, rien n'est aligné au cordeau --- */
@media (min-width: 1000px) {
  .cv-photo { transform: rotate(1.4deg); }
  .cv-intro { transform: rotate(-.5deg); }

  /* les pastilles de titre se baladent d'un bord à l'autre */
  .cv-sec-formation .cv-sec-tampon, .cv-sec-approche .cv-sec-tampon { flex-direction: row-reverse; justify-content: flex-start; margin-left: auto; margin-right: 4%; }
  .cv-sec-formation .cv-sec-tampon .h2 { transform: rotate(1.8deg); }
  .cv-sec-outils .cv-sec-tampon { margin-left: 16%; }
  .cv-sec-outils .cv-sec-tampon .h2 { transform: rotate(1.1deg); }
  .cv-sec-acote .cv-sec-tampon { margin-left: 8%; }

  /* le parcours : chaque expérience a sa largeur et son inclinaison */
  .cv-sec .cv-ligne { transform: rotate(var(--pente, 0deg)); }
  .cv-sec .cv-ligne:hover { transform: translate(-3px, -3px) rotate(var(--pente, 0deg)); }
  .cv-sec-parcours .cv-liste { gap: 18px; }
  .cv-sec-parcours .cv-ligne:nth-child(4n+1) { --pente: -.35deg; margin-right: 10%; }
  .cv-sec-parcours .cv-ligne:nth-child(4n+2) { --pente: .45deg; margin-left: 13%; }
  .cv-sec-parcours .cv-ligne:nth-child(4n+3) { --pente: -.25deg; margin-right: 4%; margin-left: 5%; }
  .cv-sec-parcours .cv-ligne:nth-child(4n+4) { --pente: .3deg; margin-left: 8%; margin-right: 2%; }

  /* la formation se range à droite */
  .cv-sec-formation .cv-liste { width: 84%; margin-left: auto; gap: 16px; }
  .cv-sec-formation .cv-ligne:nth-child(odd) { --pente: .4deg; }
  .cv-sec-formation .cv-ligne:nth-child(even) { --pente: -.5deg; margin-right: 9%; }

  /* outils et compétences : deux blocs inégaux, l'un plus bas que l'autre */
  .cv-outils { grid-template-columns: minmax(0, 1.3fr) minmax(0, .92fr); gap: 28px; align-items: start; }
  .cv-bloc-competences { transform: rotate(-.6deg); margin-right: -2%; }
  .cv-outils .cv-bloc-nuit { transform: rotate(.7deg); margin-top: 64px; }

  /* l'approche : le texte à gauche, les post-it éparpillés à droite */
  .cv-approche { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; }
  .cv-approche .bulle { margin-top: 46px; transform: rotate(.4deg); }
  .cv-principes { gap: 22px; }
  .cv-postit:nth-child(1) { margin-right: 14%; transform: rotate(-1.6deg); }
  .cv-postit:nth-child(2) { margin-left: 16%; transform: rotate(1.4deg); }
  .cv-postit:nth-child(3) { margin-right: 6%; margin-left: 5%; transform: rotate(-.8deg); }

  /* à côté : trois cartes qui ne commencent pas à la même hauteur */
  .cv-acote { align-items: start; }
  .cv-acote-carte:nth-child(1) { transform: rotate(-.7deg); }
  .cv-acote-carte:nth-child(2) { margin-top: 48px; transform: rotate(.6deg); }
  .cv-acote-carte:nth-child(3) { margin-top: 18px; transform: rotate(-.4deg); }
  .cv-passions { width: 78%; margin-left: auto; margin-top: 26px; transform: rotate(.5deg); }
}

.cv-outils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cv-bloc { padding: clamp(24px, 3vw, 36px); }
.cv-bloc-nuit { background: #111111; color: #FFFFFF; }
.cv-bloc-nuit .sur { color: var(--jaune); }
.cv-pilules { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-bloc-nuit .cv-pilules li { padding: 10px 16px; border: 1px solid rgba(255,255,255,.55); border-radius: var(--r-bulle); font-family: var(--titre); font-size: 17px; }
.cv-acote { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cv-acote-carte { display: grid; align-content: end; gap: 10px; min-height: 240px; padding: clamp(22px, 2.6vw, 34px); background: var(--c); color: var(--c-txt); }
.cv-acote-carte p { font-size: 16px; max-width: 34ch; }
.cv-acote-carte .h2 { font-size: clamp(28px, 3vw, 44px); }
@media (max-width: 1099px) { .cv-ligne { grid-template-columns: 1fr 1fr; } .cv-role, .cv-detail { grid-column: 1 / -1; } }
@media (max-width: 899px) { .cv-hero, .cv-approche, .cv-outils, .cv-acote { grid-template-columns: minmax(0, 1fr); } .cv-photo { min-height: 0; aspect-ratio: 4 / 5; } .cv-ligne { grid-template-columns: 1fr; padding: 20px; } .cv-intro, .cv-approche .bulle { border-radius: 28px; } }

/* ---------- Pages intérieures ---------- */
.tete { padding-top: 24px; }
.tete > p { margin-bottom: 20px; }

/* ---------- Zoom (dessins) ---------- */
.zoom { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(17,17,17,.92); }
.zoom-img { max-width: min(96vw, 1400px); max-height: 82vh; width: auto; height: auto; border-radius: 12px; }
.zoom-fermer { position: absolute; top: 20px; right: 20px; }
.zoom-titre { position: absolute; left: 24px; bottom: 20px; color: #FFFFFF; }

/* ---------- Pied ---------- */
.pied { margin-top: clamp(48px, 7vw, 110px); }
.pied-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 14px; }
.pied-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 22px 28px; border-radius: 28px; background: var(--fond); font-size: 15px; }
.pied-id { flex-direction: column; align-items: flex-start; gap: 4px; }
.pied-id strong { font-family: var(--titre); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.pied-liens a { text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.pied-liens a:hover { color: var(--bleu); }
.pied-haut { gap: 12px; text-decoration: none; padding: 14px 24px 14px 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.pied-haut .pastille { width: 34px; height: 34px; display: grid; place-items: center; color: #FFFFFF; }
.pied-haut .ic { width: 16px; height: 16px; }
.pied-degrade { position: relative; height: clamp(260px, 40vh, 520px); margin-top: 14px; overflow: hidden; background: linear-gradient(180deg, #17151A 0 22%, #3B1E7A 42%, #2F6BFF 60%, #FF7AC6 76%, var(--jaune) 88%, var(--rouge)); border-top: var(--trait) solid var(--ligne); }
.page-home .pied-degrade { height: calc(100vh - 120px); min-height: 560px; }
.pied-liens { justify-content: space-between; }
.pied-liens-col { display: grid; gap: 8px; }
.pied-liens-col a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pied-mail { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.pied-haut-bloc { justify-content: center; }

/* ---------- Barre de navigation fixe (bas) ---------- */
.barre { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; transition: transform .5s var(--ressort); }
.barre.is-cache { transform: translateY(calc(100% + 16px)); }
.barre-in { display: flex; align-items: center; gap: 14px; max-width: var(--wrap); margin: 0 auto; padding: 14px 18px; background: var(--barre-fond); border: var(--trait) solid var(--ligne); border-radius: 26px; box-shadow: 0 20px 40px -24px rgba(17,17,17,.4); }
.barre-logo { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; color: var(--encre); }
.barre-etoile { width: 54px; height: 54px; transition: transform .6s var(--ressort); }
.barre-logo:hover .barre-etoile { transform: rotate(90deg) scale(1.15); }
.barre-nom { font-family: var(--titre); font-weight: 800; font-size: 27px; line-height: .92; letter-spacing: -.03em; text-transform: lowercase; }
.barre-menu { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }
.barre-outils { display: flex; gap: 8px; }
.pilule-langue { justify-content: center; min-width: 58px; padding: 10px 14px; font-weight: 700; }
.barre-menu .pilule { padding: 10px 20px 10px 12px; }
.barre-burger { display: none; }

/* ---------- Apparitions au défilement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .6s ease-out, transform .9s var(--ressort); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .hero-haut > *, .js .hero-bas > * { opacity: 0; transform: translateY(20px) scale(.96); animation: hero-in .9s var(--ressort) forwards; }
  .js .hero-haut > :nth-child(2) { animation-delay: .25s; }
  .js .hero-bas > :nth-child(1) { animation-delay: .35s; }
  .js .hero-bas > :nth-child(2) { animation-delay: .5s; }
  .js .defile { opacity: 0; animation: hero-in .9s var(--ressort) .6s forwards; }
  .js .pop { transform: scale(0); transition: transform .6s var(--ressort); transition-delay: calc(var(--i, 0) * 80ms + .25s); }
  .js .pop.is-in, .js .is-in .pop { transform: none; }
}
@keyframes hero-in { to { opacity: 1; transform: none; } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes glisse { to { transform: translateX(-50%); } }
@keyframes clignote { to { opacity: 0; } }
@keyframes egal { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } .curseur { display: none; } .js.a-curseur, .js.a-curseur a { cursor: auto; } }

/* ---------- Écrans moyens et petits ---------- */
@media (max-width: 1099px) {
  .projet-ligne { grid-template-columns: 90px minmax(0, 1fr) 52px; row-gap: 6px; }
  .projet-ligne-vignette { width: 90px; grid-row: 1 / 4; }
  .projet-ligne-accroche { grid-column: 2 / 3; }
  .projet-ligne .carte-fleche { grid-row: 1; grid-column: 3; }
  .voyages-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projet-corps { grid-template-columns: 1fr; }
  .projet-aside { position: static; }
  .pochettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  :root { --barre-h: 88px; }
  .hero-haut { grid-template-columns: 1fr; }
  .hero-bas, .nuit-tete, .platine-zone, .nuit-accueil { grid-template-columns: minmax(0, 1fr); }
  .hero-bande { grid-template-columns: auto minmax(0, 1fr); border-radius: 40px; }
  .hero-etoile { width: 72px; height: 72px; }
  .hero-texte { padding: 22px 24px; border-radius: 32px; }
  .bulle, .bulle-texte { border-radius: 36px; }
  .duo{ grid-template-columns: 1fr; }
  .voyages-grille, .voyages-grille-page, .galerie, .projet-flux-duo { grid-template-columns: 1fr; }
  .pied-grid { grid-template-columns: 1fr; }
  .bulle-titre { border-radius: 40px; }
  .projet-cover { aspect-ratio: 4 / 3; }
  .projet-cover-titre .h1 { font-size: clamp(28px, 8vw, 44px); border-radius: 16px; padding: 10px 18px; }
  .carte-suivant { grid-template-columns: 1fr; }
  .appel { min-height: 0; }
  .appel-motif { position: relative; width: auto; height: 180px; border-right: 0; border-bottom: var(--trait) solid var(--ligne); }
  .appel-txt { position: relative; width: auto; }
  .appel-rouge { display: none; }
  .glisse-cta { padding: 14px 80px 14px 18px; }
  .nuit-accueil .platine { max-width: none; }
  .barre { left: 8px; right: 8px; bottom: 8px; }
  .barre-in { padding: 10px 12px; border-radius: 22px; flex-wrap: wrap; }
  .barre-menu { display: none; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barre-outils { grid-column: 1 / -1; justify-content: center; }
  .barre-menu.is-open { display: grid; }
  .barre-menu .pilule { justify-content: center; }
  .barre-burger { display: inline-flex; align-items: center; padding: 12px 18px; border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); background: var(--papier); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .barre-burger[aria-expanded="true"] { background: var(--encre); color: var(--fond); }
}
@media (max-width: 599px) {
  .type { min-height: 72px; font-size: 24px; }
  .hero-liens { grid-template-columns: 1fr; }
  .hero-bande { grid-template-columns: 1fr; padding: 16px; border-radius: 32px; }
  .hero-etoile { width: 56px; height: 56px; }
  .hero-texte { padding: 18px 20px; border-radius: 24px; font-size: 16px; }
  .barre-nom { display: none; }
  .pochettes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pochette { padding: 8px 8px 10px; }
  .glisse { max-width: 100%; padding-right: 84px; }
  .glisse-txt { white-space: normal; }
}

/* ======================================================================
   V3 — « internet gem » : grain, taches de couleur, objet 3D, cartes qui
   s'inclinent, autocollants qui tournent au défilement, doodles dessinés.
   ====================================================================== */
/* Grain sur toute la page (texture papier) */
.grain { position: fixed; inset: -50%; z-index: 140; pointer-events: none; opacity: .07; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") repeat; mix-blend-mode: multiply; }

/* Taches de couleur floues qui dérivent derrière le premier écran */
.hero { position: relative; isolation: isolate; }
.tache { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; animation: derive 16s ease-in-out infinite alternate; }
.tache-1 { left: -8%; top: -10%; width: 34vw; height: 34vw; background: var(--jaune); }
.tache-2 { right: 10%; top: 6%; width: 26vw; height: 26vw; background: var(--rose); animation-duration: 21s; animation-direction: alternate-reverse; }
.tache-3 { left: 40%; top: 40%; width: 22vw; height: 22vw; background: var(--bleu); opacity: .35; animation-duration: 25s; }
@keyframes derive { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vw) scale(1.15); } }

/* Objet 3D : un cube aux six faces colorées, qui tourne tout seul et suit la souris */
.scene { perspective: 900px; width: clamp(140px, 15vw, 220px); height: clamp(140px, 15vw, 220px); flex: none; display: grid; place-items: center; }
.cube { --taille: clamp(90px, 9vw, 130px); --rx: 0deg; --ry: 0deg; position: relative; width: var(--taille); height: var(--taille); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; animation: cube-flotte 6s ease-in-out infinite; }
.cube-tour { position: absolute; inset: 0; transform-style: preserve-3d; animation: cube-tourne 16s linear infinite; }
.face { position: absolute; inset: 0; display: grid; place-items: center; border: var(--trait) solid var(--ligne); backface-visibility: hidden; }
.face .etoile { width: 46%; height: 46%; }
.face-1 { background: var(--rouge); transform: rotateY(0deg) translateZ(calc(var(--taille) / 2)); color: #fff; }
.face-2 { background: var(--jaune); transform: rotateY(90deg) translateZ(calc(var(--taille) / 2)); color: #17151A; }
.face-3 { background: var(--bleu); transform: rotateY(180deg) translateZ(calc(var(--taille) / 2)); color: #fff; }
.face-4 { background: var(--vert); transform: rotateY(-90deg) translateZ(calc(var(--taille) / 2)); color: #17151A; }
.face-5 { background: var(--violet); transform: rotateX(90deg) translateZ(calc(var(--taille) / 2)); color: #fff; }
.face-6 { background: var(--rose); transform: rotateX(-90deg) translateZ(calc(var(--taille) / 2)); color: #17151A; }
.scene-ombre { position: absolute; bottom: 4%; left: 50%; width: 60%; height: 12px; transform: translateX(-50%); border-radius: 50%; background: var(--encre); opacity: .18; filter: blur(4px); animation: ombre-flotte 6s ease-in-out infinite; }
@keyframes cube-tourne { to { transform: rotateY(360deg) rotateX(360deg); } }
@keyframes cube-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes ombre-flotte { 0%, 100% { scale: 1; opacity: .18; } 50% { scale: .8; opacity: .1; } }
.hero-haut { align-items: center; }

/* Cartes qui s'inclinent sous la souris (JS pose --tx/--ty) */
.js [data-tilt] { transform-style: preserve-3d; transition: transform .35s ease-out, box-shadow .45s var(--ressort); }
.js [data-tilt]:hover { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(-4px); }

/* Autocollants qui tournent doucement avec le défilement (JS pose --tour) */
.sticker { transform: rotate(calc(-5deg + var(--tour, 0deg))); transition: transform .4s ease-out; }
.sticker:hover { transform: rotate(3deg) scale(1.06); }

/* Doodle : petite flèche dessinée à la main (SVG maison) */
.doodle { position: absolute; width: 90px; height: 70px; pointer-events: none; color: var(--encre); }
.doodle svg { width: 100%; height: 100%; }

/* Liens de rubrique sur l'accueil : blocs de couleur épais */
.type { border-width: var(--trait); font-weight: 800; box-shadow: 0 0 0 var(--ombre-c); }
.type:hover { transform: translate(-4px, -4px) rotate(-1.5deg); box-shadow: var(--ombre); }
.type-n { border-width: 2px; }

/* Bandeau défilant : deux couleurs et deux angles */
.defile { transform: rotate(-1.4deg) scale(1.02); border-width: var(--trait); }
.defile-piste span:nth-child(odd) .etoile { color: var(--rouge); }
.defile-piste span:nth-child(even) .etoile { color: var(--bleu); }

/* Étiquette de section : grand chiffre serif italique */
.sur { font-family: var(--mono); }
.cv-num { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3vw, 44px); color: var(--rouge); }

/* Portrait : bord coloré épais et coin replié */
.carte-portrait::after { width: 18px; background: repeating-linear-gradient(180deg, var(--rouge) 0 24px, var(--jaune) 24px 48px, var(--bleu) 48px 72px); }

/* Projets : ligne avec un gros numéro serif */
.projet-ligne { border-width: var(--trait); }
.projet-ligne-titre { font-weight: 800; }
.projet-ligne::before { content: counter(projet, decimal-leading-zero); counter-increment: projet; position: absolute; right: 100px; top: 6px; font-family: var(--serif); font-style: italic; font-size: 34px; opacity: .4; }
.projet-ligne-accroche { padding-right: 60px; }
.projets-liste { counter-reset: projet; }

/* Barre du bas : logo qui tourne, pilules qui gigotent */
.barre-in { border-width: var(--trait); box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.barre-logo:hover .barre-etoile { transform: rotate(180deg) scale(1.2); }
.barre-menu .pilule { border-width: var(--trait); }

/* Contact : bulle rouge → gribouillis */
.appel-bulle { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(34px, 4.4vw, 68px); }

/* Titres de pages intérieures alignés à gauche, avec un gros numéro serif à côté */
.tete .bulle-titre .h1 { font-size: clamp(48px, 9vw, 150px); }

/* Mobile : cube plus petit, bandeau moins penché */
@media (max-width: 899px) {
  .scene { width: 120px; height: 120px; margin-left: auto; }
  .cube { --taille: 70px; }
  .hero-haut { grid-template-columns: minmax(0, 1fr) auto; }
  .bulle-titre { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
  .point { margin-bottom: 0; }
  .projet-ligne::before { display: none; }
  .tache { filter: blur(40px); }
}
@media (prefers-reduced-motion: reduce) { .tache, .cube, .cube-tour, .scene-ombre { animation: none !important; } }

/* Aperçu des dessins sur l'accueil : même mur, sur 6 colonnes */
.dense-apercu { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 15vw; margin-bottom: 26px; }
.dense-apercu .dense-item { display: block; border-radius: 10px; }
.dense-apercu .dense-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (max-width: 899px) { .dense-apercu { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 30vw; } }

.projet-ligne.c-bleu .mono, .bento-tuile.c-bleu .mono, .type.c-bleu .mono { color: #FFFFFF; }

/* ---------- Page projet : grille « bento » (planche de marque) ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); grid-auto-flow: dense; gap: 16px; margin-top: 16px; }
.bento-tuile { position: relative; overflow: hidden; border: var(--trait) solid var(--ligne); border-radius: 24px; background: var(--papier); }
.bento-texte { grid-column: span 2; padding: clamp(22px, 2.6vw, 34px); display: grid; align-content: start; gap: 14px; }
.bento-texte .lead { margin: 0; }
.bento-suite { grid-column: span 2; }
.bento-info, .bento-tags, .bento-lien { padding: clamp(20px, 2.4vw, 30px); background: var(--c); color: var(--c-txt); display: grid; align-content: space-between; gap: 12px; }
.bento-info strong { font-family: var(--titre); font-weight: 800; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.02em; }
.bento-info .mono, .bento-tags .mono, .bento-lien .mono { opacity: .8; }
.bento-annee { font-family: var(--serif); font-style: italic; font-size: 30px; text-transform: none; letter-spacing: 0; }
.bento-tags .pilule { background: rgba(255,255,255,.9); color: #17151A; border-color: #17151A; }
.bento-lien { grid-column: span 2; text-decoration: none; min-height: 200px; transition: transform .45s var(--ressort), box-shadow .45s var(--ressort); }
.bento-lien:hover { transform: translate(-4px, -4px); box-shadow: var(--ombre); }
.bento-lien .carte-fleche { position: static; justify-self: end; width: 56px; height: 56px; }
.bento-img { margin: 0; background: var(--papier); display: flex; flex-direction: column; }
.bento-img .bento-zoom { display: block; flex: 1 1 auto; min-height: 0; width: 100%; padding: 0; border: 0; background: none; overflow: hidden; }
.bento-img img, .bento-img .media-video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bento-img:hover img { transform: scale(1.03); }
.bento-img.is-large { grid-column: span 2; grid-row: span 2; }
.bento-img figcaption { flex: 0 0 auto; padding: 9px 14px; background: var(--papier); border-top: var(--trait) solid var(--ligne); font-size: 13px; line-height: 1.35; }
.bento-vide { grid-column: span 2; display: grid; place-items: center; gap: 10px; padding: 30px; }
.bento-etoile { width: 60px; color: var(--gris-bleu); }
.bento-etoile .etoile { width: 100%; }
.bento-palette { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0; }
.bento-palette span { display: block; border: 1px solid var(--ligne); }
@media (max-width: 1099px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento-img.is-large { grid-row: span 1; } }
@media (max-width: 599px) { .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .bento-texte, .bento-suite, .bento-lien, .bento-img.is-large, .bento-vide { grid-column: span 1; } .bento-palette { min-height: 90px; } .bento-info, .bento-tags { min-height: 160px; } }

/* ---------- Intro de l'accueil : pluie d'objets, rebonds, nom, ouverture ---------- */
.intro { position: fixed; inset: 0; z-index: 160; background: var(--fond); overflow: hidden; display: none; contain: strict; }
.js .intro.is-on { display: block; }
.intro-ciel { position: absolute; inset: 0; }
.intro-obj { position: absolute; bottom: 12vh; width: var(--w, 140px); left: var(--x, 50%); transform-origin: 50% 100%; transform: translate3d(-50%, -140vh, 0) rotate(var(--r0, -30deg)); animation: intro-chute 1.9s linear forwards; animation-delay: calc(var(--i) * .11s + .1s); will-change: transform; backface-visibility: hidden; }
.intro-obj svg { width: 100%; height: auto; display: block; }
.intro-obj::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 10px; border-radius: 50%; background: rgba(23,21,26,.16); z-index: -1; }
.intro-souris { --x: 10%; --w: 88px; --r0: -60deg; --r1: -8deg; }
.intro-ecran { --x: 26%; --w: 220px; --r0: 20deg; --r1: -3deg; }
.intro-livres { --x: 45%; --w: 180px; --r0: -25deg; --r1: 2deg; }
.intro-cube { --x: 61%; --w: 140px; --r0: 70deg; --r1: 12deg; }
.intro-cadre { --x: 76%; --w: 130px; --r0: -40deg; --r1: -6deg; }
.intro-proto { --x: 91%; --w: 88px; --r0: 30deg; --r1: 5deg; }
.intro-frame { --x: 37%; --w: 200px; --r0: -15deg; --r1: 7deg; bottom: 30vh; }
.intro-crayon { --x: 68%; --w: 44px; --r0: 90deg; --r1: -28deg; bottom: 26vh; }
.intro-etoile { --x: 19%; --w: 90px; --r0: 0deg; --r1: 40deg; bottom: 38vh; }
.intro-fleur { --x: 54%; --w: 96px; --r0: -30deg; --r1: -6deg; bottom: 12vh; }
.intro-fleur2 { --x: 84%; --w: 90px; --r0: 25deg; --r1: 9deg; bottom: 12vh; }
.intro-fleur3 { --x: 4%; --w: 92px; --r0: -50deg; --r1: 14deg; bottom: 30vh; }
.intro-petale { --x: 30%; --w: 40px; --r0: 0deg; --r1: 120deg; bottom: 44vh; animation-duration: 3s; animation-timing-function: ease-in-out; }
.intro-petale2 { --x: 72%; --w: 34px; --r0: 60deg; --r1: -200deg; bottom: 46vh; animation-duration: 3.4s; animation-timing-function: ease-in-out; }
.intro-cube2 { --x: 84%; --w: 110px; --r0: -70deg; --r1: -14deg; bottom: 34vh; }
/* Chute façon physique : accélération, écrasement à l'impact, deux rebonds décroissants, repos */
@keyframes intro-chute {
  0%   { transform: translate3d(-50%, -140vh, 0) rotate(var(--r0)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  38%  { transform: translate3d(-50%, 0, 0) rotate(calc(var(--r1) * 1.5)) scaleY(1); animation-timing-function: ease-out; }
  41%  { transform: translate3d(-50%, 0, 0) rotate(calc(var(--r1) * 1.5)) scale(1.12, .82); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  58%  { transform: translate3d(-50%, -12vh, 0) rotate(calc(var(--r1) * .7)) scale(.96, 1.05); animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
  74%  { transform: translate3d(-50%, 0, 0) rotate(var(--r1)) scale(1.06, .92); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  84%  { transform: translate3d(-50%, -3.5vh, 0) rotate(var(--r1)) scale(.99, 1.02); animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
  92%  { transform: translate3d(-50%, 0, 0) rotate(var(--r1)) scale(1.02, .98); animation-timing-function: ease-out; }
  100% { transform: translate3d(-50%, 0, 0) rotate(var(--r1)) scale(1, 1); }
}
/* Les pétales, eux, planent en zigzag */
.intro-petale, .intro-petale2 { animation-name: intro-plane; }
@keyframes intro-plane {
  0%   { transform: translate3d(-50%, -120vh, 0) rotate(var(--r0)); }
  25%  { transform: translate3d(calc(-50% + 60px), -80vh, 0) rotate(calc(var(--r0) + 60deg)); }
  50%  { transform: translate3d(calc(-50% - 60px), -45vh, 0) rotate(calc(var(--r0) + 140deg)); }
  75%  { transform: translate3d(calc(-50% + 50px), -15vh, 0) rotate(calc(var(--r0) + 220deg)); }
  100% { transform: translate3d(-50%, 0, 0) rotate(var(--r1)); }
}
.intro-sol { position: absolute; left: 0; right: 0; bottom: 0; height: 12vh; border-top: var(--trait) solid var(--ligne); background: repeating-linear-gradient(90deg, var(--jaune) 0 40px, var(--rouge) 40px 80px, var(--bleu) 80px 120px, var(--vert) 120px 160px, var(--rose) 160px 200px); transform: translate3d(0, 100%, 0); animation: intro-sol .7s cubic-bezier(.2, .9, .3, 1.15) forwards; }
@keyframes intro-sol { to { transform: none; } }
.intro-mot { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; gap: .02em; font-family: var(--titre); font-weight: 800; font-size: clamp(56px, 12vw, 190px); letter-spacing: -.04em; line-height: 1; color: var(--encre); white-space: nowrap; }
.intro-esp { width: .28em; }
.intro-l { display: inline-block; transform: translate3d(0, -120vh, 0) rotate(-12deg); animation: intro-lettre 1.1s cubic-bezier(.34, 1.4, .64, 1) forwards; animation-delay: calc(1.7s + var(--l) * .055s); will-change: transform; }
.intro-i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--rouge); }
@keyframes intro-lettre { 0% { transform: translate3d(0, -120vh, 0) rotate(-12deg); } 70% { transform: translate3d(0, 0, 0) rotate(2deg) scale(1.04, .94); } 100% { transform: none; } }
.intro-compteur { position: absolute; right: 28px; top: 24px; font-size: 14px; color: var(--sourdine); font-variant-numeric: tabular-nums; }
.intro-passer { position: absolute; left: 28px; top: 22px; padding: 10px 16px; border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); background: var(--papier); color: var(--encre); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
/* Sortie : un seul mouvement — le rideau monte, les objets et les lettres suivent avec un léger retard (parallaxe) */
.intro.is-fin { animation: intro-rideau .95s cubic-bezier(.76, 0, .24, 1) forwards; }
.intro.is-fin .intro-obj { animation: intro-suit .95s cubic-bezier(.76, 0, .24, 1) forwards; }
.intro.is-fin .intro-mot { animation: intro-suit-mot .95s cubic-bezier(.76, 0, .24, 1) forwards; }
.intro.is-fin .intro-mot .intro-l { animation: none; transform: none; }
.intro.is-fin .intro-compteur, .intro.is-fin .intro-passer { opacity: 0; transition: opacity .3s; }
@keyframes intro-rideau { to { transform: translate3d(0, -100%, 0); } }
@keyframes intro-suit { 0% { transform: translate3d(-50%, 0, 0) rotate(var(--r1)); } 100% { transform: translate3d(-50%, 28vh, 0) rotate(calc(var(--r1) + 6deg)); } }
@keyframes intro-suit-mot { 0% { transform: translate(-50%, -50%); } 100% { transform: translate(-50%, calc(-50% + 22vh)); } }
body.intro-ouverte { overflow: hidden; }
@media (max-width: 899px) {
  .intro-obj { --w: 90px; }
  .intro-ecran { --w: 140px; } .intro-livres { --w: 120px; } .intro-frame { --w: 130px; } .intro-cube, .intro-cube2 { --w: 90px; } .intro-crayon { --w: 30px; } .intro-souris, .intro-proto { --w: 60px; } .intro-fleur, .intro-fleur2, .intro-fleur3 { --w: 64px; }
  .intro-mot { font-size: 14vw; }
}
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }

/* ---------- À propos : un peu de mouvement ---------- */
.js .cv-ligne.reveal { transform: translateX(-40px); }
.js .cv-ligne.reveal.is-in { transform: none; }
.js .cv-pilules > li.reveal { transform: scale(.6) rotate(-6deg); transition-delay: calc(var(--i, 0) * 45ms); }
.js .cv-pilules > li.reveal.is-in { transform: none; }
.js .cv-sec-tete.reveal .cv-num { display: inline-block; transform: rotate(-20deg) scale(.5); transition: transform .8s var(--ressort) .2s; }
.js .cv-sec-tete.reveal.is-in .cv-num { transform: none; }
.cv-ligne .pastille { transition: transform .5s var(--ressort); }
.cv-ligne:hover .pastille { transform: scale(1.5); }
.cv-ligne:hover .cv-role { color: var(--rouge); transition: color .3s; }
.cv-bloc-cv { position: relative; margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.doodle-cv { position: static; width: 70px; height: 54px; color: var(--jaune); animation: doodle-vibre 2.4s ease-in-out infinite; }
@keyframes doodle-vibre { 0%, 100% { transform: rotate(0) translateX(0); } 50% { transform: rotate(-8deg) translateX(-6px); } }
.cv-photo .carte-img { animation: photo-respire 9s ease-in-out infinite; }
@keyframes photo-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .doodle-cv, .cv-photo .carte-img { animation: none; } }

/* ---------- Platine en 3D (CSS) ---------- */
.platine-socle { position: relative; aspect-ratio: 1.15; perspective: 1500px; perspective-origin: 50% 20%; }
.scene3d { position: absolute; inset: 8% 8% 6%; transform-style: preserve-3d; transform: rotateX(54deg) rotateZ(-22deg); }
.boitier { position: absolute; inset: 0; transform-style: preserve-3d; --ep: 38px; }
.boitier-dessus { position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(135deg, #8F66F2, #7448E0); border: var(--trait) solid #17151A; transform: translateZ(var(--ep)); transform-style: preserve-3d; }
.boitier-dessus::before { content: ''; position: absolute; inset: 10px; border-radius: 10px; border: 2px solid rgba(255,255,255,.18); pointer-events: none; }
.boitier-face { position: absolute; border: var(--trait) solid #17151A; box-sizing: border-box; }
.boitier-avant { left: 0; right: 0; bottom: 0; height: var(--ep); transform-origin: 50% 100%; transform: rotateX(-90deg); background: #5B36B8; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-radius: 0 0 8px 8px; }
.boitier-droite { top: 0; bottom: 0; right: 0; width: var(--ep); transform-origin: 100% 50%; transform: rotateY(90deg); background: #47289C; border-radius: 0 8px 8px 0; }
.boitier-ombre { position: absolute; inset: 8% -8% -10% 8%; border-radius: 22px; background: rgba(0,0,0,.45); transform: translateZ(-2px); filter: blur(6px); }
.curseur-piste { position: relative; width: 44%; height: 10px; border: 2px solid #17151A; border-radius: 6px; background: #2A1A5E; overflow: hidden; }
.curseur-piste i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--avance, 0) * 100%); background: var(--vert); transition: width .5s linear; }
.boitier-leds { display: flex; gap: 6px; }
.boitier-leds i { width: 9px; height: 16px; border-radius: 3px; background: var(--vert); border: 1.5px solid #17151A; opacity: .3; }
.is-joue .boitier-leds i { animation: led 1.1s ease-in-out infinite alternate; }
.is-joue .boitier-leds i:nth-child(2) { animation-delay: .2s; } .is-joue .boitier-leds i:nth-child(3) { animation-delay: .4s; }
@keyframes led { to { opacity: 1; } }
/* Plateau centré à 40 % / 50 %, rayon 31 % de la largeur */
.anneau { position: absolute; left: 7%; top: 50%; width: 66%; aspect-ratio: 1; transform: translate(0, -50%) translateZ(1px); border-radius: 50%; border: 5px solid var(--vert); box-shadow: 0 0 18px rgba(35,199,106,.55); }
.is-joue .anneau { animation: anneau-pulse 1.6s ease-in-out infinite alternate; }
@keyframes anneau-pulse { to { box-shadow: 0 0 34px rgba(35,199,106,.9); } }
.plateau { position: absolute; left: 9%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(0, -50%) translateZ(6px); transform-style: preserve-3d; border-radius: 50%; background: radial-gradient(circle, #26233A 0 12%, #17151A 13%); border: var(--trait) solid #17151A; box-shadow: inset 0 0 0 6px #2E2B45; }
.plateau::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: #2A2740; border: var(--trait) solid #17151A; z-index: -1; transform: translateZ(-6px); }
.vinyle { position: absolute; inset: 3%; border-radius: 50%; background: repeating-radial-gradient(circle, #0B0B0E 0 1.6px, #221F33 2.2px 3.6px); box-shadow: 0 0 0 2px #0B0B0E, 0 10px 24px rgba(0,0,0,.5); opacity: 0; transform: translateZ(4px) scale(.7); transition: opacity .35s, transform .5s var(--ressort); }
.vinyle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 40%, rgba(255,255,255,.07) 45% 50%, transparent 55% 100%); }
.vinyle.is-on { opacity: 1; transform: translateZ(4px) scale(1); }
.vinyle.is-tourne { animation: vinyle-tourne 1.9s linear infinite; }
@keyframes vinyle-tourne { from { transform: translateZ(4px) rotate(0); } to { transform: translateZ(4px) rotate(360deg); } }
.vinyle-label { position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--jaune) center / cover no-repeat; box-shadow: 0 0 0 2px #0B0B0E, 0 0 0 5px #17151A; }
.vinyle-label::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; margin: -4.5% 0 0 -4.5%; border-radius: 50%; background: #0B0B0E; }
.axe { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #F4EEE2; border: 1.5px solid #17151A; transform: translateZ(12px); }
/* Bras : pivot à 82 % / 12 %, longueur 60 % de la hauteur. À 21° le diamant touche le bord du disque, à 40° le centre de l'étiquette. */
.bras { position: absolute; left: 82%; top: 12%; width: 8%; height: 60%; margin-left: -4%; transform-origin: 50% 0; transform: translateZ(20px) rotate(-14deg); transition: transform 1s var(--ease); }
.bras.is-pose { transform: translateZ(20px) rotate(calc(27deg + var(--avance, 0) * 15deg)); }
.bras-axe { position: absolute; left: 50%; top: 0; width: 190%; aspect-ratio: 1; margin-left: -95%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F4EEE2, #CFC2E8); border: var(--trait) solid #17151A; box-shadow: 0 5px 0 #17151A; }
.bras-tige { position: absolute; left: 50%; top: 0; width: 34%; height: 90%; margin-left: -17%; background: linear-gradient(90deg, #FFFDF8, #D9D0E6); border: 2px solid #17151A; border-radius: 6px; }
.bras-tete { position: absolute; left: 50%; top: 84%; width: 110%; height: 16%; margin-left: -55%; background: var(--rouge); border: 2px solid #17151A; border-radius: 5px; transform: rotate(-22deg); transform-origin: 50% 0; box-shadow: 3px 3px 0 #17151A; }
.bras-tete::after { content: ''; position: absolute; left: 30%; bottom: -6px; width: 6px; height: 6px; border-radius: 50%; background: #F4EEE2; border: 1.5px solid #17151A; }
.bouton-rond { position: absolute; right: 7%; bottom: 9%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFDF8, #D9D0E6); border: var(--trait) solid #17151A; transform: translateZ(8px); box-shadow: 0 8px 0 #17151A; }
.bouton-rond::after { content: ''; position: absolute; left: 50%; top: 12%; width: 3px; height: 30%; margin-left: -1.5px; background: #17151A; border-radius: 2px; }
.platine.is-cible .boitier-dessus { box-shadow: 0 0 0 6px var(--jaune); }
.platine-temps { flex: none; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.nuit-accueil .platine-socle { aspect-ratio: 1.1; }
@media (max-width: 899px) { .scene3d { inset: 6% 6% 4%; } .boitier { --ep: 26px; } }
@media (prefers-reduced-motion: reduce) { .vinyle.is-tourne, .is-joue .boitier-leds i, .is-joue .anneau { animation: none; } }

@media (max-width: 599px) {
  .platine-infos { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .platine-infos .egaliseur { display: none; }
  .platine-titre strong { white-space: normal; }
  .platine-titre .mono { white-space: normal; }
  .platine-temps { align-self: center; }
  .platine-boutons { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Avatar : cadré sur le haut pour ne jamais couper la tête. */
.carte-portrait .carte-img, .cv-photo .carte-img { object-position: 50% 8%; }
@media (max-width: 899px) { .cv-photo .carte-img { object-position: 50% 0; } }
.cv-photo .carte-img { object-position: 50% 0; transform-origin: 50% 0; }
/* Photo « à propos » : la carte prend le format exact de l'illustration, rien n'est coupé. */
.cv-photo { aspect-ratio: 2 / 3; min-height: 0; align-self: start; }
.cv-photo .carte-img { object-position: 50% 50%; transform-origin: 50% 50%; animation: none; }
@media (max-width: 899px) { .cv-photo { aspect-ratio: 2 / 3; } }
/* Vidéos de galerie : même traitement que les photos. */
.media-video { display: block; width: 100%; height: auto; border-radius: inherit; background: var(--encre); }
.projet-flux figure .media-video, .bento-tuile .media-video { object-fit: cover; }

/* ---------- Logo Obey Studio : l'œil ---------- */
.barre-etoile { color: var(--encre); overflow: visible; }
.barre-logo:hover .barre-etoile { transform: scale(1.12); }
.logo-pupille { transform: translate(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 9px)); transition: transform .25s ease-out; transform-box: fill-box; transform-origin: center; }
.barre-logo:hover .logo-pupille { transform: translate(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 9px)) scale(1.15); }
.barre-nom em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: 0; }

/* ---------- L'œil du logo (cube, hero, vignettes vides) ---------- */
.logo-cil { transform: translateY(-96px); }
.hero-etoile .logo-cil { animation: cligne 6.5s ease-in-out infinite; }
@keyframes cligne { 0%, 90%, 100% { transform: translateY(-96px); } 93.5%, 95% { transform: translateY(0); } }
.face .etoile { width: 58%; height: 58%; }
.face-1 .etoile circle:first-child { fill: var(--jaune); }
.projet-cover-vide .etoile, .etoile-vide, .pochette-img .etoile, .projet-ligne-vignette .etoile { color: var(--encre); }
.c-noir .etoile-vide { color: #fff; }
.bento-etoile { color: var(--encre); }
@media (prefers-reduced-motion: reduce) { .hero-etoile .logo-pupille { animation: none; } }

/* Intro : l'œil du logo remplace le « o » de obey, il tombe avec les lettres, puis regarde autour de lui */
.intro-oeil { width: .7em; height: .7em; align-self: flex-end; margin: 0 .02em .03em 0; }
.intro-oeil-svg { display: block; width: 100%; height: 100%; color: var(--encre); overflow: visible; }
.intro-oeil-svg .logo-pupille { transform-box: fill-box; transform-origin: center; animation: intro-regard 3.2s ease-in-out 2.9s infinite; }
@keyframes intro-regard {
  0%, 12% { transform: translate(0, 0) scaleY(1); }
  22%, 34% { transform: translate(-9px, 2px) scaleY(1); }
  44%, 56% { transform: translate(9px, -2px) scaleY(1); }
  66%, 78% { transform: translate(0, 0) scaleY(1); }
  82% { transform: translate(0, 0) scaleY(.08); }
  86%, 100% { transform: translate(0, 0) scaleY(1); }
}
.intro.is-fin .intro-oeil-svg .logo-pupille { animation: none; }
@media (prefers-reduced-motion: reduce) { .intro-oeil-svg .logo-pupille { animation: none; } }

/* Bloc « on se parle ? » : griffonnages épais et dégradés, dessinés en SVG dans les couleurs du site */
.appel-motif { background: var(--fond) url("../img/motif-contact.svg") center / cover no-repeat; }

/* --- l'atelier 3D (page à propos) --- */
.atelier-sec { display: none; }
.atelier-sec:has(.atelier-ok) { display: block; }
.atelier { position: relative; height: min(82vh, 780px); border: var(--trait) solid var(--ligne); border-radius: var(--r-carte); background: radial-gradient(120% 100% at 50% 0%, #FBF6EC 0%, #EFE7D8 100%); overflow: hidden; touch-action: pan-y; }
.atelier-toile { display: block; width: 100%; height: 100%; cursor: grab; }
.atelier-glisse .atelier-toile { cursor: grabbing; }
.atelier-aide { position: absolute; left: 18px; top: 16px; margin: 0; padding: 8px 14px; background: rgba(255,253,248,.9); border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.atelier-point { position: absolute; will-change: transform; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px; background: var(--blanc); color: var(--encre); border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); text-decoration: none; opacity: 1; transition: background .2s var(--ease), box-shadow .2s var(--ease); box-shadow: 3px 3px 0 var(--noir); }
.atelier-num { display: grid; place-items: center; width: 26px; height: 26px; background: var(--jaune); border-radius: 50%; font-size: 11px; }
.atelier-lib { max-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; transition: max-width .35s var(--ease), padding .35s var(--ease); }
.atelier-point:hover .atelier-lib, .atelier-point:focus-visible .atelier-lib { max-width: 200px; padding-right: 8px; }
.atelier-point:hover, .atelier-point:focus-visible { background: var(--jaune); }
.atelier-main .atelier-toile { cursor: pointer; }
.atelier { transition: background .8s var(--ease); }
.atelier-nuit { background: radial-gradient(120% 100% at 50% 0%, #2A2530 0%, #15131A 100%); }
.atelier-nuit .atelier-aide, .atelier-nuit .atelier-barre { background: rgba(22,20,26,.82); border-color: rgba(255,255,255,.22); color: #F3EDE2; }
.atelier-nuit .atelier-bt { color: #F3EDE2; }
.atelier-barre { position: absolute; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; background: rgba(255,253,248,.9); border: var(--trait) solid var(--ligne); border-radius: var(--r-bulle); transition: background .8s var(--ease), border-color .8s var(--ease), color .8s var(--ease); }
.atelier-bt { padding: 7px 12px; background: transparent; color: var(--encre); border: 0; border-radius: var(--r-bulle); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.atelier-bt:hover, .atelier-bt:focus-visible { background: rgba(0,0,0,.08); }
.atelier-nuit .atelier-bt:hover, .atelier-nuit .atelier-bt:focus-visible { background: rgba(255,255,255,.14); }
.atelier-bt.est-on { background: var(--jaune); color: var(--encre); }
.atelier-bt-rond { width: 32px; padding: 7px 0; text-align: center; font-size: 14px; }
.atelier-sep { width: 1px; height: 20px; background: var(--ligne); }
@media (max-width: 759px) { .atelier-sec { display: none !important; } }
@media (max-width: 1000px) { .atelier-aide { display: none; } }
@media (prefers-reduced-motion: reduce) { .atelier-point { transition: none; } }
.cv-passions { margin-top: 16px; display: grid; gap: 12px; }
.cv-passions .lead { margin: 0; }