/* Portfolio — auxence viroulaud
   Toutes les valeurs « var(--…) » sont pilotées par le panneau de réglages
   (js/atelier.js). Celles ci-dessous ne servent que de secours. */

@font-face {
  font-family: "ZT Nature";
  src: url("../polices/ZT-Nature-Variable-VF.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ZT Nature";
  src: url("../polices/ZT-Nature-Variable-Italic-VF.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  --papier: #fff; --encre: #000; --accent: #dc4142; --table: #e9e9e6;
  --f-titre: "Fuuld", "Bitcount Prop Single", "ZT Nature", sans-serif;
  --t-couv: 17cqw; --t-titre: 3.4rem; --t-index: 1.55rem; --g-titre: 600; --il-titre: 0em; --ih-titre: .95;
  --vague: 0px; --vague-duree: 2.4s;
  --t-texte: 15px; --g-texte: 300; --ih-texte: 1.25; --col-texte: 38ch; --t-petit: 12.5px;
  --marge: 6cqw; --retrait: 5.5%; --largeur: 1100px;
  --gouttiere: 24px;
  --pl-largeur: 62%; --pl-rot: 0deg; --ombre: .25; --rayon: 0px; --fusion: normal;
  --tete-taille: .74em; --tete-rayon: 50%; --tete-tour: 0s;
  --grain: 0; --duree: 450ms; --rep-col: 12;
  --at-l: 0px; --sig-h: 1.45em; --sig-couv: 3.2cqw; --defil-duree: 45s; --decalage: 0px; --tete-ecart: 0em; --aurore-texte: #e9e1fb;
}
:root[data-atelier="ouvert"] { --at-l: min(340px, 100vw); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papier); color: var(--encre); scroll-behavior: smooth; scrollbar-width: none; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "ZT Nature", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--t-texte); font-weight: var(--g-texte); line-height: var(--ih-texte);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
[data-souligne="oui"] .texte a, [data-souligne="oui"] .lien, [data-souligne="oui"] .contact a,
[data-souligne="oui"] .bandeau nav a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
em { font-style: italic; }
::selection { background: var(--accent); color: var(--papier); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

#cadre { container: cadre / inline-size; margin-right: var(--at-l); transition: margin-right .3s ease; min-height: 100vh; overflow-x: clip; }
.gabarit { max-width: var(--largeur); margin-inline: auto; }

/* ------------------------------------------------------------------ bandeau */
.bandeau {
  position: sticky; top: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .9rem var(--marge); font-size: var(--t-petit); font-style: italic;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
.bandeau a, .bandeau button { pointer-events: auto; }
.bandeau { transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.bandeau.cache { translate: 0 -110%; }
@media (prefers-reduced-motion: reduce) { .bandeau { transition: none; } }
.bandeau nav { display: flex; gap: 1.4em; align-items: baseline; }
.bandeau b { font-weight: 800; letter-spacing: -.04em; }
.bandeau a:hover, .bandeau button:hover { text-decoration: underline; text-underline-offset: .2em; }
.bandeau button { font-style: italic; }
[data-bandeau="défile"] .bandeau { position: static; }
[data-bandeau="caché"] .bandeau { display: none; }

/* ------------------------------------------------------------------ titres */
.mot, .titre, .titre-p {
  font-family: var(--f-titre); font-weight: var(--g-titre);
  letter-spacing: var(--il-titre); line-height: var(--ih-titre); margin: 0;
  /* axes des polices pixel variables (Bitcount, Handjet, Doto) ; sans effet sur les autres */
  font-variation-settings: "ELSH" var(--px-forme, 50), "ELXP" var(--px-exp, 64), "ROND" var(--px-forme, 50),
    "ELGR" var(--px-grille, 1), "CRSV" var(--px-cursive, 0), "slnt" var(--pente, 0);
}
[data-casse="minuscules"] :is(.mot, .titre, .titre-p) { text-transform: lowercase; }
[data-casse="capitales"] :is(.mot, .titre, .titre-p) { text-transform: uppercase; }
.titre { font-size: min(var(--t-titre), 13cqw); text-wrap: balance; }
.titre-p { font-size: var(--t-index); display: block; line-height: 1.05; text-wrap: balance; }
.cat, .meta, .fiche, .num, .an { font-size: var(--t-petit); }
.cat { display: block; font-style: italic; }

.mot { font-size: var(--t-couv); line-height: 1; white-space: nowrap; }
.mot .l { display: inline-block; }
[data-vague="oui"] .mot .l { animation: vague var(--vague-duree) ease-in-out infinite; animation-delay: calc(var(--i) * -.13s); }
@keyframes vague { 50% { translate: 0 calc(var(--vague) * -1); } }

/* ------------------------------------------------------------------ la tête dans le « o » */
.tete {
  width: var(--tete-taille); height: var(--tete-taille);
  border-radius: var(--tete-rayon); overflow: hidden;
  vertical-align: -.07em; margin: 0 .03em;
  background: var(--encre);
  rotate: var(--inc, 0deg); transition: rotate .3s ease-out, border-radius .3s;
}
.tete img { display: block; width: 100%; height: 100%; translate: var(--gx, 0) var(--gy, 0); transition: translate .3s ease-out; }
[data-tete-fond="accent"] .tete { background: var(--accent); }
[data-tete-fond="noir"] .tete { background: #000; }
[data-tete-fond="aucun"] .tete { background: none; }
[data-tete-anime="oui"] .mot .tete { animation: tour var(--tete-tour) linear infinite; }
@keyframes tour { to { rotate: 360deg; } }

/* ------------------------------------------------------------------ couverture, fin */
.couverture {
  min-height: calc(100svh - 3.4rem);
  display: grid; place-content: center; justify-items: center;
  padding: 0 var(--marge) 9svh; text-align: center; overflow: hidden;
}
.signature-c { margin-top: 2.2cqw; font-style: italic; font-size: max(var(--t-petit), 1.5cqw); }


.fin { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 0 var(--marge) 2.4rem; overflow: hidden; }
.fin .mot { place-self: center; }
.pied { display: flex; justify-content: space-between; align-items: end; gap: 2rem; font-style: italic; font-size: var(--t-petit); }
.contact { text-align: right; }
.contact a { display: block; }
.contact a:hover { color: var(--accent); }
[data-mail="non"] .c-mail, [data-tel="non"] .c-tel { display: none; }

/* ------------------------------------------------------------------ sommaire */
.sommaire { padding: 14svh var(--marge) 16svh; }
.sommaire > .titre { padding-left: var(--retrait); margin-bottom: clamp(2.5rem, 7cqw, 6rem); }
[data-num="non"] .num, [data-an="non"] .an, [data-res="non"] .res { display: none !important; }
.num, .an { font-style: italic; font-variant-numeric: tabular-nums; }
.res { display: block; }

.suite a:hover .titre-p { color: var(--accent); }

/* ------------------------------------------------------------------ images + trame */
.img { position: relative; margin: 0; display: block; border-radius: var(--rayon); overflow: hidden; }
.img picture, .suite-img picture { display: contents; }
.img img { display: block; width: 100%; height: auto; mix-blend-mode: var(--fusion); transition: opacity .2s; }
[data-nb="oui"] .img img { filter: grayscale(1); }
.img canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transition: opacity .2s; }
.img.tramee canvas { display: block; }
.img.tramee img { opacity: 0; }
@media (hover: hover) {
  [data-reveler="oui"] .img.tramee:hover img { opacity: 1; }
  [data-reveler="oui"] .img.tramee:hover canvas { opacity: 0; }
}
.img.vide {
  aspect-ratio: 3 / 2; display: grid; place-items: center;
  border: 1px dashed currentColor; font-style: italic; font-size: var(--t-petit);
}
.img.zoom { cursor: zoom-in; }
.img.vide.zoom { cursor: default; }

/* ------------------------------------------------------------------ page projet */
.projet { display: flex; flex-direction: column; padding: 0 var(--marge) 5rem; }
.projet .colonne, .projet .images { display: contents; }
.entete-p { order: 0; display: flex; justify-content: space-between; padding: 1.4rem 0 clamp(1.6rem, 4cqw, 3.4rem); font-size: var(--t-petit); font-style: italic; }
.entete-p a:hover { color: var(--accent); }
.tete-projet { order: 1; padding-left: var(--retrait); margin-bottom: clamp(1.2rem, 2.6cqw, 2.2rem); }
.tete-projet .sous { white-space: nowrap; }
.meta { margin-top: .7rem; line-height: 1.3; }
.visuel { order: 2; }
.corps { order: 3; padding-left: var(--retrait); margin: clamp(1.6rem, 3.6cqw, 3rem) 0 0; max-width: calc(var(--col-texte) + var(--retrait)); }
.texte p + p { margin-top: 1.25em; }
.texte { hyphens: manual; }
.tilde { text-align: center; margin: .5em 0 .9em; }
.fiche { line-height: 1.35; }
[data-fiche-it="oui"] .fiche { font-style: italic; }
.lien:hover { color: var(--accent); }

.planche-zone {
  order: 4; margin: clamp(3rem, 7cqw, 6rem) calc(var(--marge) * -1) 0;
  padding: clamp(3rem, 8cqw, 7rem) var(--marge); display: flex; flex-direction: column; align-items: center;
}
.feuille {
  position: relative; width: var(--pl-largeur); rotate: var(--pl-rot); background: var(--papier);
  box-shadow: 0 calc(var(--ombre) * 30px) calc(var(--ombre) * 70px) rgb(0 0 0 / calc(var(--ombre) * .5));
}

.suite { order: 5; display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding-top: clamp(3rem, 7cqw, 6rem); }
.suite a { max-width: 46%; }
.suite a[rel="next"] { text-align: right; margin-left: auto; max-width: 58%; display: flex; flex-direction: column; align-items: flex-end; }
/* le projet suivant, en grand avec son image */
.suite a[rel="next"] .titre-p { font-size: clamp(1.8rem, 5cqw, 4.2rem); line-height: .95; }
.suite-img { display: block; width: min(100%, 34rem); margin-top: 1.2rem; overflow: hidden; border-radius: var(--rayon); }
.suite-img img { display: block; width: 100%; max-height: 60svh; object-fit: cover; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.suite a[rel="next"]:hover .suite-img img { scale: 1.04; }
/* légendes sous les images */
.legende { margin: .6rem 0 0; font-size: var(--t-petit); font-style: italic; line-height: 1.35; }
.planche-zone .legende { text-align: center; margin-top: 1.4rem; }
/* une ou plusieurs photos dans la zone planche */
.planches { width: 100%; display: flex; justify-content: center; }
.planche { width: var(--pl-largeur); display: flex; flex-direction: column; align-items: center; }
.planche .feuille { width: 100%; }
.planches.plusieurs { /* carrousel : une feuille à la fois, on glisse ou on clique les flèches */
  display: flex; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 32px 0; margin: -32px 0; overscroll-behavior-x: contain;
}
.planches.plusieurs::-webkit-scrollbar { display: none; }
.planches.plusieurs .planche { flex: 0 0 100%; width: auto; scroll-snap-align: center; }
.planches.plusieurs .feuille { width: var(--pl-largeur); }
.car-nav { display: flex; align-items: center; gap: 1rem; margin-top: clamp(1.4rem, 3cqw, 2.4rem); font-style: italic; font-size: var(--t-petit); }
.car-nav button { border: 0; background: none; color: inherit; font: inherit; font-size: 1.05rem; font-style: normal; line-height: 1; padding: .3rem .4rem; cursor: pointer; }
.car-nav button:hover { color: var(--accent); }
.car-num { font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: center; }
.suite small { font-size: var(--t-petit); font-style: italic; display: block; margin-bottom: .3rem; }

/* variante : texte à côté des images */
@container cadre (min-width: 820px) {
  [data-projet="cote"] .projet {
    display: grid; grid-template-columns: minmax(15rem, calc(var(--col-texte) * .85)) minmax(0, 1fr);
    column-gap: max(var(--gouttiere), 4cqw); align-items: start;
  }
  [data-projet="cote"] .projet .colonne { display: block; position: sticky; top: 4.2rem; }
  [data-projet="cote"] .projet .images { display: block; }
  [data-projet="cote"] :is(.entete-p, .suite) { grid-column: 1 / -1; }
  [data-projet="cote"] :is(.tete-projet, .corps) { padding-left: 0; }
  [data-projet="cote"] .titre { font-size: min(var(--t-titre), 5.2cqw); }
  [data-projet="cote"] .planche-zone { margin-inline: 0; }
}

/* ------------------------------------------------------------------ loupe */
.loupe { position: fixed; inset: 0; z-index: 950; background: var(--papier); display: grid; place-items: center; padding: 3vmin; cursor: zoom-out; }
.loupe img { max-width: 100%; max-height: 94vh; display: block; box-shadow: 0 20px 60px rgb(0 0 0 / .25); }
.loupe button { /* fermer : petit cercle fin avec une croix, à l'encre de la page (blanc sur rouge et sur noir) */
  position: absolute; top: 1.1rem; right: 1.1rem; width: 30px; height: 30px; padding: 0;
  border: 1.5px solid var(--encre); border-radius: 50%; background: none; color: var(--encre); font-size: 0; cursor: pointer;
}
.loupe button::before, .loupe button::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor;
  translate: -50% -50%; rotate: 45deg;
}
.loupe button::after { rotate: -45deg; }
.loupe button:focus { outline: none; }

/* ------------------------------------------------------------------ ambiance */
.grain {
  position: fixed; inset: 0; right: var(--at-l); z-index: 900; pointer-events: none; opacity: var(--grain); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.reperes {
  display: none; position: fixed; top: 0; bottom: 0; left: 6vw; right: calc(var(--at-l) + 6vw); z-index: 890; pointer-events: none;
  background: repeating-linear-gradient(to right,
    color-mix(in srgb, var(--accent) 16%, transparent) 0 calc(100% / var(--rep-col) - 12px),
    transparent calc(100% / var(--rep-col) - 12px) calc(100% / var(--rep-col)));
  background-size: calc(100% + 12px) 100%;
}
[data-reperes="oui"] .reperes { display: block; }

[data-curseur="croix"] body, [data-curseur="croix"] a, [data-curseur="croix"] button { cursor: crosshair; }
#pastille {
  display: none; position: fixed; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 990; transition: scale .2s;
}
@media (hover: hover) {
  [data-curseur="pastille"] #pastille { display: block; }
  [data-curseur="pastille"] #cadre, [data-curseur="pastille"] #cadre :is(a, button, .zoom, .libre) { cursor: none; }
}
#pastille.gros { scale: 3.2; }

/* transitions de page et apparition */
#scene.entre { animation: var(--anim, none) var(--duree) both; }
[data-transition="fondu"] { --anim: fondu; }
[data-transition="volet"] { --anim: volet; }
[data-transition="pixels"] { --anim: pixels; }
[data-transition="pixels"] #scene.entre { animation-timing-function: steps(6); }
@keyframes fondu { from { opacity: 0; } }
@keyframes volet { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pixels { from { opacity: 0; filter: blur(14px) contrast(4); } to { opacity: 1; filter: none; } }

.pret[data-apparition="oui"] [data-app] { opacity: 0; translate: 0 16px; transition: opacity .6s ease, translate .6s ease; }
.pret[data-apparition="oui"] [data-app].vu { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------------ petits écrans */
@container cadre (max-width: 760px) {
  .planche { width: min(100%, calc(var(--pl-largeur) + 26%)); }
  .planches.plusieurs .feuille { width: min(100%, calc(var(--pl-largeur) + 26%)); }
  .pied { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .contact { text-align: left; }
}
@container cadre (max-width: 430px) {
  .suite .titre-p { font-size: min(var(--t-index), 1.15rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pret[data-apparition="oui"] [data-app] { opacity: 1; translate: 0 0; }
}

/* ------------------------------------------------------------------ panneau de réglages
   (couleurs fixes : il doit rester lisible quel que soit le thème du site) */
#atelier {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 100vw); z-index: 1000;
  display: flex; flex-direction: column;
  background: #111; color: #eee; border-left: 1px solid #333;
  font: 400 12px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
#atelier button, #atelier select, #atelier input { font: inherit; color: inherit; }
#atelier :focus-visible { outline: 2px solid #ffe800; outline-offset: 1px; }
.at-tete { display: flex; gap: .6rem; align-items: center; padding: .7rem .8rem; border-bottom: 1px solid #333; }
.at-tete strong { font-weight: 700; }
.at-tete input { flex: 1; min-width: 0; background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 3px; padding: .35rem .5rem; }
.at-x { font-size: 18px !important; line-height: 1; padding: 0 .3rem !important; }
.at-pre { display: flex; flex-wrap: wrap; gap: .3rem; padding: .6rem .8rem; border-bottom: 1px solid #333; }
.at-pre button, .at-pied button { background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 3px; padding: .3rem .5rem; }
.at-pre button:hover, .at-pied button:hover { background: #eee; color: #111; }
.at-pre .at-alea { background: #ffe800; color: #111; border-color: #ffe800; }
.at-vue { display: flex; gap: .3rem; padding: .6rem .8rem 0; }
.at-vue button { flex: 1; background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 3px; padding: .35rem .5rem; }
#atelier .at-vue button[aria-pressed="true"] { background: #eee; color: #111; border-color: #eee; }
/* vue simple : seulement les réglages marqués « essentiel », sections toujours ouvertes */
#atelier[data-vue="simple"]:not(.at-cherche) .at-ligne:not(.at-e),
#atelier[data-vue="simple"]:not(.at-cherche) .at-section:not(.a-e) { display: none; }
#atelier[data-vue="simple"]:not(.at-cherche) .at-section > summary { pointer-events: none; padding-bottom: .2rem; color: #8d8d8d; font-weight: 400; }
#atelier[data-vue="simple"]:not(.at-cherche) .at-section > summary::marker { content: ''; }
.at-corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.at-section { border-bottom: 1px solid #2a2a2a; }
.at-section summary { padding: .55rem .8rem; cursor: pointer; font-weight: 700; user-select: none; }
.at-section summary:hover { background: #1a1a1a; }
.at-section[open] { padding-bottom: .5rem; }
.at-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 112px 54px; gap: .5rem; align-items: center; padding: .28rem .8rem; }
.at-nom { color: #bdbdbd; cursor: default; }
.at-val { text-align: right; color: #8d8d8d; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.at-ligne input[type="range"] { width: 100%; accent-color: #ffe800; margin: 0; }
.at-ligne input[type="color"] { width: 100%; height: 22px; padding: 0; border: 1px solid #3a3a3a; background: none; border-radius: 3px; }
.at-ligne select, .at-ligne input[type="text"] { width: 100%; background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 3px; padding: .25rem .3rem; }
.at-ligne input[type="checkbox"] { justify-self: start; accent-color: #ffe800; width: 15px; height: 15px; margin: 0; }
.at-choix, .at-texte { grid-template-columns: minmax(0, 1fr) 170px; }
.at-choix .at-val, .at-texte .at-val, .at-bascule .at-val { display: none; }
.at-encres { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; padding-bottom: .3rem; }
.at-encres button { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #555; }
.at-encres button:hover { scale: 1.3; }
.at-pied { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .6rem .8rem; border-top: 1px solid #333; }
.at-note { color: #ffe800; }

@media (max-width: 800px) {
  :root[data-atelier="ouvert"] { --at-l: 0px; }
  #atelier { top: auto; left: 0; width: auto; height: 56svh; border-left: 0; border-top: 1px solid #333; }
}

/* ------------------------------------------------------------------ logo AX */
body { overflow-x: clip; }
.logo { display: inline-block; width: auto; fill: currentColor; overflow: visible; }
.logo path { transform-box: fill-box; transform-origin: center; transition: translate .35s cubic-bezier(.3, 1.6, .5, 1), rotate .35s cubic-bezier(.3, 1.6, .5, 1); }
[data-respire="oui"] .logo path { animation: respire 3.2s ease-in-out infinite; }
[data-respire="oui"] .logo .m2 { animation-delay: -.8s; }
[data-respire="oui"] .logo .m3 { animation-delay: -1.6s; }
[data-respire="oui"] .logo .m4 { animation-delay: -2.4s; }
@keyframes respire { 50% { translate: 0 -22px; } }
.pied-g { display: flex; align-items: center; gap: .8em; }
.pied-g .logo { height: 2.25em; translate: 0 .094em; } /* le AX couvre exactement les deux lignes (du haut des capitales à la ligne de base) */

/* décalage riso : une deuxième encre mal calée sous les titres */
:is(.mot, .titre, .titre-p) { filter: drop-shadow(var(--decalage) calc(var(--decalage) * .6) 0 color-mix(in srgb, var(--accent) 85%, transparent)); }

/* ------------------------------------------------------------------ bandeau défilant */
.couverture { position: relative; }
.defilant {
  position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden;
  border-block: 1px solid var(--encre); padding: .55rem 0; white-space: nowrap;
}
[data-defilant="non"] .defilant { display: none; }
.defil-piste { display: flex; width: max-content; animation: defile var(--defil-duree) linear infinite; }
.defilant:hover .defil-piste { animation-play-state: paused; }
.defil-piste > div { display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; }
.defilant .titre-p { display: inline; font-size: min(var(--t-index), 1.6rem); line-height: 1; }
.defilant a:hover { color: var(--accent); }
.defilant .logo { height: 1.1rem; }
.defilant em { font-size: var(--t-petit); }
@keyframes defile { to { translate: -50% 0; } }

/* ------------------------------------------------------------------ intro */
#intro {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: var(--papier); color: var(--encre); cursor: pointer;
}
#intro .logo { width: min(52vw, 440px); height: auto; }
#intro path { animation: arrive .8s cubic-bezier(.2, 1.4, .4, 1) both; }
#intro .m1 { --dx: -260px; --dy: 180px; --r: -70deg; animation-delay: .05s; }
#intro .m2 { --dx: 260px; --dy: 200px; --r: 60deg; animation-delay: .17s; }
#intro .m3 { --dx: 0px; --dy: -320px; --r: 40deg; animation-delay: .29s; }
#intro .m4 { --dx: 320px; --dy: -220px; --r: 120deg; animation-delay: .41s; } /* le logo reste à l'encre : jamais d'accent dessus */
@keyframes arrive { from { translate: var(--dx) var(--dy); rotate: var(--r); opacity: 0; } }
@keyframes encre { to { fill: var(--encre); } }
#intro.part { animation: rideau .75s cubic-bezier(.7, 0, .3, 1) forwards; }
#intro.part .logo { transition: scale .75s cubic-bezier(.7, 0, .3, 1); scale: .2; }
@keyframes rideau { to { clip-path: inset(0 0 100% 0); } }


/* ------------------------------------------------------------------ aide (touche ?) */
.aide {
  position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; gap: 1.4rem; align-content: center;
  background: color-mix(in srgb, var(--papier) 88%, transparent); backdrop-filter: blur(6px); cursor: pointer;
}
.aide .logo { height: 3rem; }
.aide dl { display: grid; grid-template-columns: auto auto; gap: .5rem 1.4rem; margin: 0; }
.aide dt { font-family: var(--f-titre); font-size: 1.2rem; text-align: right; }
.aide dd { margin: 0; font-style: italic; align-self: center; }

/* ------------------------------------------------------------------ signature (Signature.png) */
.signature-img {
  display: inline-block; vertical-align: middle; aspect-ratio: 1440 / 112; height: var(--sig-h);
  background: currentColor;
  -webkit-mask: url("../images/signature.png") center / contain no-repeat;
          mask: url("../images/signature.png") center / contain no-repeat;
}
.bandeau .signature { display: inline-flex; align-items: center; }
.signature-c .signature-img { height: var(--sig-couv); min-height: 15px; }
.signature-c { margin-top: 3cqw; }

/* ------------------------------------------------------------------ Fuuld vectorisée */
.lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fm { white-space: nowrap; display: inline; }
/* Fuuld vectorisée : la graisse (400 = dessin d'origine) ajoute un contour de même couleur */
.g { display: inline-block; overflow: visible; margin-right: var(--il-titre);
  fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round;
  stroke-width: calc((var(--g-titre) - 400) * .025px); }
.g-txt { font-family: "Bitcount Prop Single", "ZT Nature", sans-serif; }

/* tête : la silhouette du fichier TETE.svg, sans cadre */
.tete { overflow: visible; vertical-align: -.1em;
  /* l'image a des marges transparentes (10,6 % à gauche, 16,25 % à droite) : on les retire, puis on garde --tete-ecart */
  margin-inline: calc(var(--tete-ecart) - .106 * var(--tete-taille)) calc(var(--tete-ecart) - .1625 * var(--tete-taille)); }
.tete img { object-fit: contain; }


/* ------------------------------------------------------------------ motion : le langage du reel AX */

/* dégradé fluide derrière une section */
.aurore-on { position: relative; isolation: isolate; color: var(--aurore-texte); }
.aurore-on > canvas.aurore { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.aurore-on a { color: inherit; }
.aurore-on .defilant { border-color: color-mix(in srgb, var(--aurore-texte) 40%, transparent); }

/* intro « reel » : morceaux en verre irisé sur noir, puis cut sur le dégradé */
#intro.reel { background: #000; perspective: 900px; overflow: hidden; }
#intro.reel > canvas.aurore { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#intro.reel .verres { position: relative; width: min(64vw, 520px); aspect-ratio: 482 / 258; transform-style: preserve-3d;
  animation: travelling 1.5s cubic-bezier(.2, .7, .2, 1) both; }
#intro.reel .piece { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-style: preserve-3d;
  animation: verre 1.25s cubic-bezier(.16, 1, .3, 1) both; }
#intro.reel .p1 { --x: -70vw; --y: 30vh; --z: 520px; --rx: 50deg; --ry: -70deg; --rz: -30deg; animation-delay: 0s; }
#intro.reel .p2 { --x: 60vw; --y: 40vh; --z: 640px; --rx: -40deg; --ry: 80deg; --rz: 25deg; animation-delay: .08s; }
#intro.reel .p3 { --x: -10vw; --y: -60vh; --z: 760px; --rx: 70deg; --ry: 20deg; --rz: 50deg; animation-delay: .16s; }
#intro.reel .p4 { --x: 70vw; --y: -40vh; --z: 420px; --rx: -60deg; --ry: -50deg; --rz: 90deg; animation-delay: .24s; }
#intro.reel .piece path { mix-blend-mode: screen; }
#intro.reel .cr { fill: rgb(255 40 80 / .3); animation: frange-r 1.4s cubic-bezier(.16, 1, .3, 1) both; }
#intro.reel .cg { fill: rgb(40 255 140 / .2); animation: frange-g 1.4s cubic-bezier(.16, 1, .3, 1) both; }
#intro.reel .cb { fill: rgb(60 110 255 / .34); animation: frange-b 1.4s cubic-bezier(.16, 1, .3, 1) both; }
#intro.reel .cw { stroke: rgb(255 255 255 / .85); stroke-width: 1.6; mix-blend-mode: normal; }
#intro.reel .plat { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
#intro.reel .plat .logo { width: min(64vw, 520px); height: auto; }
#intro.reel .plat path { fill: var(--aurore-texte); animation: none; }
#intro.reel.cut > canvas.aurore, #intro.reel.cut .plat { opacity: 1; }
/* sans dégradé : cut sur le papier, logo à l'encre */
#intro.reel.uni.cut { background: var(--papier); }
#intro.reel.uni .plat path { fill: var(--encre); }
#intro.reel.cut .verres { display: none; }
/* ouverture « assemblage → en-tête » */
#intro.assemblage { background: none; }
#intro.assemblage .fond { position: absolute; inset: 0; background: var(--papier); }
#intro.assemblage .logo { position: relative; transform-origin: 50% 50%; will-change: transform; }
#intro.assemblage.vole { cursor: default; pointer-events: none; }
/* le temps du vol, l'AX de la signature est masqué : le logo qui arrive prend sa place */
.intro-vol .bandeau .signature-img {
  -webkit-mask: linear-gradient(to right, transparent 11.4%, #000 11.4%), url("../images/signature.png") center / contain no-repeat;
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, transparent 11.4%, #000 11.4%), url("../images/signature.png") center / contain no-repeat;
  mask-composite: intersect;
}
#intro.reel.part { animation: rideau .8s cubic-bezier(.7, 0, .3, 1) forwards; }
#intro.reel.part .plat .logo { transition: scale .8s cubic-bezier(.7, 0, .3, 1); scale: .25; }
@keyframes travelling { from { scale: 1.35; } }
@keyframes verre {
  from { transform: translate3d(var(--x), var(--y), var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); opacity: 0; filter: blur(8px); }
  35% { opacity: 1; }
  to { transform: none; filter: none; }
}
@keyframes frange-r { from { translate: -26px 6px; } to { translate: -2px 0; } }
@keyframes frange-g { from { translate: 8px -14px; } to { translate: 0 -1px; } }
@keyframes frange-b { from { translate: 24px 10px; } to { translate: 2px 1px; } }

/* ------------------------------------------------------------------ sommaire : frise graphique
   Quatre compositions tournent d'un projet à l'autre (double page, pleine page, côte à côte,
   grand titre + vignette), en miroir au tour suivant. Images en noir et blanc. */
.sommaire { background: var(--papier); }
.sommaire > .titre { margin-left: calc(50% - 50cqw + var(--marge)); padding-left: 0; } /* calé sur le bord de la frise */
.frise {
  --t-frise-c: calc(1.35 * clamp(2.4rem, var(--t-frise, 7.2cqw), 9rem)); /* titres plus gros */
  /* la frise sort de la colonne de texte et prend toute la largeur, marges comprises */
  width: calc(100cqw - 2 * var(--marge)); margin-left: calc(50% - 50cqw + var(--marge));
  padding-top: clamp(2rem, 6cqw, 5rem);
}
.jalon {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(.8rem, 2cqw, 1.8rem);
  align-items: start;
  /* chaque projet a son aplat, sur toute la largeur : rouge, blanc, noir */
  margin: 0 calc(-1 * var(--marge)); padding: clamp(4.5rem, 13svh, 9rem) var(--marge);
  background: var(--papier); color: var(--encre);
}
.frise .jalon .j-titre { color: var(--encre); mix-blend-mode: normal; }
/* fin de frise : ma tête en petit, qui demande si on remonte */
.fin-frise { /* fin de frise : ma tête en petit, « on remonte ? » dessous, le tout centré */
  display: flex; flex-direction: column; align-items: center; gap: .15rem; margin: clamp(3rem, 10svh, 7rem) auto clamp(4rem, 12svh, 8rem);
  padding: 0; border: 0; background: none; color: var(--encre); font: inherit; cursor: pointer;
}
.fin-frise img { width: clamp(2.8rem, 4.5cqw, 3.8rem); filter: grayscale(1) contrast(1.3); transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1); }
.bulle-fin { font-style: italic; font-size: var(--t-petit); white-space: nowrap; transition: color .2s; }
.fin-frise:hover img { rotate: -8deg; }
.fin-frise:hover .bulle-fin { color: var(--accent); }
.j-img { position: relative; z-index: 1; grid-row: 2; min-width: 0; }
.frise .img { margin: 0; }
.frise .img img { filter: grayscale(1) contrast(1.08); width: auto; max-width: 100%; }
.frise .img canvas { display: none; }
.j-a .img img { max-height: 78svh; }
.j-b .img img { max-height: 52svh; }
.j-img .img { transition: scale .6s cubic-bezier(.2, .8, .2, 1); }
.jalon:hover .j-a .img { scale: 1.015; }
.j-titre {
  position: relative; z-index: 2; grid-row: 1; grid-column: 1 / -1; margin: 0 0 -.14em;
  /* les titres longs rapetissent (--n = nombre de signes) pour tenir sur deux lignes */
  font-size: calc(var(--t-frise-c) * clamp(.5, 16 / var(--n, 16), 1)); line-height: .92;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
/* c0 — double page : grande image d'un côté, planche de l'autre, un peu plus bas */
.c0 .j-a { grid-column: 1 / 8; justify-self: start; }
.c0 .j-b { grid-column: 9 / 13; justify-self: end; margin-top: clamp(3rem, 14svh, 9rem); }
.c0.m .j-titre { text-align: right; }
.c0.m .j-a { grid-column: 6 / 13; justify-self: end; }
.c0.m .j-b { grid-column: 1 / 5; justify-self: start; }
/* c1 — pleine page : une seule image, grande et centrée, le titre dessous */
.c1 .j-a { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
.c1 .j-a .img img { max-height: 86svh; }
.c1 .j-titre { grid-row: 2; margin: .35em 0 0; }
.c1.m .j-titre { text-align: right; }
/* c2 — côte à côte : les deux images à la même hauteur, collées au centre */
.c2 .j-a { grid-column: 1 / 7; justify-self: end; align-self: end; }
.c2 .j-b { grid-column: 7 / 13; justify-self: start; align-self: end; }
.c2 .j-img .img img { height: clamp(14rem, 56svh, 42rem); max-height: none; width: auto; }
.c2 .j-titre { text-align: center; }
/* c3 — grand titre + vignette : le titre prend la place, une petite image à côté, sans chevauchement */
.c3 .j-titre { grid-row: 1; grid-column: 1 / 9; align-self: end; margin: 0; font-size: calc(var(--t-frise-c) * 1.35 * clamp(.45, 12 / var(--n, 12), 1)); }
.c3 .j-a { grid-row: 1; grid-column: 10 / 13; justify-self: end; align-self: start; }
.c3 .j-a .img img { max-height: 46svh; }
.c3.m .j-titre { grid-column: 5 / 13; text-align: right; }
.c3.m .j-a { grid-column: 1 / 4; justify-self: start; }

/* au défilement : les lettres montent une à une (les images défilent toutes à la même vitesse) */
@supports (animation-timeline: view()) {
  .j-titre .g { animation: monte cubic-bezier(.2, .8, .2, 1) both; animation-timeline: view(); animation-range: entry calc(var(--k, 0) * 1.5%) entry calc(55% + var(--k, 0) * 1.5%); }
}
@keyframes monte { from { translate: 0 .5em; opacity: 0; } }
@media (hover: hover) {
  [data-saute="oui"] .jalon:hover .j-titre .g { animation: saute .5s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(var(--k, 0) * 16ms); }
}
@keyframes saute { 35% { translate: 0 -.16em; } }

@container cadre (max-width: 700px) {
  .frise { --t-frise-c: clamp(2.6rem, 13.5cqw, 4.4rem); }
  .jalon { padding-block: 3.5rem; row-gap: .8rem; }
  .jalon .j-titre, .jalon.m .j-titre { grid-row: 1; grid-column: 1 / -1; text-align: left; margin: 0; }
  .jalon .j-a, .jalon.m .j-a { grid-row: 2; grid-column: 1 / -1; justify-self: start; align-self: start; }
  .jalon .j-b, .jalon.m .j-b { grid-row: 3; grid-column: 6 / 13; justify-self: end; margin-top: 0; }
  .j-a .img img, .c1 .j-a .img img { max-height: 70svh; }
  .c1 .j-titre { grid-row: 2; } .c1 .j-a { grid-row: 1; justify-self: center; } /* pleine page : titre toujours dessous */
  .c2 .j-img .img img { height: auto; max-height: 46svh; }
  .c2 .j-a { grid-column: 1 / 8; } .c2 .j-b { grid-row: 2; grid-column: 8 / 13; align-self: end; }
  .c3 .j-titre { font-size: calc(var(--t-frise-c) * 1.2 * clamp(.5, 12 / var(--n, 12), 1)); }
  .c3 .j-a, .c3.m .j-a { grid-column: 5 / 13; justify-self: end; }
}

/* ------------------------------------------------------------------ CV */
.cv { padding: 0 var(--marge) 6rem; }
.cv-tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(.6rem, 1.6cqw, 1.4rem); margin-bottom: clamp(3rem, 9cqw, 7rem); }
.cv-tete h1 { grid-column: 1 / -1; margin: 0 0 clamp(1.2rem, 3cqw, 2.4rem); font-size: clamp(2.6rem, 9cqw, 8rem); line-height: .9; }
.cv-intro { grid-column: 1 / 8; margin: 0; font-size: clamp(1.15rem, 2.2cqw, 1.7rem); line-height: 1.25; }
.cv-contact { grid-column: 9 / 13; margin: 0; font-size: var(--t-petit); font-style: italic; align-self: end; }
.cv-contact a:hover { color: var(--accent); }
.cv-rub { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(.6rem, 1.6cqw, 1.4rem); border-top: 1px solid; padding-top: 1rem; margin-bottom: clamp(2.5rem, 6cqw, 4.5rem); }
.cv-titre { grid-column: 1 / 5; margin: 0 0 1rem; font-size: clamp(1.8rem, 3.6cqw, 3rem); line-height: .95; }
.cv-rub ol { grid-column: 5 / 13; list-style: none; margin: 0; padding: 0; }
.cv-rub li { display: grid; grid-template-columns: minmax(7.5rem, 1fr) 3fr; gap: 1rem; padding: .55rem 0 .7rem; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.cv-rub li:last-child { border-bottom: 0; }
.cv-quand { font-style: italic; font-size: var(--t-petit); padding-top: .2em; }
.cv-quoi { font-size: clamp(1rem, 1.6cqw, 1.25rem); line-height: 1.25; }
.cv-quoi small { display: block; font-size: var(--t-petit); margin-top: .2rem; opacity: .75; }
@container cadre (max-width: 700px) {
  .cv-intro, .cv-contact, .cv-titre, .cv-rub ol { grid-column: 1 / -1; }
  .cv-contact { margin-top: 1.2rem; }
  .cv-rub li { grid-template-columns: 1fr; gap: .15rem; }
}

/* ------------------------------------------------------------------ présentation : un aplat d'accent */
.presentation { background: var(--rouge); color: #fff; padding: clamp(3rem, 9cqw, 8rem) var(--marge) clamp(2rem, 4cqw, 3rem); overflow: hidden; }
.pres-in { max-width: var(--largeur); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(.6rem, 1.6cqw, 1.4rem); row-gap: clamp(2rem, 6cqw, 5rem); align-items: end; }
.pres-texte { grid-column: 1 / 9; margin: 0; font-size: clamp(1.6rem, 3.9cqw, 3.6rem); line-height: 1.08; letter-spacing: -.012em; font-weight: 500; text-wrap: balance; }
.pres-tete { grid-column: 9 / 13; margin: 0; aspect-ratio: 1; rotate: -4deg; transition: rotate .6s cubic-bezier(.3, 1.6, .5, 1); }
.pres-tete img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.3); }
.presentation:hover .pres-tete { rotate: 3deg; }
.pres-pied { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; font-size: var(--t-petit); font-style: italic; border-top: 1px solid; padding-top: .7rem; }
.pres-pied a:hover { text-decoration: underline; text-underline-offset: .2em; }
.pres-heure { margin-left: auto; font-variant-numeric: tabular-nums; }
@container cadre (max-width: 700px) {
  .pres-texte { grid-column: 1 / -1; }
  .pres-tete { grid-column: 7 / 13; grid-row: 1; margin-bottom: -1rem; }
  .pres-heure { margin-left: 0; }
}

/* ------------------------------------------------------------------ curseur d'accent */
#pastille span { opacity: 0; transition: opacity .15s; }
@media (hover: hover) {
  [data-curseur="accent"] #pastille {
    display: grid; place-items: center; width: 14px; height: 14px; left: -7px; top: -7px;
    background: var(--accent); mix-blend-mode: normal; color: var(--encre); font-style: italic; font-size: 14px;
    transition: width .3s cubic-bezier(.3, 1.4, .5, 1), height .3s cubic-bezier(.3, 1.4, .5, 1), left .3s cubic-bezier(.3, 1.4, .5, 1), top .3s cubic-bezier(.3, 1.4, .5, 1);
  }
  [data-curseur="accent"] #pastille.gros { scale: 1; width: 30px; height: 30px; left: -15px; top: -15px; }
  [data-curseur="accent"] #pastille.voir { width: 42px; height: 42px; left: -21px; top: -21px; font-size: 11px; color: #fff; }
  [data-curseur="accent"] #pastille.blanc { background: #fff; color: var(--accent); }
  [data-curseur="accent"] #pastille.voir span { opacity: 1; }
  [data-curseur="accent"] #cadre, [data-curseur="accent"] #cadre :is(a, button, .zoom, .libre) { cursor: none; }
}

/* ------------------------------------------------------------------ petits plus */
::selection { background: var(--accent); color: var(--encre); }
#progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: var(--accent); transform-origin: 0 50%; scale: 0 1; display: none; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  [data-progression="oui"] #progression { display: block; animation: lecture linear both; animation-timeline: scroll(root); }
}
@keyframes lecture { to { scale: 1 1; } }
/* les images de la frise se dévoilent de bas en haut en entrant */
@supports (animation-timeline: view()) {
  [data-devoile="oui"] .frise .img { animation: devoile cubic-bezier(.2, .8, .2, 1) both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
@keyframes devoile { from { clip-path: inset(100% 0 0 0); } }
/* au survol, le titre quitte la « différence » et passe à l'accent */
.j-titre { transition: color .25s; }
[data-titre-accent="oui"] .jalon:hover .j-titre { mix-blend-mode: normal; color: var(--accent); }
.sur-accent .bandeau { mix-blend-mode: normal; color: #fff; }

/* ------------------------------------------------------------------ titres élastiques
   --etire (1 → 1,4) suit la vitesse du défilement (site.js) ; l'étirement part du bord opposé au sens. */
[data-elastique="oui"] :is(.j-titre, .sommaire > .titre, .cv-titre) .fm { display: inline-block; scale: 1 var(--etire, 1); transform-origin: 50% var(--etire-o, 0%); }


/* ------------------------------------------------------------------ pages noires, blanches, rouges
   Une section (ou toute une page projet via body[data-fond]) redéfinit papier et encre ;
   sur le rouge, l'accent devient noir pour rester visible. */
:root { --rouge: var(--accent); }
.page-noir, body[data-fond="noir"] { --papier: #0b0b0b; --encre: #fff; }
.page-rouge, body[data-fond="rouge"] { --papier: var(--rouge); --encre: #fff; --accent: #000; }
.page-noir, .page-rouge, body[data-fond] { background: var(--papier); color: var(--encre); }
html:has(body[data-fond="noir"]) { background: #0b0b0b; }
html:has(body[data-fond="rouge"]) { background: var(--rouge); }
/* le sommaire est dans la colonne : son fond déborde jusqu'aux bords de l'écran */
.sommaire.page-noir { box-shadow: 0 0 0 100vmax var(--papier); clip-path: inset(0 -100vmax); }
.fin.page-rouge .mot { color: #fff; }
html::-webkit-scrollbar { display: none; } /* pas de barre de défilement */