/* Portfolio V4 : accueil avec l'intro (story-board validé le 29/10), deux parcours ouverts par un chapitre manga (Run SAP,
   « Une nuit de run » ; Produits web, « Onze projets »), études de cas dans les mêmes planches.
   Blanc papier, encre noire, un seul bleu tiré de ses yeux. */
/* polices hébergées sur le site (licence OFL, fichiers de Google Fonts du 29/10) : Archivo variable, jeu latin ;
   Dela Gothic One réduite aux douze signes de サイバーサムライ et des bruitages du chapitre (シーン, ピピピッ, チュンチュン) */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Dela Gothic One'; font-style: normal; font-weight: 400; font-display: block;
  src: url(fonts/dela-gothic-sfx.woff2) format('woff2');
  unicode-range: U+3099-309A, U+30A4, U+30B5-30B8, U+30C1-30C3, U+30CF-30D4, U+30E0, U+30E5, U+30E9, U+30F3, U+30FC;
}
:root {
  --papier: #ffffff;
  --encre: #000000;
  --gris: #4a4a4a;
  --filet: #d9d9d9;
  --accent: #1e4f8f;   /* 8,2:1 sur blanc */
  --barre: #e9e9e9;
  --texte: 'Archivo', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papier); color: var(--encre); }
body { font-family: var(--texte); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--encre); color: var(--papier); padding: 10px 14px; z-index: 20; text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- accueil : l'intro remplit l'écran ---------- */
.accueil { overflow: hidden; }
.intro { position: fixed; inset: 0; height: 100dvh; overflow: hidden; background: var(--papier); }
.coin { position: fixed; top: 0; right: 0; z-index: 5; display: flex; gap: 22px; padding: 18px 22px; font-size: 15px; font-weight: 650; }
.coin a { text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.coin a:hover { color: var(--accent); }
/* sans script, LinkedIn à la place de « M'écrire », lien du coin comme l'autre ; avec script, noscript ne contient que du texte brut
   et reste caché */
.coin noscript:has(> a) { display: contents; }
.js .coin { opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.js.intro-finie .coin { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }

/* la scène, en unités du plateau (boîte de 1600 x 900 sur ordinateur, 900 x 1950 sur téléphone, étendue à l'écran) */
.scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: var(--papier); }
.js .scene:not([data-mode]) { visibility: hidden; }   /* rien n'est peint avant que intro.js l'ait placée */
.scene.flash { filter: invert(1); }
.scene > * { position: absolute; margin: 0; }
.scene .nom { color: var(--accent); font-weight: 850; font-variation-settings: 'wdth' 118; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.012em; }
.scene .parcours { display: grid; }
.scene .parcours a { display: block; color: var(--encre); text-decoration: none; border-top: 4px solid var(--encre); padding-top: 0.5em; }
.scene .parcours a:hover b { color: var(--accent); }
.scene .parcours a:focus-visible { outline-width: 4px; outline-offset: 8px; }
.scene .parcours b { display: block; font-weight: 760; font-variation-settings: 'wdth' 108; line-height: 1.1; }
.scene .parcours span { display: block; color: #2b2b2b; line-height: 1.35; margin-top: 0.3em; }
.scene .fenetre { left: 0; top: 0; background: #000; }
.scene .barre { position: absolute; left: 0; right: 0; top: 0; background: var(--barre); border-bottom: 3px solid #000; display: flex; align-items: center; justify-content: flex-end; gap: 0.9em; padding-right: 0.7em; }
.scene .barre i { display: block; width: 0.75em; height: 0.75em; border: 3px solid #3a3a3a; }
.scene .barre i:first-child { height: 0; border-width: 3px 0 0; }
.scene .fermer { all: unset; width: 0.95em; height: 0.95em; position: relative; cursor: pointer; }
.scene .fermer::before, .scene .fermer::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 3px; background: #3a3a3a; transform: translate(-50%, -50%) rotate(45deg); }
.scene .fermer::after { transform: translate(-50%, -50%) rotate(-45deg); }
.scene .chargement { position: absolute; left: 35%; right: 35%; top: 54%; height: 4px; background: #2a2a2a; }
.scene .chargement i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
/* liseré blanc : le t-shirt noir reste lisible devant la fenêtre noire */
.scene picture { display: contents; }
.scene .florent, .scene .chat { position: absolute; pointer-events: none; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); }
.scene .florent { visibility: hidden; height: auto; }
.scene .florent.vu { visibility: visible; }
.scene .lignes { overflow: visible; pointer-events: none; opacity: 0; fill: #000; }
/* titre japonais à la verticale, comme sur une affiche d'anime ; il reste dans la composition finale */
.scene .sfx { left: 0; top: 0; font-family: 'Dela Gothic One', sans-serif; color: #000; white-space: nowrap; line-height: 1; opacity: 0; pointer-events: none; writing-mode: vertical-rl;
  text-shadow: 0.05em 0 0 #fff, -0.05em 0 0 #fff, 0 0.05em 0 #fff, 0 -0.05em 0 #fff, 0.035em 0.035em 0 #fff, -0.035em 0.035em 0 #fff, 0.035em -0.035em 0 #fff, -0.035em -0.035em 0 #fff; }
.scene .sfx span { display: inline-block; transform-origin: 50% 50%; visibility: hidden; }
.scene[data-mode='tel'] .sfx span { transform-origin: 100% 50%; }   /* au bord droit du téléphone, le signe grossit vers l'intérieur */

/* sans JavaScript, ou texte trop grand pour l'écran (zoom du navigateur, .accueil-repli) : la composition finale en simple
   page, qui défile */
.repli { display: none; }
html:not(.js) .scene, .accueil-repli .scene { display: none; }
html:not(.js) .repli, .accueil-repli .repli { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; max-width: 1100px; margin: 0 auto; padding: 40px 22px; min-height: 100dvh; }
html:not(.js) .accueil, .accueil-repli .accueil { overflow: auto; }
html:not(.js) .intro, .accueil-repli .intro { position: static; height: auto; overflow: visible; }
html:not(.js) .coin, .accueil-repli .coin { position: absolute; }
.js.accueil-repli .coin { opacity: 1; visibility: visible; }
.repli img { width: 100%; height: auto; }
.repli__nom { color: var(--accent); font-weight: 850; font-variation-settings: 'wdth' 118; text-transform: uppercase; line-height: 0.86; font-size: clamp(48px, 8vw, 110px); margin: 0 0 32px; }
.repli ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.repli a { display: block; text-decoration: none; border-top: 4px solid var(--encre); padding-top: 8px; }
.repli b { display: block; font-size: 28px; font-weight: 760; }

/* ---------- pages des parcours (provisoires) ---------- */
.haut { border-bottom: 1px solid var(--filet); }
.haut__in, .page { max-width: 1120px; margin: 0 auto; padding-left: 22px; padding-right: 22px; }
.haut__in { display: flex; align-items: center; column-gap: 24px; row-gap: 8px; min-height: 64px; flex-wrap: wrap; padding-block: 10px; }   /* sur deux lignes, le contour du nom reste dans l'écran */
.haut__nom { font-weight: 800; font-variation-settings: 'wdth' 112; text-decoration: none; text-transform: uppercase; color: var(--accent); letter-spacing: -0.01em; }
.haut nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; margin-left: auto; font-size: 15px; font-weight: 600; }
.haut nav a { text-decoration: none; white-space: nowrap; }   /* très petit écran : un lien passe à la ligne, jamais un mot */
.haut nav a:hover { box-shadow: inset 0 -2px 0 currentColor; }

.page { padding-top: 56px; padding-bottom: 80px; }
.page__titre { font-size: clamp(40px, 12vw, 132px); font-weight: 850; font-variation-settings: 'wdth' 118; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.015em; color: var(--accent); margin: 0; overflow-wrap: anywhere; }
.page__poste { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; font-variation-settings: 'wdth' 106; margin: 22px 0 4px; }
.page__cles { color: var(--gris); margin: 0; }
.page__statut { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-weight: 600; }
.page__statut li { border-left: 4px solid var(--encre); padding-left: 10px; }

/* ---------- chapitre manga : une planche, des cases encrées ---------- */
/* codes de la page manga : une case dominante, gouttières horizontales plus larges que les verticales, cartouches de narration */
.chapitre { margin-top: 64px; }
.chapitre__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; border-top: 4px solid var(--encre); padding-top: 14px; }
.chapitre__tete h2 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 850; font-variation-settings: 'wdth' 116; line-height: 1; letter-spacing: -0.01em; margin: 0; }
.chapitre__tete p { color: var(--gris); max-width: 56ch; margin: 0; }
.planche { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 12px; row-gap: 24px; list-style: none; margin: 28px 0 0; padding: 0; }
.case { position: relative; margin: 0; border: 3px solid var(--encre); background: var(--papier); overflow: hidden; container-type: inline-size; }
.case--22 { grid-column: 1 / 5; background: var(--encre); }
.case--0312 { grid-column: 5 / 13; aspect-ratio: 3 / 2; }
.case--qualif { grid-column: 1 / 5; aspect-ratio: 1; }
.case--journal { grid-column: 5 / 9; }
.case--0600 { grid-column: 9 / 13; aspect-ratio: 1; }
.case__fond { position: absolute; inset: 0; }
.case__fond img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case picture { display: contents; }

.cartouche { position: absolute; z-index: 2; margin: 0; max-width: 64%; background: var(--papier); border: 2px solid var(--encre); padding: 7px 10px 8px; font-size: 14px; line-height: 1.35; font-weight: 550; }
.cartouche time { display: block; font-size: 22px; font-weight: 850; font-variation-settings: 'wdth' 112; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.cartouche--hg { left: 10px; top: 10px; }
.cartouche--hd { right: 10px; top: 10px; }
.cartouche--bd { right: 10px; bottom: 10px; }
/* chaque cartouche sur la partie la moins parlante du dessin, jamais sur un chat */
.case--0312 .cartouche { max-width: 36%; }   /* à gauche de la main qui tient le téléphone */
.case--qualif .cartouche { max-width: 40%; } /* sur le dos de l'ordinateur */
.case--0600 .cartouche { max-width: 40%; }   /* dans le ciel, puis sous la fenêtre */
.case--0600 .cartouche--fin { max-width: 48%; }

/* bruitages, police de l'intro ; tailles en largeur de case */
.case .sfx { position: absolute; margin: 0; font-family: 'Dela Gothic One', sans-serif; line-height: 1; white-space: nowrap; pointer-events: none; }
.case .sfx span { display: inline-block; }
/* avant chaque taille en cqw, un repli approché pour les moteurs sans unités de conteneur (Safari 15) */
.sfx--22 { right: 9%; top: 27%; writing-mode: vertical-rl; font-size: min(13vw, 52px); font-size: 15cqw; color: var(--papier); }
.sfx--0312 { left: 5%; top: 33%; font-size: min(6.5vw, 52px); font-size: 7.4cqw; color: var(--papier); rotate: -9deg;
  text-shadow: 0.05em 0 0 #000, -0.05em 0 0 #000, 0 0.05em 0 #000, 0 -0.05em 0 #000, 0.035em 0.035em 0 #000, -0.035em 0.035em 0 #000, 0.035em -0.035em 0 #000, -0.035em -0.035em 0 #000; }
.sfx--0600 { right: 4%; top: 37.5%; font-size: min(5.2vw, 21px); font-size: 6cqw; color: #000; rotate: 6deg;
  text-shadow: 0.06em 0 0 #fff, -0.06em 0 0 #fff, 0 0.06em 0 #fff, 0 -0.06em 0 #fff, 0.04em 0.04em 0 #fff, -0.04em 0.04em 0 #fff, 0.04em -0.04em 0 #fff, -0.04em -0.04em 0 #fff; }

/* 22:00, écran de la chaîne de nuit : trois traitements qui avancent */
.pistes { position: absolute; left: 7%; right: 32%; bottom: 8%; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pistes span { display: block; color: #cfcfcf; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.pistes i { display: block; height: 6px; background: #fff; box-shadow: 0 0 0 1px #333; transform-origin: 0 50%; transform: scaleX(var(--p)); }

/* retraitement : le journal de l'incident */
.case--journal .case__fond { position: relative; height: 100%; padding: 14px 16px 16px; }
.case--journal h3 { font-size: 18px; font-weight: 800; font-variation-settings: 'wdth' 112; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--encre); }
.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: clamp(13px, 4cqw, 15px); line-height: 1.35; }
.journal li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
.journal time { font-weight: 800; font-variant-numeric: tabular-nums; padding: 1px 0 0; }
.journal .erreur time { background: var(--encre); color: var(--papier); text-align: center; align-self: start; }
.journal .ok time { background: var(--accent); color: var(--papier); text-align: center; align-self: start; }

/* encrage à l'entrée (assets/chapitre.js ajoute .vu) : la case se remplit de gauche à droite, le cartouche se pose,
   puis le bruitage est tamponné signe par signe */
.js .case .case__fond { clip-path: inset(0 100% 0 0); transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.18, 1) var(--retard, 0s); }
.js .case.vu .case__fond { clip-path: inset(0); }
.js .case .cartouche, .js .case .etat { opacity: 0; translate: 0 -8px; transition: opacity 0.25s ease, translate 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); transition-delay: calc(var(--retard, 0s) + 0.55s); }
.js .case .cartouche--fin { transition-delay: calc(var(--retard, 0s) + 1.9s); }   /* la chute, après le bruitage */
.js .case.vu .cartouche, .js .case.vu .etat { opacity: 1; translate: 0 0; }
.js .case .clawd { opacity: 0; scale: 1.8; transition: opacity 0.15s linear, scale 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.25); transition-delay: calc(var(--retard, 0s) + 0.8s); }
.js .case.vu .clawd { opacity: 1; scale: 1; }
.js .case .sfx span { opacity: 0; }
.js .case.vu .sfx span { animation: tampon 0.34s cubic-bezier(0.3, 0.7, 0.4, 1) both; animation-delay: calc(var(--retard, 0s) + 0.8s + var(--i) * 0.1s); }
.js .case.vu .sfx--22 span { animation: silence 1.2s ease both; animation-delay: calc(var(--retard, 0s) + 0.9s + var(--i) * 0.25s); }
.js .case .pistes i { transform: scaleX(0); transition: transform 2.6s cubic-bezier(0.25, 0.6, 0.3, 1) calc(var(--retard, 0s) + 0.6s); }
.js .case.vu .pistes i { transform: scaleX(var(--p)); }
.js .case .journal li { opacity: 0; transition: opacity 0.15s linear calc(var(--retard, 0s) + 0.6s + var(--i) * 0.22s); }
.js .case.vu .journal li { opacity: 1; }
.js .case.net .case__fond, .js .case.net .cartouche, .js .case.net .etat, .js .case.net .clawd { transition: none; }
.js .case.net .sfx span { animation: none; opacity: 1; }
/* le focus entre dans une case encore en cours d'encrage (bouton Lire) : elle est posée d'un coup */
.js .case:focus-within .case__fond { clip-path: inset(0); transition: none; }

/* Produits web : une case par projet, la taille de la case suit le rang ; l'objet du projet sur des lignes de concentration.
   La dernière, le portfolio lui-même, ferme le chapitre en pleine largeur. */
.planche--web { grid-template-rows: clamp(300px, 30vw, 420px) clamp(260px, 25vw, 350px) clamp(240px, 23vw, 320px) clamp(220px, 21vw, 290px) clamp(280px, 28vw, 380px); }
.planche--web > :nth-child(1) { grid-column: 1 / 9; }
.planche--web > :nth-child(2) { grid-column: 9 / 13; }
.planche--web > :nth-child(3) { grid-column: 1 / 8; }
.planche--web > :nth-child(4) { grid-column: 8 / 13; }
.planche--web > :nth-child(5) { grid-column: 1 / 6; }
.planche--web > :nth-child(6) { grid-column: 6 / 9; }
.planche--web > :nth-child(7) { grid-column: 9 / 13; }
.planche--web > :nth-child(8) { grid-column: 1 / 4; }
.planche--web > :nth-child(9) { grid-column: 4 / 9; }
.planche--web > :nth-child(10) { grid-column: 9 / 13; }
.planche--web > :nth-child(11) { grid-column: 1 / 13; }
.projet { position: absolute; inset: 0; display: block; color: var(--encre); text-decoration: none; }
.projet:focus-visible { outline-width: 4px; outline-offset: -8px; }
.concentre { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--encre); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.case__fond .objet { position: absolute; left: 18%; top: 27%; width: 64%; height: 60%; object-fit: contain; transition: scale 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); }
.projet .cartouche b { display: block; font-size: 17px; font-weight: 800; font-variation-settings: 'wdth' 108; line-height: 1.15; margin-bottom: 2px; }
.projet .cartouche { font-size: 13px; color: var(--gris); }
.projet .cartouche b { color: var(--encre); }
.etat { position: absolute; right: 10px; bottom: 10px; z-index: 2; margin: 0; font-size: 12.5px; font-weight: 700; padding: 3px 8px; background: var(--papier); border: 2px solid var(--encre); }
.etat--live { background: var(--accent); border-color: var(--accent); color: var(--papier); }
.projet:hover .concentre { transform: scale(1.07); }
.projet:hover .objet { scale: 1.06; }
.projet:hover .florent { scale: 1.03; }
/* le petit personnage de Claude Code, sujet de la case des skills : il lève les bras et saute au survol */
.clawd { position: absolute; z-index: 2; right: 7%; bottom: 15%; width: clamp(44px, 13cqw, 104px); line-height: 0;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); }
.clawd svg { display: block; width: 100%; height: auto; }
.clawd--grand { left: var(--fx, 50%); top: 56%; right: auto; bottom: auto; width: max(120px, 34%); translate: -50% -50%; }
/* version publique tant qu'Anthropic n'a pas répondu : fenêtre de terminal à la place du personnage */
.clawd .bras-haut, .projet:hover .clawd .bras-bas, .projet:focus-visible .clawd .bras-bas { visibility: hidden; }
.projet:hover .clawd .bras-haut, .projet:focus-visible .clawd .bras-haut { visibility: visible; }
.projet:hover .clawd svg, .projet:focus-visible .clawd svg { animation: saut 0.45s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes saut { 0%, 100% { translate: 0 0; } 40% { translate: 0 -16%; } }
/* le portfolio : la composition finale de l'intro, en unités de hauteur de case ; chats de 28 cm assis pour 180 cm, comme dans l'intro ;
   centrée sur le foyer des lignes (--fx) */
.case--portfolio .case__fond { container-type: size; }
.case--portfolio .case__fond img { position: absolute; bottom: 3%; bottom: 3cqh; width: auto; object-fit: contain; transition: scale 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3); transform-origin: 50% 100%;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); }
.case--portfolio .florent { height: 88%; height: 88cqh; left: var(--fx, 50%); translate: -50% 0; }   /* en %, même rendu sans unités de conteneur */
.case--portfolio .chat { height: 12.6%; height: 12.6cqh; }
.case--portfolio .chat--bud { right: calc(100% - var(--fx, 50%) + 22cqh); }
.case--portfolio .chat--skunk { left: calc(var(--fx, 50%) + 22cqh); }
.sfx--portfolio { left: calc(var(--fx, 50%) + 36cqh); top: 24cqh; writing-mode: vertical-rl; font-size: 5cqh; color: #000;
  text-shadow: 0.05em 0 0 #fff, -0.05em 0 0 #fff, 0 0.05em 0 #fff, 0 -0.05em 0 #fff, 0.035em 0.035em 0 #fff, -0.035em 0.035em 0 #fff, 0.035em -0.035em 0 #fff, -0.035em -0.035em 0 #fff; }
.case--portfolio .etat { top: 10px; bottom: auto; }   /* en haut : en bas à droite, il cachait Skunk sur téléphone */
.projet:hover .cartouche b { color: var(--accent); }
.methode { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.methode li { border-top: 4px solid var(--encre); padding-top: 12px; }
.methode h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 800; font-variation-settings: 'wdth' 112; color: var(--accent); margin: 0 0 6px; }
.methode p { margin: 0; max-width: 40ch; }

/* ---------- études de cas : les mêmes planches ---------- */
.etude { padding-top: 32px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ouverture : la case de l'objet, foyer décalé à droite pour laisser la gauche au cartouche du nom, ses chiffres en colonne */
.planche--heros { margin-top: 0; height: clamp(380px, 44vw, 540px); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); }
.case--heros { grid-column: 1 / 9; grid-row: 1 / -1; }
.case--heros, .case--suivant { --fx: 64%; }
.concentre--centre { display: none; }
.case--heros .objet, .case--suivant .objet { left: calc(var(--fx) - 29%); width: 58%; top: 16%; height: 74%; }
.case--heros .clawd--grand { width: max(140px, 34%); }
.cartouche--titre { max-width: min(46%, 400px); padding: 10px 14px 12px; font-size: 15px; }
.cartouche--titre p { margin: 0; }
.cartouche--titre p:first-child { font-size: 13px; font-weight: 600; color: var(--gris); }
.cartouche--titre h1 { font-size: clamp(26px, 2.9vw, 38px); font-weight: 850; font-variation-settings: 'wdth' 106; line-height: 1; letter-spacing: -0.01em; color: var(--accent); margin: 4px 0 8px; overflow-wrap: break-word; }
.case--fait { grid-column: 9 / 13; container-type: size; }
.case--fait .case__fond { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 14px 12px; }
.case--fait b { font-size: 52px; font-size: clamp(30px, 40cqh, 76px); font-weight: 850; font-variation-settings: 'wdth' 112; line-height: 0.95; color: var(--accent); font-variant-numeric: tabular-nums; }
.case--fait span { font-size: 14px; font-weight: 600; line-height: 1.3; margin-top: 4px; overflow-wrap: anywhere; }
/* le petit personnage salue une fois, une fois sa case encrée */
.js .case--heros.vu .clawd svg { animation: saut 0.45s cubic-bezier(0.3, 0.7, 0.4, 1) calc(var(--retard, 0s) + 1.3s); }
.js .case--heros.vu .clawd .bras-haut { animation: pose 0.45s calc(var(--retard, 0s) + 1.3s); }
.js .case--heros.vu .clawd .bras-bas { animation: pose-cachee 0.45s calc(var(--retard, 0s) + 1.3s); }
@keyframes pose { from, to { visibility: visible; } }
@keyframes pose-cachee { from, to { visibility: hidden; } }

.etude__texte { margin-top: 36px; }
.etude__lead { font-size: clamp(18px, 1.8vw, 21px); max-width: 64ch; margin: 0; }
.etude__outils { color: var(--gris); max-width: 72ch; margin: 14px 0 0; }
.etude__outils b { color: var(--encre); font-weight: 700; }

/* la capture en pleine largeur, sa légende en pied de case pour ne rien cacher de l'écran ; la boucle et sa légende dans une case voisine */
.planche--images, .planche--visite, .planche--texte { margin-top: 48px; }
.case--capture { grid-column: 1 / 13; }
.case--boucle { grid-column: 1 / 9; box-sizing: content-box; }   /* le rapport de la boucle vaut pour la vidéo, bord exclu */
.case--legende { grid-column: 9 / 13; }
.case--boucle video { display: block; width: 100%; height: 100%; object-fit: cover; }
.case--capture .case__fond { position: relative; inset: auto; }
.case--capture .case__fond img { height: auto; }
.cartouche--pied { position: static; max-width: none; border: 0; border-top: 3px solid var(--encre); padding: 9px 14px 10px; }
.case--legende { background: var(--encre); color: var(--papier); }   /* case noire de narration, comme 22:00 */
.case--legende .case__fond { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 18px 20px; background: var(--encre); }
.case--legende p { margin: 0; font-size: clamp(19px, 2.1vw, 25px); font-weight: 750; font-variation-settings: 'wdth' 108; line-height: 1.25; }
.lecture { align-self: flex-start; font: 700 15px/1 var(--texte); padding: 9px 16px; background: var(--encre); color: var(--papier); border: 2px solid var(--papier); cursor: pointer; }
.lecture:hover { background: var(--papier); color: var(--encre); }
.lecture:focus-visible { outline-color: var(--papier); }

/* RollManager : une case par écran, bandeau de texte au-dessus ; les bandeaux d'un même rang s'alignent (sous-grille) */
.case--ecran { grid-row: span 2; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 0; container-type: normal; }   /* un conteneur de requêtes annulerait la sous-grille ; sans elle (Chrome 116, Safari 15), bandeau puis écran */
.case--ecran-0 { grid-column: 1 / 13; }
.case--ecran-1 { grid-column: 1 / 7; }
.case--ecran-2 { grid-column: 7 / 13; }
.case--ecran-3 { grid-column: 1 / 9; }
.case--ecran-4 { grid-column: 9 / 13; }
.case--ecran .case__fond { position: relative; inset: auto; }
.case--ecran .case__fond img { object-position: 50% 0; }
.cartouche--bande { position: static; max-width: none; border: 0; border-bottom: 3px solid var(--encre); padding: 10px 14px 12px; }
.cartouche--bande h3 { font-size: 17px; font-weight: 800; font-variation-settings: 'wdth' 110; line-height: 1.2; margin: 0 0 3px; }
.cartouche--bande p { margin: 0; font-size: 14.5px; font-weight: 450; color: #2b2b2b; max-width: 70ch; }
.case--tel .case__fond img { position: absolute; left: 50%; top: 50%; width: auto; height: 88%; translate: -50% -50%; object-fit: contain; border: 6px solid var(--encre); border-radius: 22px; background: var(--encre);
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); }

/* les détails : cases de texte, trois par rang */
.planche--texte { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.case--texte { grid-column: span var(--large); }
.case--texte .case__fond { position: relative; height: 100%; padding: 14px 16px 18px; }
.case--texte h2 { font-size: 18px; font-weight: 800; font-variation-settings: 'wdth' 112; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--encre); }
.case--texte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; line-height: 1.45; }
.case--texte li { position: relative; padding-left: 16px; }
.case--texte li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--accent); }

/* fin de l'étude : retour à la planche (dessinée en miniature) et projet suivant */
.planche--suite { margin-top: 64px; grid-template-rows: clamp(200px, 22vw, 280px); }
.case--retour { grid-column: 1 / 5; }
.case--suivant { grid-column: 5 / 13; }
.case--retour .case__fond { display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.mini { width: min(120px, 60%); fill: none; stroke: var(--encre); stroke-width: 1.4; }
.case--retour b { font-size: clamp(22px, 2.4vw, 30px); font-weight: 850; font-variation-settings: 'wdth' 112; line-height: 1.05; }
.case--retour .projet:hover b { color: var(--accent); }
.case--retour .projet:hover .mini { stroke: var(--accent); }
.projet .cartouche small { display: block; font-size: 12.5px; font-weight: 700; color: var(--encre); margin-bottom: 2px; }

/* d'une page à l'autre, l'objet de la case cliquée vole jusqu'à l'étude de cas (navigateurs qui ont les transitions entre pages) ;
   les cases déjà à l'écran à l'arrivée sont posées sans encrage (classe net, posée dans l'en-tête de page) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }

@keyframes tampon { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; transform: scale(0.86); } 100% { opacity: 1; transform: scale(1); } }
@keyframes silence { from { opacity: 0; } to { opacity: 1; } }

.bloc { margin-top: 64px; }
.bloc > h2 { font-size: 15px; font-weight: 700; color: var(--gris); margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--encre); }
.profil { font-size: clamp(18px, 1.8vw, 21px); max-width: 64ch; margin: 0; }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.chiffres li { border-top: 4px solid var(--encre); padding-top: 12px; }
.chiffres b { display: block; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; font-variation-settings: 'wdth' 112; line-height: 1.1; color: var(--accent); }

.missions { list-style: none; margin: 0; padding: 0; }
.mission { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.6fr); gap: 8px 40px; padding: 26px 0; border-bottom: 1px solid var(--filet); }
.mission__qui b { display: block; font-size: 22px; font-weight: 800; font-variation-settings: 'wdth' 110; line-height: 1.15; }
.mission__qui span { display: block; color: var(--gris); font-variant-numeric: tabular-nums; margin-top: 4px; }
.mission__qui em { display: inline-block; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--accent); margin-top: 6px; }
.mission h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.mission ul { margin: 0; padding-left: 18px; max-width: 70ch; }
.mission li { margin-bottom: 6px; }
.mission__env { color: var(--gris); font-size: 15px; margin: 10px 0 0; max-width: 70ch; }

.competences { margin: 0; }
.competences div { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr); gap: 4px 40px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.competences dt { font-weight: 700; }
.competences dd { margin: 0; max-width: 72ch; }
.formation { list-style: none; margin: 0; padding: 0; }
.formation li { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.formation p { margin: 0; }
.formation span { color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }

.contact { border-top: 2px solid var(--encre); margin-top: 72px; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; }
.contact h2 { font-size: 26px; font-weight: 800; font-variation-settings: 'wdth' 110; margin: 0 auto 0 0; }
.contact a { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; }
.contact a:hover { color: var(--accent); }
/* pied de page après main (repère contentinfo), dans la colonne de la page : les 80 px du bas de main moins 8 font les 72 px d'avant */
.page + .contact { width: calc(100% - 44px); max-width: 1076px; margin: -8px auto 0; padding-bottom: 80px; }

/* sous 980 px, la planche devient une bande verticale : une case par écran */
@media (max-width: 980px) {
  .planche--nuit { grid-template-columns: minmax(0, 620px); justify-content: center; row-gap: 28px; }
  .planche--nuit > .case { grid-column: 1; }
  .case--22 { aspect-ratio: 4 / 3; }
  .planche--web { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .planche--web > .case { grid-column: auto; }
  .planche--web > .case:nth-child(-n + 2), .planche--web > .case:last-child { grid-column: 1 / -1; }
  .planche--heros { height: auto; grid-template-rows: none; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .case--heros { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .case--fait { grid-column: auto; container-type: inline-size; min-height: 112px; }
  .case--fait .case__fond { position: relative; inset: auto; height: 100%; }
  .case--fait b { font-size: 38px; }
  .planche--visite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planche--visite > .case--ecran { grid-column: auto; }
  .planche--visite > .case--ecran-0 { grid-column: 1 / -1; }
  .planche--texte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planche--texte > .case--texte { grid-column: auto; }
  .planche--texte > .case--texte:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* cases de projet : le cartouche passe au-dessus du dessin, comme la nuit sur téléphone, pour ne rien cacher de l'objet ; la case
     grandit du cartouche et le dessin garde la hauteur de case d'avant (sur deux colonnes, la rangée prend la plus haute) */
  .planche--web .projet, .case--suivant .projet { position: relative; inset: auto; height: 100%; display: flex; flex-direction: column; }
  .planche--web .projet > .cartouche, .case--suivant .projet > .cartouche { position: static; order: -1; max-width: none; border: 0; border-bottom: 3px solid var(--encre); }
  .planche--web .projet > .case__fond, .case--suivant .projet > .case__fond { position: relative; inset: auto; flex: 1 0 auto; height: clamp(220px, 34vw, 300px); }
  .planche--suite { grid-template-rows: auto; }
  .case--suivant .projet > .case__fond { height: clamp(200px, 22vw, 280px); }
  .planche--web .case__fond .objet { top: 20%; height: 60%; }
  .case--suivant .case__fond .objet { top: 16%; height: 74%; }
}
/* au-delà, les noms sur deux ou trois lignes de ces deux cases étroites cachaient le haut de l'objet */
@media (min-width: 981px) {
  .planche--web > .case--immobilier-lima .objet, .planche--web > .case--mode-lima .objet { top: 38%; height: 50%; }
}
@media (min-width: 981px) and (max-width: 1023px) {
  .planche--web > .case--mode-lima .objet { top: 44%; height: 44%; }   /* case la plus étroite, cartouche plus haut */
}
/* ouverture de RollManager, de 761 à 1100 px : le haut de la ceinture passait sous le cartouche du nom */
@media (min-width: 761px) and (max-width: 1100px) {
  .case--heros.case--rollmanager .objet { top: 27%; height: 64%; }
}
/* 03:12 : sous le cartouche posé sur le dessin, le bruitage descend (sur téléphone, le cartouche passe au-dessus) */
@media (min-width: 561px) and (max-width: 980px) {
  .sfx--0312 { top: 47%; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .sfx--0312 { top: 36%; }
}
@media (max-width: 760px) {
  .chiffres { grid-template-columns: minmax(0, 1fr); }
  .mission, .competences div { grid-template-columns: minmax(0, 1fr); }
  .formation li { flex-direction: column; gap: 2px; }
  .methode { grid-template-columns: minmax(0, 1fr); }
  .planche--images > .case { grid-column: 1 / -1; }
  .planche--texte { grid-template-columns: minmax(0, 1fr); }
  html:not(.js) .repli, .accueil-repli .repli { grid-template-columns: minmax(0, 1fr); }
  /* études de cas, jusqu'à 760 px (plus large, le cartouche du nom cachait le haut de l'objet) : le cartouche passe au-dessus de
     l'objet, recentré sur ses lignes ; l'état du portfolio sous le cartouche, à droite, loin des chats */
  .planche--heros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planche--heros > .case--fait:last-child:nth-child(even) { grid-column: 1 / -1; }
  .case--heros, .case--suivant { --fx: 50%; }
  .concentre--decale { display: none; }
  .concentre--centre { display: block; }
  .case--heros { aspect-ratio: auto; display: flex; flex-direction: column; }
  .case--heros .case__fond { position: relative; inset: auto; aspect-ratio: 1; }
  .cartouche--titre { position: static; order: -1; max-width: none; border: 0; border-bottom: 3px solid var(--encre); }
  .case--heros .objet { left: 18%; width: 64%; top: 14%; height: 72%; }
  .case--suivant .case__fond .objet { left: 18%; width: 64%; top: 14%; height: 72%; }
  .case--heros.case--portfolio .etat { position: static; order: -1; align-self: flex-end; margin: 8px 10px 0; }
}
/* téléphone : le cartouche passe au-dessus du dessin pour ne rien cacher */
@media (max-width: 560px) {
  .planche--web { grid-template-columns: minmax(0, 1fr); }
  .planche--web .projet > .case__fond { height: 280px; }
  .planche--web > .case:nth-child(-n + 2), .planche--web > .case:last-child { grid-column: auto; }
  .planche--nuit .case { display: flex; flex-direction: column; }
  .planche--nuit > .case:not(.case--journal) { aspect-ratio: auto; }
  .planche--nuit .case__fond { position: relative; inset: auto; }
  .case--22 .case__fond { aspect-ratio: 4 / 3; }
  .case--0312 .case__fond { aspect-ratio: 3 / 2; }
  .case--qualif .case__fond, .case--0600 .case__fond { aspect-ratio: 1; }
  .planche--nuit .cartouche, .case--0312 .cartouche, .case--qualif .cartouche, .case--0600 .cartouche { position: static; order: -1; max-width: none; border: 0; border-bottom: 3px solid var(--encre); padding: 9px 12px 10px; font-size: 15px; }
  .case--0600 .cartouche--fin { order: 1; border-bottom: 0; border-top: 3px solid var(--encre); }
  .case--22 .cartouche { border-bottom-color: #333; }
  .planche--visite { grid-template-columns: minmax(0, 1fr); }
  .case--tel .case__fond { min-height: 460px; }
  .planche--suite { grid-template-rows: none; }
  .case--retour, .case--suivant { grid-column: 1 / -1; }
  .case--retour { height: 104px; }
  .case--retour .case__fond { flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; }
  .case--retour .mini { width: 72px; }
  .case--suivant .projet > .case__fond { height: 260px; }
  .case--suivant .case__fond .objet { top: 21%; height: 58%; }   /* taille d'avant le cartouche au-dessus, centré sur les lignes */
}
@media (prefers-reduced-motion: reduce) {
  .js .coin, .js.intro-finie .coin { transition: none; }
  .projet:hover .clawd svg, .projet:focus-visible .clawd svg { animation: none; }
  .js .case--heros.vu .clawd svg, .js .case--heros.vu .clawd .bras-haut, .js .case--heros.vu .clawd .bras-bas { animation: none; }
  .js .case .case__fond, .js .case .cartouche, .js .case .etat, .js .case .clawd, .js .case .pistes i, .js .case .journal li, .concentre, .case__fond .objet, .case--portfolio .case__fond img { transition: none; }
  .js .case .sfx span, .js .case.vu .sfx span, .js .case.vu .sfx--22 span { animation: none; opacity: 1; }
}
/* sans unités de conteneur (Safari 15, Chrome 104) : les chats du portfolio décalés en largeurs de chat (22cqh valent 2,745 largeurs
   de Bud, 2,555 de Skunk), le titre japonais placé en em ; sa taille, 5 % de la hauteur de case, approchée selon la case */
@supports not (width: 1cqh) {
  .case--portfolio .chat--bud { right: calc(100% - var(--fx, 50%)); transform: translateX(-274.5%); }
  .case--portfolio .chat--skunk { left: var(--fx, 50%); transform: translateX(255.5%); }
  .sfx--portfolio { left: calc(var(--fx, 50%) + 7.2em); top: 24%; font-size: clamp(13.7px, 1.4vw - 0.3px, 18.7px); }
  .case--heros .sfx--portfolio { font-size: clamp(18.7px, 2.2vw - 0.3px, 26.7px); }
  .case--suivant .sfx--portfolio { font-size: clamp(9.7px, 1.1vw - 0.3px, 13.7px); }
  @media (max-width: 980px) {
    .planche--web .sfx--portfolio { font-size: clamp(11px, 1.7vw, 15px); }
    .case--heros .sfx--portfolio { font-size: calc(3.33vw - 1.8px); }
    .case--suivant .sfx--portfolio { font-size: clamp(10px, 1.1vw, 14px); }
  }
  @media (max-width: 760px) {
    .case--heros .sfx--portfolio { font-size: calc(5vw - 2.5px); }
  }
  @media (max-width: 560px) {
    .planche--web .sfx--portfolio { font-size: 14px; }
    .case--suivant .sfx--portfolio { font-size: 13px; }
  }
}
/* sans translate (Chrome 103) : Florent et le personnage de Claude Code centrés par transform */
@supports not (translate: 0) {
  .case--portfolio .florent { transform: translateX(-50%); }
  .clawd--grand { transform: translate(-50%, -50%); }
}