/* Le mode sérieux (js/serieux.js) : un plan d'ingénieur, bleu, quadrillé, traits blancs, comme LookAnimation.
   Tout est sous #serieux (ou html.serieux) : rien ici ne touche au mode chat. */
#serieux {
  --sx-hi: #2468B6; --sx-fond: #1C58A2; --sx-bas: #133F7C; --sx-bas-rgb: 19,63,124;
  --sx-encre: rgb(238,245,255); --sx-doux: rgba(238,245,255,.72); --sx-pale: rgba(238,245,255,.5);
  --sx-trait: rgba(238,245,255,.26); --sx-trait-fort: rgba(238,245,255,.55);
  --sx-accent: rgb(255,217,138); --sx-accent-pale: rgba(255,217,138,.16);
  --sx-carte: rgba(var(--sx-bas-rgb),.5);
  --sx-titre: "Barlow Condensed","Arial Narrow",sans-serif; --sx-texte: "Barlow",system-ui,sans-serif; --sx-mono: "IBM Plex Mono",ui-monospace,monospace;
  --sx-col: min(600px, 50vw); --sx-marge: clamp(64px, 11vw, 190px);
  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--sx-hi) 0, var(--sx-fond) 45%, var(--sx-bas) 100%);
  color: var(--sx-encre); font: 400 16px/1.55 var(--sx-texte); -webkit-font-smoothing: antialiased;
  clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path .9s cubic-bezier(.7,0,.2,1);
}
#serieux[hidden] { display: none; }
#serieux.la { clip-path: circle(var(--or, 150vmax) at var(--ox, 50%) var(--oy, 50%)); }
#serieux.ferme { transition-duration: .75s; transition-timing-function: cubic-bezier(.6,0,.3,1); }
#serieux.instant { transition: none; }
/* ?serieux : on ne voit jamais l'écran des chats avant le calque */
html.serieux body::before { content: ""; position: fixed; inset: 0; z-index: 59; background: #1C58A2; }
html.serieux, html.serieux body { overflow: hidden; }

#serieux *, #serieux *::before, #serieux *::after { box-sizing: border-box; }
#serieux a { color: inherit; }
#serieux :focus-visible { outline: 1px dashed var(--sx-accent); outline-offset: 4px; }
#serieux .sx-grille, #serieux .sx-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#serieux .sx-defile { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: auto; outline: none; -webkit-overflow-scrolling: touch; }
#serieux.peut-prendre .sx-defile { cursor: grab; }
#serieux.prise .sx-defile { cursor: grabbing; user-select: none; }

/* ——— l'en-tête, le plan des sections, la barre, le cartouche ——— */
#serieux .sx-haut { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 24px; padding: 18px clamp(16px, 3vw, 40px); pointer-events: none; }
#serieux .sx-haut > * { pointer-events: auto; }
#serieux .sx-marque { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 500 13px/1 var(--sx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sx-doux); }
#serieux .sx-marque b { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--sx-trait-fort); font: 700 17px/1 var(--sx-titre); letter-spacing: .02em; color: var(--sx-encre); position: relative; }
#serieux .sx-marque b::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--sx-trait); }
#serieux .sx-retour { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; background: rgba(var(--sx-bas-rgb),.55); color: var(--sx-encre); border: 1px solid var(--sx-trait-fort); font: 500 13px/1 var(--sx-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .2s, background .2s; }
#serieux .sx-retour:hover { border-color: var(--sx-accent); background: rgba(var(--sx-bas-rgb),.8); }
#serieux .sx-retour svg { width: 22px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
#serieux .sx-retour:hover svg { stroke: var(--sx-accent); }
#serieux .sx-retour:hover .yeux { animation: sx-cligne .5s; }
@keyframes sx-cligne { 50% { transform: scaleY(.1); transform-origin: 50% 55%; } }

#serieux .sx-plan { position: fixed; left: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
#serieux .sx-plan a { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 11px/1 var(--sx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sx-pale); padding: 6px 0; }
#serieux .sx-plan i { font-style: normal; width: 22px; }
#serieux .sx-plan span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s, opacity .35s; }
#serieux .sx-plan a::before { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .3s; order: -1; }
#serieux .sx-plan:hover span { max-width: 160px; opacity: 1; }
#serieux .sx-plan:hover { background: linear-gradient(90deg, rgba(var(--sx-bas-rgb),.9) 60%, rgba(var(--sx-bas-rgb),0)); padding-right: 30px; }
#serieux .sx-plan a.on { color: var(--sx-encre); }
#serieux .sx-plan a.on::before { width: 28px; background: var(--sx-accent); }

#serieux .sx-barre { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4; background: rgba(238,245,255,.08); }
#serieux .sx-barre i { display: block; height: 100%; background: var(--sx-accent); transform-origin: 0 0; transform: scaleX(0); }

#serieux .sx-cartouche { position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vh, 32px); z-index: 2; display: grid; grid-template-columns: 1fr 1fr; width: 260px; border: 1px solid var(--sx-trait-fort); background: rgba(var(--sx-bas-rgb),.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font: 500 10px/1.3 var(--sx-mono); letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }
#serieux .sx-cartouche > div { grid-column: span 2; padding: 5px 8px; border-top: 1px solid var(--sx-trait); display: flex; flex-direction: column; gap: 2px; }
#serieux .sx-cartouche > div:first-child { border-top: 0; }
#serieux .sx-cartouche > .c2 { grid-column: span 1; }
#serieux .sx-cartouche > .c2 + .c2 { border-left: 1px solid var(--sx-trait); }
#serieux .sx-cartouche span { color: var(--sx-pale); font-size: 9px; }
#serieux .sx-cartouche b { font-weight: 500; color: var(--sx-encre); }

/* les étiquettes de la pile de compétences, accrochées à la 3D */
#serieux .sx-etiqs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#serieux .sx-etiq { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--sx-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sx-doux); opacity: 0; white-space: nowrap; will-change: transform; transition: color .2s; }
#serieux .sx-etiq i { width: 40px; height: 1px; background: currentColor; opacity: .6; }
#serieux .sx-etiq b { font-weight: 500; padding: 4px 7px; background: rgba(var(--sx-bas-rgb),.72); border: 1px solid var(--sx-trait); }   /* un cartouche : le texte ne se mélange plus aux traits */
#serieux .sx-etiq.ia, #serieux .sx-etiq.on { color: var(--sx-accent); }

/* ——— la page ——— */
#serieux .sx-page { position: relative; z-index: 1; }
#serieux .sx-sec { position: relative; min-height: 100vh; padding: 18vh 0 16vh var(--sx-marge); display: flex; flex-direction: column; justify-content: center; }
#serieux .sx-projet { min-height: 92vh; padding-top: 12vh; padding-bottom: 12vh; }
#serieux .sx-col { width: var(--sx-col); max-width: 100%; }
#serieux .sx-sur { margin: 0 0 18px; font: 500 12px/1.4 var(--sx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sx-pale); }
#serieux .sx-h1 { margin: 0 0 20px; font: 700 clamp(56px, 9.2vw, 132px)/.86 var(--sx-titre); letter-spacing: -.01em; text-transform: uppercase; }
#serieux .sx-role { margin: 0 0 26px; font: 500 clamp(19px, 2vw, 26px)/1.25 var(--sx-titre); letter-spacing: .06em; text-transform: uppercase; color: var(--sx-accent); }
#serieux .sx-chapo { margin: 0 0 22px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--sx-encre); max-width: 34em; }
/* l'accueil tient en un écran : nom, titre, l'IA en deux cartes, puis les boutons */
@media (min-width: 900px) {
  #serieux .sx-accueil { padding-top: 11vh; padding-bottom: 7vh; }
  #serieux .sx-accueil .sx-h1 { font-size: clamp(52px, 7.2vw, 112px); margin-bottom: 14px; }
  #serieux .sx-accueil .sx-role { margin-bottom: 16px; }
  #serieux .sx-accueil .sx-chapo { margin-bottom: 16px; }
  #serieux .sx-accueil .sx-maintenant { margin-bottom: 16px; }
  #serieux .sx-accueil .sx-faits { margin-bottom: 20px; padding-top: 10px; }
}
/* l'IA de deux façons, en deux cartes qui mènent au détail (01 l'IA, 02 la méthode) */
#serieux .sx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; max-width: 40em; }
#serieux .sx-duo-c { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; border: 1.5px solid var(--sx-trait-fort); background: rgba(var(--sx-bas-rgb),.45); text-decoration: none; color: var(--sx-doux); font-size: 14.5px; line-height: 1.45; transition: border-color .2s, background .2s, transform .2s; }
#serieux .sx-duo-c b { color: var(--sx-accent); font: 600 clamp(18px, 1.6vw, 22px)/1.1 var(--sx-titre); letter-spacing: .05em; text-transform: uppercase; }
#serieux .sx-duo-c em { position: absolute; top: 12px; right: 14px; font-style: normal; color: var(--sx-accent); transition: transform .2s; }
#serieux .sx-duo-c:hover, #serieux .sx-duo-c:focus-visible { border-color: var(--sx-accent); background: rgba(var(--sx-bas-rgb),.7); transform: translateY(-2px); }
#serieux .sx-duo-c:hover em { transform: translateX(4px); }
@media (max-width: 899px) { #serieux .sx-duo { grid-template-columns: 1fr; } }
#serieux .sx-maintenant { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; color: var(--sx-doux); }
#serieux .sx-point { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sx-accent); box-shadow: 0 0 0 0 rgba(255,217,138,.6); animation: sx-pouls 2.2s infinite; }
@keyframes sx-pouls { 70% { box-shadow: 0 0 0 10px rgba(255,217,138,0); } 100% { box-shadow: 0 0 0 0 rgba(255,217,138,0); } }
#serieux .sx-faits { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 34px; padding: 14px 0 0; border-top: 1px solid var(--sx-trait); font: 500 13px/1.3 var(--sx-mono); letter-spacing: .04em; color: var(--sx-doux); }
#serieux .sx-faits b { color: var(--sx-encre); font-weight: 500; }
#serieux .sx-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#serieux .sx-btn { display: inline-flex; align-items: center; padding: 13px 20px; border: 1px solid var(--sx-trait-fort); background: transparent; color: var(--sx-encre); font: 500 13px/1 var(--sx-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; position: relative; transition: border-color .2s, color .2s, background .2s; }
#serieux .sx-btn:hover { border-color: var(--sx-accent); color: var(--sx-accent); }
#serieux .sx-btn.plein { background: var(--sx-encre); color: var(--sx-bas); border-color: var(--sx-encre); }
#serieux .sx-btn.plein:hover { background: var(--sx-accent); border-color: var(--sx-accent); color: var(--sx-bas); }
#serieux .sx-defiler { position: absolute; left: var(--sx-marge); bottom: 5vh; margin: 0; display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sx-pale); }
#serieux .sx-defiler i { width: 1px; height: 46px; background: linear-gradient(var(--sx-encre), transparent); transform-origin: 0 0; animation: sx-descend 2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes sx-descend { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: 0 0; } 51% { transform-origin: 0 100%; } 100% { transform: scaleY(0); transform-origin: 0 100%; } }

#serieux .sx-tete { display: flex; align-items: baseline; gap: 18px; margin: 0 0 26px; padding-bottom: 14px; border-bottom: 1px solid var(--sx-trait); position: relative; }
#serieux .sx-tete::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--sx-accent); transform: scaleX(0); transform-origin: 0 0; transition: transform 1.1s .25s cubic-bezier(.2,.7,.2,1); }
#serieux .sx-tete.vu::after { transform: scaleX(.18); }
#serieux .sx-num { font: 500 13px/1 var(--sx-mono); color: var(--sx-accent); letter-spacing: .1em; }
#serieux .sx-h2 { margin: 0; font: 700 clamp(38px, 4.6vw, 68px)/.95 var(--sx-titre); text-transform: uppercase; letter-spacing: -.005em; }
#serieux .sx-h3 { margin: 0 0 6px; font: 700 clamp(34px, 3.6vw, 52px)/1 var(--sx-titre); text-transform: uppercase; }
#serieux .sx-h3.petit { font-size: 24px; margin-bottom: 14px; }
#serieux h3 { margin: 0 0 8px; font: 600 19px/1.2 var(--sx-titre); letter-spacing: .03em; text-transform: uppercase; }

/* les titres : chaque mot monte de derrière sa ligne */
#serieux .m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
#serieux .m > span { display: inline-block; transform: translateY(105%); transition: transform .95s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--i) * 70ms + .1s); }
#serieux .vu .m > span { transform: none; }
/* les autres blocs : ils glissent en place */
#serieux [data-rev]:not(.sx-tete):not(.sx-h1) { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .9s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--d, 0) * 110ms + .05s); }
#serieux [data-rev].vu:not(.sx-tete):not(.sx-h1) { opacity: 1; transform: none; }
#serieux.instant [data-rev], #serieux.instant .m > span { transition-duration: 0s !important; transition-delay: 0s !important; }

/* les cartes : un cadre de plan, avec des repères aux coins */
#serieux .sx-carte { position: relative; padding: 22px 22px 20px; background: var(--sx-carte); border: 1px solid var(--sx-trait); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#serieux .sx-carte::before, #serieux .sx-carte::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--sx-trait-fort); transition: border-color .25s, width .25s, height .25s; }
#serieux .sx-carte::before { left: -4px; top: -4px; border-right: 0; border-bottom: 0; }
#serieux .sx-carte::after { right: -4px; bottom: -4px; border-left: 0; border-top: 0; }
#serieux .sx-carte:hover::before, #serieux .sx-carte:hover::after, #serieux .sx-carte:focus-visible::before, #serieux .sx-carte:focus-visible::after { border-color: var(--sx-accent); width: 18px; height: 18px; }
#serieux .sx-carte p { margin: 0 0 10px; color: var(--sx-doux); }
#serieux .sx-carte p:last-child { margin-bottom: 0; }
#serieux .sx-gros { margin: 0 0 6px !important; font: 700 clamp(40px, 4vw, 58px)/1 var(--sx-titre) !important; color: var(--sx-accent) !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

#serieux .sx-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
#serieux .sx-tags li { padding: 5px 9px; border: 1px solid var(--sx-trait); font: 500 11.5px/1 var(--sx-mono); letter-spacing: .03em; color: var(--sx-doux); white-space: nowrap; }
#serieux .sx-tags.ia { margin-top: 26px; }
#serieux .sx-tags.ia li { border-color: rgba(255,217,138,.45); color: var(--sx-accent); background: var(--sx-accent-pale); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i) * 60ms + .3s); }
#serieux .sx-tags.ia.vu li { opacity: 1; transform: none; }

/* ——— les écrans épinglés : la scène reste, le texte change d'étape, la 3D fait le geste de l'étape ——— */
#serieux .sx-pin { display: block; min-height: 0; padding: 0; height: calc(100vh + var(--pas) * 72vh); }
#serieux .sx-scene { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 0 0 0 var(--sx-marge); }
#serieux .sx-scene .sx-col { display: flex; flex-direction: column; max-height: 100vh; padding: 12vh 0 8vh; }
#serieux .sx-chapo.court { font-size: clamp(15px, 1.1vw, 17px); color: var(--sx-doux); margin-bottom: 18px; max-width: 36em; }
#serieux .sx-etapes { display: grid; position: relative; }
#serieux .sx-etape { grid-area: 1 / 1; opacity: 0; transform: translateY(28px); pointer-events: none; transition: opacity .45s, transform .6s cubic-bezier(.2,.75,.2,1); }
#serieux .sx-etape.passe { transform: translateY(-28px); }
#serieux .sx-etape.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
#serieux .sx-etape p { margin: 0 0 10px; color: var(--sx-doux); max-width: 36em; }
#serieux .sx-etape .sx-sur { margin-bottom: 10px; }
#serieux .sx-etape .sx-sur b { color: var(--sx-accent); font-weight: 500; }
#serieux .sx-etape .sx-h3 { margin-bottom: 12px; }
#serieux .sx-points { list-style: none; display: flex; gap: 6px; margin: 22px 0 0; padding: 0; }
#serieux .sx-points li { width: 18px; height: 2px; background: var(--sx-trait); transition: width .35s, background .35s; }
#serieux .sx-points li.passe { background: var(--sx-trait-fort); }
#serieux .sx-points li.on { width: 36px; background: var(--sx-accent); }
#serieux .sx-suite { min-height: 0; padding-top: 8vh; padding-bottom: 14vh; }

/* 01 — l'IA */
#serieux .sx-preuves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
#serieux .sx-preuve h3 { font-size: 16px; }
#serieux .sx-preuve p:not(.sx-gros) { font-size: 14px; line-height: 1.45; }

/* 02 — les chiffres : un seul, en très grand, à la fois */
#serieux .sx-etapes.grand .sx-gros { font-size: clamp(76px, 9.5vw, 150px) !important; line-height: .9 !important; margin-bottom: 14px !important; }
#serieux .sx-chiffre h3 { font-size: clamp(20px, 1.8vw, 26px); margin-bottom: 8px; }
#serieux .sx-source { margin-top: 14px !important; font: 500 11px/1 var(--sx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sx-pale) !important; }
#serieux .sx-source::before { content: "Source · "; }

/* 03 — le parcours */
#serieux .sx-dates { font: 500 12px/1 var(--sx-mono); letter-spacing: .08em; color: var(--sx-accent); }
#serieux .sx-poste .sx-dates { margin: 0 0 10px; }
#serieux .sx-poste h3 { font: 500 clamp(24px, 2.3vw, 32px)/1.15 var(--sx-titre); letter-spacing: .01em; text-transform: none; margin-bottom: 10px; }
#serieux .sx-poste h3 b { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.35em; }
#serieux .sx-poste.ia h3 b { color: var(--sx-accent); }
#serieux .sx-poste ul { margin: 0; padding: 0; list-style: none; }
#serieux .sx-poste ul li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--sx-doux); }
#serieux .sx-poste ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: var(--sx-accent); }

/* 04 — les compétences : une couche par étape, ses groupes en lignes */
#serieux .sx-couche.ia .sx-h3 { color: var(--sx-accent); }
#serieux .sx-groupe { display: grid; grid-template-columns: 130px 1fr; gap: 14px; margin: 0 !important; padding: 9px 0; border-top: 1px solid var(--sx-trait); font-size: 14.5px; line-height: 1.45; color: var(--sx-encre) !important; }
#serieux .sx-groupe span { font: 500 11px/1.6 var(--sx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sx-pale); }
#serieux .sx-couche.ia .sx-groupe span { color: var(--sx-accent); }

/* les icônes au trait */
#serieux .sx-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

#serieux .sx-formation { padding-top: 22px; border-top: 1px solid var(--sx-trait); }
#serieux .sx-formation ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
#serieux .sx-formation li { display: grid; grid-template-columns: 110px 1fr; gap: 2px 14px; }
#serieux .sx-formation li .sx-dates { grid-row: span 2; font: 500 12px/1.6 var(--sx-mono); color: var(--sx-pale); }
#serieux .sx-formation li b { font-weight: 500; }
#serieux .sx-formation li span:last-child { font-size: 14px; color: var(--sx-doux); }
#serieux .sx-langues { margin: 0; font: 500 12px/1.4 var(--sx-mono); letter-spacing: .04em; color: var(--sx-doux); }

/* 05 — les projets : le papier change de couleur d'un projet à l'autre (js : teinte()) */
#serieux .sx-proj { padding: 30px 30px 26px; }
#serieux .sx-proj .sx-h3 { font-size: clamp(44px, 4.6vw, 68px); }
#serieux .sx-sous { font: 500 19px/1.3 var(--sx-titre) !important; letter-spacing: .03em; color: var(--sx-accent) !important; margin-bottom: 16px !important; }
#serieux .sx-prive { display: inline-flex; align-items: center; gap: 5px; color: var(--sx-pale); }
#serieux .sx-prive .sx-ico { width: 13px; height: 13px; }
#serieux .sx-icos { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; margin: 16px 0 4px; padding: 0; border-top: 1px solid var(--sx-trait); }
#serieux .sx-icos li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sx-trait); font-size: 14px; line-height: 1.3; color: var(--sx-encre); }
#serieux .sx-icos .sx-ico { width: 24px; height: 24px; color: var(--sx-accent); }
#serieux .sx-proj.vu .sx-icos li { animation: sx-ico-in .6s both; }
#serieux .sx-proj.vu .sx-icos li:nth-child(2) { animation-delay: .08s; } #serieux .sx-proj.vu .sx-icos li:nth-child(3) { animation-delay: .16s; }
#serieux .sx-proj.vu .sx-icos li:nth-child(4) { animation-delay: .24s; } #serieux .sx-proj.vu .sx-icos li:nth-child(5) { animation-delay: .32s; } #serieux .sx-proj.vu .sx-icos li:nth-child(6) { animation-delay: .4s; }
@keyframes sx-ico-in { from { opacity: 0; transform: translateX(-10px); } }
#serieux .sx-lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 500 13px/1 var(--sx-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sx-accent); text-decoration: none; border-bottom: 1px solid rgba(255,217,138,.5); padding-bottom: 4px; }
#serieux .sx-lien .sx-ico { width: 15px; height: 15px; }
#serieux .sx-lien:hover { border-bottom-color: var(--sx-accent); }
/* la tête des projets et la légende des catégories (un clic filtre, un second clic rend tout) */
#serieux .sx-projets-tete { min-height: 72vh; }
#serieux .sx-legende { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
#serieux .sx-legende button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: rgba(var(--sx-bas-rgb),.45); border: 1px solid var(--sx-trait); color: var(--sx-encre); font: 500 12px/1 var(--sx-mono); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
#serieux .sx-legende button .sx-ico { width: 16px; height: 16px; color: var(--sx-accent); }
#serieux .sx-legende button i { font-style: normal; color: var(--sx-pale); }
#serieux .sx-legende button:hover { border-color: var(--sx-trait-fort); }
#serieux .sx-legende button[aria-pressed="true"] { border-color: var(--sx-accent); color: var(--sx-accent); background: var(--sx-accent-pale); }
#serieux .sx-legende button[aria-pressed="true"] i { color: var(--sx-accent); }
/* les étiquettes sur chaque carte */
#serieux .sx-cats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; padding: 0; }
#serieux .sx-cats li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border: 1px dashed var(--sx-trait-fort); font: 500 10.5px/1 var(--sx-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sx-doux); }
#serieux .sx-cats .sx-ico { width: 13px; height: 13px; color: var(--sx-accent); }
#serieux[data-cat="ia"] .sx-cats li[data-c="ia"], #serieux[data-cat="donnees"] .sx-cats li[data-c="donnees"], #serieux[data-cat="secu"] .sx-cats li[data-c="secu"],
#serieux[data-cat="produit"] .sx-cats li[data-c="produit"], #serieux[data-cat="recherche"] .sx-cats li[data-c="recherche"], #serieux[data-cat="outils"] .sx-cats li[data-c="outils"],
#serieux[data-cat="creatif"] .sx-cats li[data-c="creatif"] { border-style: solid; border-color: var(--sx-accent); color: var(--sx-accent); }
#serieux .sx-carte.hors { opacity: .28 !important; filter: grayscale(.6); }
#serieux .sx-carte.hors:hover { opacity: .7 !important; }
/* un projet sur deux : la carte à droite, l'objet 3D à gauche */
#serieux .sx-projet.droite { align-items: flex-end; padding-left: 0; padding-right: clamp(40px, 6vw, 110px); }
#serieux .sx-cartouche { transition: opacity .35s; }
#serieux.sans-cartouche .sx-cartouche { opacity: 0; }
/* les autres projets */
#serieux .sx-autres { min-height: 0; padding-top: 12vh; }
#serieux .sx-col.large { width: min(1060px, calc(100vw - var(--sx-marge) - 310px)); }
#serieux .sx-grille-proj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#serieux .sx-mini { padding: 18px 18px 16px; }
#serieux .sx-mini p { font-size: 14px; line-height: 1.45; }
#serieux .sx-mini-t { display: flex; align-items: center; gap: 10px; margin-bottom: 8px !important; color: var(--sx-encre) !important; }
#serieux .sx-mini-t .sx-ico { color: var(--sx-accent); }
#serieux .sx-mini-t b { font: 700 19px/1 var(--sx-titre); letter-spacing: .03em; text-transform: uppercase; }
#serieux .sx-mini-t .sx-prive { margin-left: auto; }
#serieux .sx-mini .sx-tags { margin-top: 10px; }
#serieux .sx-mini .sx-tags li { font-size: 10.5px; padding: 4px 7px; }
#serieux .sx-mini .sx-lien { margin-top: 12px; font-size: 11.5px; }

/* 06 — le contact */
#serieux .sx-contacts { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--sx-trait); }
#serieux .sx-contacts li { display: flex; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--sx-trait); }
#serieux .sx-contacts span { width: 90px; flex: none; font: 500 11px/1 var(--sx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sx-pale); }
#serieux .sx-contacts a { font: 600 clamp(18px, 1.8vw, 24px)/1.2 var(--sx-titre); letter-spacing: .02em; text-decoration: none; word-break: break-word; transition: color .2s; }
#serieux .sx-contacts a:hover { color: var(--sx-accent); }
#serieux .sx-pied { display: flex; justify-content: space-between; gap: 16px; padding: 26px clamp(16px, 3vw, 40px) 30px var(--sx-marge); border-top: 1px solid var(--sx-trait); font: 500 11px/1 var(--sx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sx-pale); padding-right: 320px; }

/* ——— écrans étroits : l'objet 3D en haut, le texte passe dessus sur des cartes teintées ——— */
@media (max-width: 899px) {
  #serieux { --sx-col: 100%; --sx-marge: 16px; }
  #serieux .sx-haut { padding: 12px 16px; background: linear-gradient(rgba(var(--sx-bas-rgb),.92), rgba(var(--sx-bas-rgb),0)); }
  #serieux .sx-marque span { display: none; }
  #serieux .sx-plan, #serieux .sx-cartouche, #serieux .sx-etiqs { display: none; }
  #serieux .sx-sec { padding: 36vh 16px 10vh; min-height: auto; justify-content: flex-start; }
  #serieux .sx-accueil { min-height: 100vh; padding-top: 44vh; }
  #serieux .sx-projet { padding-top: 40vh; padding-bottom: 6vh; }
  #serieux .sx-projet + .sx-projet { padding-top: 34vh; }
  #serieux .sx-projet:first-of-type .sx-tete { margin-top: 0; }
  #serieux .sx-carte { background: rgba(var(--sx-bas-rgb),.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  #serieux .sx-accueil .sx-col > *:not(.sx-h1):not(.sx-actions):not(.sx-sur):not(.sx-role):not(.sx-duo) { background: rgba(var(--sx-bas-rgb),.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 12px 14px; margin-left: -14px; margin-right: -14px; }
  /* les écrans épinglés : la 3D en haut, le texte de l'étape en bas, sur un verre dépoli */
  #serieux .sx-pin { padding: 0; height: calc(100vh + var(--pas) * 80vh); }
  #serieux .sx-scene { padding: 0 16px; align-items: flex-end; }
  #serieux .sx-scene .sx-col { max-height: none; padding: 16px 16px 14px; margin: 0 -4px 3vh; background: rgba(var(--sx-bas-rgb),.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--sx-trait); }
  #serieux .sx-scene .sx-tete { margin-bottom: 12px; padding-bottom: 8px; }
  #serieux .sx-scene .sx-h2 { font-size: 26px; }
  #serieux .sx-chapo.court { display: none; }
  #serieux .sx-etape .sx-h3 { font-size: 28px; margin-bottom: 8px; }
  #serieux .sx-etape p { font-size: 14.5px; line-height: 1.45; }
  #serieux .sx-etapes.grand .sx-gros { font-size: 64px !important; }
  #serieux .sx-poste h3 { font-size: 20px; }
  #serieux .sx-poste ul li { font-size: 13.5px; }
  #serieux .sx-groupe { display: block; padding: 5px 0; font-size: 12.5px; line-height: 1.4; }
  #serieux .sx-groupe span { margin-right: 8px; font-size: 10px; }
  #serieux .sx-couche > p:not(.sx-sur):not(.sx-groupe) { display: none; }
  #serieux .sx-points { margin-top: 12px; }
  #serieux .sx-suite, #serieux .sx-autres { padding-top: 6vh; }
  #serieux .sx-preuves, #serieux .sx-grille-proj { grid-template-columns: 1fr; }
  #serieux .sx-col.large { width: 100%; }
  #serieux .sx-icos { grid-template-columns: 1fr; }
  #serieux .sx-proj { padding: 22px 18px 20px; }
  #serieux .sx-projet.droite { align-items: stretch; padding: 34vh 16px 6vh; }
  #serieux .sx-projets-tete { min-height: 0; padding-top: 30vh; }
  #serieux .sx-legende button { padding: 8px 10px; font-size: 11px; }
  #serieux .sx-contacts li { flex-direction: column; gap: 6px; }
  #serieux .sx-gros { font-size: 38px !important; }
  #serieux .sx-formation li { grid-template-columns: 1fr; }
  #serieux .sx-defiler { left: 16px; }
  #serieux .sx-pied { padding: 22px 16px; flex-direction: column; }
  #serieux .sx-retour span { display: none; }
  #serieux .sx-retour { padding: 9px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  #serieux, #serieux * { transition-duration: 0s !important; animation: none !important; }
}

/* ——— les outils de l'en-tête : version rapide, PDF, langue ——— */
#serieux .sx-outils { margin-left: auto; display: flex; gap: 6px; }
#serieux .sx-outils + .sx-retour { margin-left: 0; }
#serieux .sx-outil { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; background: rgba(var(--sx-bas-rgb),.45); color: var(--sx-doux); border: 1px dashed var(--sx-trait-fort); font: 500 12px/1 var(--sx-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .2s, border-color .2s; }
#serieux .sx-outil:hover, #serieux .sx-outil:focus-visible { color: var(--sx-accent); border-color: var(--sx-accent); border-style: solid; }
#serieux .sx-outil[data-rapide] { color: var(--sx-encre); border-style: solid; }

/* ——— la version rapide : une fiche au-dessus de tout ——— */
#serieux .sx-rapide { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: rgba(var(--sx-bas-rgb),.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#serieux .sx-rapide[hidden] { display: none; }
#serieux .sx-rapide-page { position: relative; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; overscroll-behavior: contain; padding: clamp(20px, 3vw, 40px); background: var(--sx-fond); border: 1px solid var(--sx-trait-fort); box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: sx-rapide .35s cubic-bezier(.2,.8,.2,1); }
#serieux .sx-rapide-page::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--sx-trait); pointer-events: none; }
@keyframes sx-rapide { from { opacity: 0; transform: translateY(14px) scale(.98); } }
#serieux .sx-rapide-x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 38px; height: 38px; background: none; color: var(--sx-encre); border: 1px solid var(--sx-trait-fort); font: 300 24px/1 var(--sx-texte); cursor: pointer; }
#serieux .sx-rapide-x:hover { border-color: var(--sx-accent); color: var(--sx-accent); }
#serieux .sx-rapide-nom { margin: 0 0 6px; font: 700 clamp(34px, 5vw, 56px)/.9 var(--sx-titre); text-transform: uppercase; }
#serieux .sx-rapide .sx-role { margin-bottom: 12px; }
#serieux .sx-rapide p { max-width: 60em; color: var(--sx-doux); }
#serieux .sx-rapide .sx-faits { margin-bottom: 16px; }
#serieux .sx-rapide .sx-actions { margin: 0 0 24px; }
#serieux .sx-rapide-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; margin: 0 0 22px; }
#serieux .sx-rapide-grille h3 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--sx-trait); font: 500 12px/1 var(--sx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sx-accent); }
#serieux .sx-rapide-grille ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--sx-doux); }
#serieux .sx-rapide-grille b { color: var(--sx-encre); font-weight: 600; }
#serieux .sx-rapide-chiffres b { font: 700 22px/1 var(--sx-titre); color: var(--sx-accent) !important; margin-right: 4px; }
#serieux .sx-rapide .sx-dates { font: 500 11px/1 var(--sx-mono); color: var(--sx-pale); margin-right: 4px; }
@media (max-width: 899px) {
  #serieux .sx-outils { gap: 4px; }
  #serieux .sx-outil { height: 34px; padding: 0 8px; font-size: 11px; }
  #serieux a.sx-outil { display: none; }
  #serieux .sx-rapide-grille { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  #serieux .sx-haut { gap: 8px; }
  #serieux .sx-marque span { display: none; }
}

/* ——— l'entrée : plus rapide (Mathieu, 28/09) ; le cercle en .48 s, ou pas de cercle du tout quand les chats ont déjà collé le bleu (.papier),
   puis chaque élément arrive à son tour (.arrive, posée 1,6 s par Serieux.ouvre) ——— */
#serieux { transition-duration: .48s; }
#serieux.papier { clip-path: none !important; transition: none; }
#serieux.arrive .sx-grille { animation: sx-a-fondu .5s ease-out both; }
#serieux.arrive .sx-3d { animation: sx-a-fondu .7s .15s ease-out both; }
#serieux.arrive .sx-haut > * { animation: sx-a-haut .55s cubic-bezier(.2,.9,.25,1.15) both; }
#serieux.arrive .sx-haut > :nth-child(2) { animation-delay: .06s; } #serieux.arrive .sx-haut > :nth-child(3) { animation-delay: .12s; } #serieux.arrive .sx-haut > :nth-child(4) { animation-delay: .18s; }
#serieux.arrive .sx-plan a { animation: sx-a-gauche .45s cubic-bezier(.2,.9,.25,1.1) both; }
#serieux.arrive .sx-plan a:nth-child(2) { animation-delay: .25s; } #serieux.arrive .sx-plan a:nth-child(3) { animation-delay: .29s; } #serieux.arrive .sx-plan a:nth-child(4) { animation-delay: .33s; }
#serieux.arrive .sx-plan a:nth-child(5) { animation-delay: .37s; } #serieux.arrive .sx-plan a:nth-child(6) { animation-delay: .41s; } #serieux.arrive .sx-plan a:nth-child(7) { animation-delay: .45s; }
#serieux.arrive .sx-plan a:nth-child(8) { animation-delay: .49s; } #serieux.arrive .sx-plan a:nth-child(9) { animation-delay: .53s; }
#serieux.arrive .sx-plan a:first-child { animation-delay: .21s; }
#serieux.arrive .sx-cartouche { animation: sx-a-bas .6s .35s cubic-bezier(.2,.9,.25,1.1) both; }
#serieux.arrive .sx-cartouche > div { animation: sx-a-fondu .3s both; animation-delay: calc(.45s + var(--i, 0) * 60ms); }
#serieux.arrive .sx-barre { animation: sx-a-trace .7s .1s cubic-bezier(.6,0,.2,1) both; transform-origin: 0 0; }
#serieux.arrive .sx-accueil [data-rev]:not(.sx-tete):not(.sx-h1) { transition-duration: .5s, .55s; transition-delay: calc(.25s + var(--i, 0) * 80ms); }
@keyframes sx-a-fondu { from { opacity: 0; } }
@keyframes sx-a-haut { from { opacity: 0; transform: translateY(-26px); } }
@keyframes sx-a-gauche { from { opacity: 0; transform: translateX(-22px); } }
@keyframes sx-a-bas { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes sx-a-trace { from { transform: scaleX(0); } }

/* ——— le sommaire des projets : trié par l'étiquette choisie, chaque ligne mène au projet ——— */
#serieux .sx-sommaire { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--sx-trait); max-width: 760px; }
#serieux .sx-sommaire li { border-bottom: 1px solid var(--sx-trait); overflow: hidden; max-height: 80px; transition: max-height .35s, opacity .3s; }
#serieux .sx-sommaire li.hors { max-height: 0; opacity: 0; border-bottom-color: transparent; }
#serieux .sx-sommaire a { display: grid; grid-template-columns: 22px minmax(90px, 150px) 1fr auto auto; align-items: center; gap: 12px; padding: 10px 6px; text-decoration: none; color: var(--sx-doux); transition: background .2s, color .2s, padding .2s; }
#serieux .sx-sommaire a:hover, #serieux .sx-sommaire a:focus-visible { background: var(--sx-accent-pale); color: var(--sx-encre); padding-left: 12px; }
#serieux .sx-sommaire .sx-ico { width: 18px; height: 18px; color: var(--sx-accent); }
#serieux .sx-sommaire b { color: var(--sx-encre); font: 600 17px/1.1 var(--sx-titre); letter-spacing: .04em; text-transform: uppercase; }
#serieux .sx-sommaire span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#serieux .sx-sommaire i .sx-ico { width: 13px; height: 13px; color: var(--sx-pale); }
#serieux .sx-sommaire em { font-style: normal; color: var(--sx-accent); transition: transform .2s; }
#serieux .sx-sommaire a:hover em { transform: translateX(4px); }
#serieux .sx-carte.vise { animation: sx-vise 1.6s ease-out; }
@keyframes sx-vise { 0%, 40% { border-color: var(--sx-accent); box-shadow: 0 0 0 4px var(--sx-accent-pale); } }
#serieux .sx-carte.hors { opacity: 1; filter: none; }
@media (max-width: 899px) { #serieux .sx-sommaire a { grid-template-columns: 20px 1fr auto; } #serieux .sx-sommaire span, #serieux .sx-sommaire i { display: none; } }
@media (min-width: 900px) and (max-height: 960px) { #serieux .sx-accueil .sx-defiler { display: none; } }