/* ============================================================
   collaborations.css — l'espace Collaborations et les concepts de démonstration.
   Sobre, nocturne, dans l'identité de Mots d'encre : bleu nuit, indigo, pervenche, une touche de rose.
   (Utilise les couleurs de style.css : fonctionne en thème sombre comme en thème clair.)
   ============================================================ */
:root { --cl-nuit: #091a20; --cl-nuit2: #132e38; --cl-indigo: #2b6372; --cl-pervenche: #a3f5ff; --cl-lavande: #ebf5f8; --cl-rose: #ff7ba4; --cl-max: 68rem; }

/* ---------- l'en-tête (le même que sur les autres pages) ---------- */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--fond) 84%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--trait); }
.entete .mur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.6rem; }
.marque { display: inline-flex; align-items: center; gap: .45rem; font: 400 1.2rem/1 var(--f-titre); text-decoration: none; }
.marque-ic { width: 1.5rem; height: 1.5rem; color: var(--plume); }
.marque-ic .goutte-marque { fill: var(--rose); }
.retour { display: inline-flex; align-items: center; gap: .35rem; font: 600 .86rem/1 var(--f-ui); text-decoration: none; color: var(--brume); }

.cl { overflow-x: clip; }
.cl-mur { width: min(100%, var(--cl-max)); margin-inline: auto; padding-inline: clamp(16px, 4.5vw, 40px); }
.cl p { text-wrap: pretty; }
.cl h1, .cl h2, .cl h3 { font-family: var(--f-titre); font-weight: 400; text-wrap: balance; margin: 0; }
.cl-sur { margin: 0 0 .9rem; font: 600 .72rem/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--rose); }
.cl-chapeau { margin: 1.1rem 0 0; max-width: 36rem; font: italic 400 clamp(1.08rem, 2.6vw, 1.3rem)/1.55 var(--f-vers); color: color-mix(in srgb, var(--encre) 86%, transparent); }
.cl-texte { font: 400 1.06rem/1.68 var(--f-vers); color: color-mix(in srgb, var(--encre) 90%, transparent); }
.cl-texte p { margin: 0 0 .9em; }
.cl-texte p:last-child { margin-bottom: 0; }
.cl-texte b, .cl-texte strong { font-weight: 600; color: var(--encre); }
.cl a:not(.btn):not(.cl-tel):not(.cl-carte-lien):not(.cl-res) { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--rose) 55%, transparent); text-underline-offset: 3px; }

/* ---------- la bande de nuit (le haut de page) ---------- */
.cl-nuit { position: relative; color: var(--cl-lavande); background: radial-gradient(120% 80% at 70% 0%, #255466 0%, var(--cl-nuit2) 45%, var(--cl-nuit) 100%); isolation: isolate; }
.cl-nuit::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(163, 245, 255, .3), transparent); }
.cl-nuit .cl-sur { color: var(--cl-rose); }
.cl-nuit .cl-chapeau { color: rgba(235, 245, 248, .84); }
.cl-heros { display: grid; gap: 2.4rem; padding-block: clamp(2.4rem, 7vw, 5rem) clamp(2.6rem, 6vw, 4.5rem); }
.cl-heros h1 { font-size: clamp(2.3rem, 8.4vw, 4.1rem); line-height: 1.02; letter-spacing: -.01em; max-width: 14ch; }
.cl-heros h1 em { font-style: normal; color: var(--cl-pervenche); }
.cl-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.7rem; }
.cl-nuit .btn { background: rgba(255, 255, 255, .06); border-color: rgba(235, 245, 248, .22); color: var(--cl-lavande); }
.cl-nuit .btn.plein { background: var(--cl-lavande); border-color: var(--cl-lavande); color: var(--cl-nuit2); font-weight: 600; }
.cl-mention { margin: 1.2rem 0 0; font: 500 .8rem/1.45 var(--f-ui); color: rgba(235, 245, 248, .62); max-width: 34rem; }
@media (min-width: 900px) { .cl-heros { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; } }

/* trois écrans, en éventail */
.cl-trio { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 1rem 0 .5rem; }
.cl-trio .cl-tel { width: 31%; max-width: 12.2rem; flex: none; }
.cl-trio .cl-tel:nth-child(1) { transform: rotate(-7deg) translate(18%, 6%); z-index: 1; }
.cl-trio .cl-tel:nth-child(2) { z-index: 2; width: 35%; max-width: 13.6rem; }
.cl-trio .cl-tel:nth-child(3) { transform: rotate(7deg) translate(-18%, 6%); z-index: 1; }

/* ---------- un écran de téléphone (une vraie capture du site) ---------- */
.cl-tel { position: relative; display: block; padding: 5px; border-radius: 1.55rem; background: linear-gradient(160deg, #275360, #0a1e24 70%); box-shadow: 0 0 0 1px rgba(163, 245, 255, .22), 0 26px 50px -26px rgba(0, 0, 0, .85); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: zoom-in; }
.cl-tel img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1298; object-fit: cover; border-radius: calc(1.55rem - 5px); background: #091a20; }
.cl-tel:focus-visible { outline: 3px solid color-mix(in srgb, var(--cl-rose) 70%, transparent); outline-offset: 3px; }
.cl-tel .cl-loupe { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(9, 26, 32, .66); color: #fff; opacity: .0; transition: opacity .25s; }
.cl-tel:hover .cl-loupe, .cl-tel:focus-visible .cl-loupe { opacity: 1; }
.cl-tel .cl-loupe svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- les sections ---------- */
.cl-sec { padding-block: clamp(3rem, 8vw, 5.5rem); border-bottom: 1px solid var(--trait); }
.cl-sec:last-of-type { border-bottom: 0; }
.cl-tete { display: grid; gap: .2rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); max-width: 44rem; }
.cl-num { font: 400 1rem/1 var(--f-titre); color: var(--rose); letter-spacing: .06em; }
.cl-tete h2 { font-size: clamp(1.85rem, 6vw, 2.8rem); line-height: 1.08; }
.cl-tete .cl-chapeau { margin-top: .7rem; }

/* le projet : deux portes */
.cl-portes { display: grid; gap: 1rem; }
@media (min-width: 760px) { .cl-portes { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.cl-porte { position: relative; padding: 1.5rem 1.4rem 1.6rem; border-radius: 22px; border: 1px solid var(--trait); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.cl-porte h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; margin-bottom: .7rem; }
.cl-porte h3 svg { width: 1.6rem; height: 1.6rem; flex: none; fill: none; stroke: var(--rose); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cl-lien { margin: 1.4rem 0 0; padding: 1.2rem 1.3rem; border-left: 2px solid var(--rose); font: italic 400 1.1rem/1.55 var(--f-vers); color: var(--encre); background: var(--rose-voile); border-radius: 0 14px 14px 0; max-width: 46rem; }

/* ce qu'on y vit : les planches */
.cl-planches { display: grid; gap: clamp(2.6rem, 7vw, 4.2rem); }
.cl-planche { display: grid; gap: 1.4rem; align-items: center; }
.cl-planche .cl-ecrans { display: flex; justify-content: center; gap: .9rem; }
.cl-planche .cl-ecrans .cl-tel { width: min(46%, 13.5rem); }
.cl-planche .cl-ecrans .cl-tel:only-child { width: min(54%, 14rem); }
.cl-planche h3 { font-size: clamp(1.5rem, 4.6vw, 2rem); line-height: 1.1; margin-bottom: .75rem; }
.cl-planche .cl-ou { margin: 0 0 .5rem; font: 600 .7rem/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--heure); }
.cl-planche .cl-legende { margin: .9rem 0 0; font: 500 .8rem/1.45 var(--f-ui); color: var(--brume); }
.cl-planche .cl-aller { margin-top: 1rem; }
@media (min-width: 820px) {
  .cl-planche { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.2rem; }
  .cl-planche:nth-child(even) .cl-ecrans { order: 2; }
}

/* un exemple réel : l'Océan interdit */
.cl-exemple { border-radius: 28px; padding: clamp(1.4rem, 4vw, 2.6rem); color: var(--cl-lavande); background: radial-gradient(110% 80% at 20% 0%, #23306e 0%, #0e1238 55%, #070a22 100%); box-shadow: inset 0 0 0 1px rgba(163, 245, 255, .16); }
.cl-exemple .cl-tete h2 { color: #fff; }
.cl-exemple .cl-chapeau, .cl-exemple .cl-texte { color: rgba(235, 245, 248, .86); }
.cl-exemple .cl-texte b { color: #fff; }
.cl-exemple .cl-num { color: var(--cl-rose); }
.cl-exemple-grille { display: grid; gap: 1.8rem; align-items: start; }
@media (min-width: 860px) { .cl-exemple-grille { grid-template-columns: 1.1fr .9fr; gap: 2.6rem; } }
.cl-etapes { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .55rem; counter-reset: e; }
.cl-etapes li { counter-increment: e; display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .7rem; align-items: baseline; font: 500 .9rem/1.45 var(--f-ui); color: rgba(235, 245, 248, .78); }
.cl-etapes li::before { content: counter(e); grid-row: span 2; font: 400 1.3rem/1 var(--f-titre); color: var(--cl-pervenche); }
.cl-etapes li b { font: 400 1.1rem/1.2 var(--f-titre); color: #fff; }
.cl-exemple .cl-ecrans { display: flex; gap: .8rem; justify-content: center; }
.cl-exemple .cl-ecrans .cl-tel { width: min(47%, 12.5rem); }
.cl-faits { display: grid; gap: .6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.cl-faits li { position: relative; padding-left: 1.4rem; font: 400 .98rem/1.55 var(--f-vers); color: rgba(235, 245, 248, .86); }
.cl-faits li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .55rem; height: .7rem; background: var(--cl-pervenche); clip-path: path('M4.4 0C6 2.6 8.8 4.6 8.8 7.4a4.4 4.4 0 0 1-8.8 0C0 4.6 2.8 2.6 4.4 0z'); transform: scale(.85); transform-origin: left top; }
.cl-exemple .btn { background: rgba(255, 255, 255, .07); border-color: rgba(235, 245, 248, .25); color: #fff; }

/* les formats envisageables */
.cl-avertir { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1.6rem; padding: .9rem 1.1rem; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--rose) 50%, transparent); font: 500 .88rem/1.5 var(--f-ui); color: var(--encre); max-width: 46rem; }
.cl-avertir svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; fill: none; stroke: var(--rose); stroke-width: 1.8; stroke-linecap: round; }
.cl-formats { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.cl-format { display: grid; align-content: start; gap: .55rem; padding: 1.3rem 1.25rem 1.4rem; border-radius: 20px; border: 1px solid var(--trait); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.cl-format svg { width: 2rem; height: 2rem; fill: none; stroke: var(--heure); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cl-format h3 { font-size: 1.35rem; line-height: 1.15; }
.cl-format p { margin: 0; font: 400 .98rem/1.55 var(--f-vers); color: color-mix(in srgb, var(--encre) 86%, transparent); }
.cl-format small { display: block; margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--trait); font: 500 .78rem/1.45 var(--f-ui); color: var(--brume); }
.cl-format small b { color: var(--encre); font-weight: 600; }

/* les principes */
.cl-principes { display: grid; gap: 1rem 2rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .cl-principes { grid-template-columns: 1fr 1fr; } }
.cl-principes li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; align-items: start; }
.cl-principes svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--rose); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: .15rem; }
.cl-principes b { display: block; font: 400 1.2rem/1.25 var(--f-titre); margin-bottom: .25rem; }
.cl-principes span { font: 400 .98rem/1.55 var(--f-vers); color: color-mix(in srgb, var(--encre) 86%, transparent); }

/* le concept de démonstration */
.cl-carte-lien { position: relative; display: grid; gap: 1.2rem; padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: 26px; text-decoration: none; color: #f6efe2; overflow: hidden; background: radial-gradient(90% 120% at 85% 10%, rgba(240, 206, 140, .26), transparent 55%), linear-gradient(160deg, #1c2250 0%, #121534 55%, #0b1f22 100%); box-shadow: inset 0 0 0 1px rgba(240, 214, 160, .2); transition: transform .3s var(--ease); }
.cl-carte-lien:hover { transform: translateY(-2px); }
.cl-carte-lien:focus-visible { outline: 3px solid color-mix(in srgb, var(--cl-rose) 70%, transparent); outline-offset: 3px; }
.cl-carte-lien .cl-badge { justify-self: start; }
.cl-carte-lien h3 { font-size: clamp(1.7rem, 5.4vw, 2.4rem); color: #fbf3e4; }
.cl-carte-lien p { margin: 0; font: italic 400 1.05rem/1.55 var(--f-vers); color: rgba(246, 239, 226, .82); max-width: 36rem; }
.cl-carte-lien .cl-fleche { display: inline-flex; align-items: center; gap: .5rem; font: 600 .9rem/1 var(--f-ui); color: #f0ce8c; }
.cl-carte-lien .cl-lune { position: absolute; right: -1.6rem; bottom: -2rem; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fff6df 0%, #f0d9a8 40%, rgba(240, 206, 140, 0) 72%); opacity: .55; pointer-events: none; }
.cl-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .75rem; border-radius: 999px; font: 700 .7rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; background: #ffd86b; color: #2a1d00; }
.cl-carte-lien .cl-lien2 { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

/* contact */
.cl-contact { display: grid; gap: 1.4rem; }
@media (min-width: 860px) { .cl-contact { grid-template-columns: 1fr 1fr; align-items: start; gap: 3rem; } }
.cl-reseaux { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.cl-res { display: flex; align-items: center; gap: .85rem; min-height: 3.6rem; padding: .7rem 1rem; border-radius: 18px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre); text-decoration: none; transition: border-color .2s, transform .2s; }
.cl-res:hover { border-color: color-mix(in srgb, var(--rose) 45%, transparent); }
.cl-res:active { transform: scale(.98); }
.cl-res:focus-visible { outline: 3px solid color-mix(in srgb, var(--rose) 60%, transparent); outline-offset: 2px; }
.cl-res .ico { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--rose-voile); color: var(--rose); }
.cl-res .ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cl-res span:not(.ico) { display: grid; min-width: 0; }
.cl-res b { font: 600 .98rem/1.2 var(--f-ui); }
.cl-res small { font: 500 .8rem/1.3 var(--f-ui); color: var(--brume); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-res .sortie { margin-left: auto; width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--brume); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* la capture en grand (toucher une capture) */
.cl-zoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); background: rgba(5, 16, 20, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.cl-zoom.on { opacity: 1; }
.cl-zoom figure { margin: 0; display: grid; justify-items: center; gap: .7rem; max-height: 100%; }
.cl-zoom img { max-width: min(92vw, 26rem); max-height: calc(100dvh - 7rem); width: auto; height: auto; border-radius: 1.4rem; box-shadow: 0 0 0 1px rgba(163, 245, 255, .25); }
.cl-zoom figcaption { font: 500 .85rem/1.4 var(--f-ui); color: rgba(235, 245, 248, .82); text-align: center; max-width: 26rem; }
.cl-zoom button { position: absolute; top: calc(.8rem + env(safe-area-inset-top, 0px)); right: .8rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1rem; }

/* apparitions douces (seulement si les mouvements ne sont pas réduits) */
.cl-js .cl-monte { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.cl-js .cl-monte.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cl-js .cl-monte { opacity: 1; transform: none; transition: none; } .cl-zoom, .cl-carte-lien, .cl-tel .cl-loupe { transition: none; } }
html.mvt-reduit .cl-js .cl-monte, html.mvt-reduit.cl-js .cl-monte { opacity: 1; transform: none; transition: none; }

/* ---------- impression : la page se lit aussi sur papier ---------- */
@media print {
  .nav-g, .entete, .pied, .cl-actions, .cl-zoom, .aller-contenu { display: none !important; }
  .cl-nuit, .cl-exemple, .cl-carte-lien { background: #fff !important; color: #111 !important; box-shadow: none !important; }
  .cl-nuit *, .cl-exemple *, .cl-carte-lien * { color: #111 !important; }
  .cl-js .cl-monte { opacity: 1 !important; transform: none !important; }
  .cl-sec { break-inside: avoid; }
}

/* ============================================================
   Concept « Maison Lune Basse » (démonstration, aucun partenariat)
   Deux couleurs ajoutées à celles de Mots d'encre : l'or de lune basse et la porcelaine.
   ============================================================ */
.lb-corps { --lb-or: #f0d9a8; --lb-or2: #ffd79a; --lb-porcelaine: #f4efe4; --lb-nuit: #0d3033; }
.lb-bandeau { position: relative; z-index: 2; background: #162830; border-bottom: 1px solid rgba(255, 216, 107, .35); color: #f3eedf; }
.lb-bandeau .cl-mur { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-block: .8rem; }
.lb-bandeau p { margin: 0; flex: 1 1 16rem; font: 500 .84rem/1.45 var(--f-ui); color: rgba(243, 238, 223, .86); }
.lb-bandeau b { color: #ffd86b; font-weight: 700; }
.lb { color: var(--encre); }
.lb-heros { position: relative; padding-block: clamp(2rem, 6vw, 3.6rem) clamp(1.2rem, 3vw, 2rem); color: var(--cl-lavande); background: radial-gradient(90% 120% at 80% 0%, rgba(240, 217, 168, .16), transparent 55%), linear-gradient(180deg, #123b40 0%, var(--lb-nuit) 100%); }
.lb-heros .cl-sur { color: var(--lb-or); }
.lb-heros h1 { font-size: clamp(2.1rem, 7.6vw, 3.6rem); line-height: 1.04; max-width: 16ch; color: #fbf6ea; }
.lb-heros h1 em { font-style: normal; color: var(--lb-or); }
.lb-heros .cl-chapeau { color: rgba(235, 245, 248, .84); }
.lb-duree { margin: 1rem 0 0; font: 600 .78rem/1.4 var(--f-ui); letter-spacing: .04em; color: rgba(240, 217, 168, .8); }
.lb-parcours { padding-block: 1rem clamp(2.6rem, 7vw, 4rem); color: var(--cl-lavande); background: linear-gradient(180deg, var(--lb-nuit) 0%, #0a2528 100%); }
.lb-parcours .cl-mur { max-width: 46rem; }

/* les quatre étapes */
.lb-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; list-style: none; margin: 0 0 .9rem; padding: .6rem 0 0; scroll-margin-top: 4.4rem; }
.lb-etapes li { display: grid; justify-items: center; gap: .3rem; font: 600 .7rem/1.15 var(--f-ui); color: rgba(235, 245, 248, .5); text-align: center; position: relative; }
.lb-etapes li span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid rgba(235, 245, 248, .22); font: 400 .95rem/1 var(--f-titre); color: rgba(235, 245, 248, .7); background: rgba(255, 255, 255, .03); }
.lb-etapes li.on { color: var(--lb-or); }
.lb-etapes li.on span { border-color: var(--lb-or); color: #162830; background: var(--lb-or); }
.lb-etapes li.fait { color: rgba(235, 245, 248, .78); }
.lb-etapes li.fait span { border-color: rgba(163, 245, 255, .6); color: var(--cl-pervenche); }

/* la scène */
.lb-scene { position: relative; aspect-ratio: 360 / 250; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(240, 217, 168, .18), 0 28px 60px -30px rgba(0, 0, 0, .9); --lune: 0; background: #0d3033; }
.lb-dessin { display: block; width: 100%; height: 100%; }
.lb-lune { transform: translateY(calc(150px - var(--lune) * 96px)); transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.lb-reflet { opacity: calc(.45 + var(--lune) * .55); transition: opacity .5s; }
.lb-lueurs circle { opacity: 0; transition: opacity .8s ease; }
.lb-lueurs circle.on { opacity: 1; }
.lb-scene.eclaire .lb-porte { fill: #6b4a2c; transition: fill .8s; }
.lb-poisson { transform: translateY(46px); opacity: 0; transition: transform 1.6s cubic-bezier(.2, .8, .3, 1), opacity 1.2s ease; }
.lb-scene.remonte .lb-poisson { transform: none; opacity: 1; }
.lb-lanterne { position: absolute; width: 13%; aspect-ratio: 1; margin: -6.5% 0 0 -6.5%; display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lb-lanterne span { width: 34%; aspect-ratio: .78; border-radius: 45% 45% 40% 40%; background: #283f48; box-shadow: inset 0 0 0 1.5px rgba(240, 217, 168, .45); transition: background-color .5s, box-shadow .5s, transform .3s; }
.lb-lanterne::before { content: ""; position: absolute; top: 4%; left: 50%; width: 1px; height: 28%; background: rgba(240, 217, 168, .35); }
.lb-lanterne:not(.on) span { animation: lb-appel 2.4s ease-in-out infinite; }
.lb-lanterne.on span { background: #ffd79a; box-shadow: 0 0 14px 4px rgba(255, 196, 120, .55), inset 0 0 0 1.5px #fff1cf; }
.lb-lanterne:focus-visible { outline: 2px solid var(--lb-or); outline-offset: -2px; }
.lb-lanterne:active span { transform: scale(.88); }
.lb-scene:not([data-etape="1"]) .lb-lanterne { pointer-events: none; }
.lb-scene:not([data-etape="1"]) .lb-lanterne:not(.on) span { animation: none; }
@keyframes lb-appel { 50% { box-shadow: inset 0 0 0 1.5px rgba(240, 217, 168, .8), 0 0 10px 1px rgba(240, 217, 168, .35); } }

/* le panneau sous la scène */
.lb-panneau { margin-top: 1.1rem; }
.lb-pas { display: grid; gap: .55rem; justify-items: start; }
.lb-pas h3 { font: 400 clamp(1.5rem, 5vw, 1.9rem)/1.1 var(--f-titre); color: #fbf6ea; outline: none; margin: 0; }
.lb-ou { margin: 0; font: 600 .7rem/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--cl-pervenche); }
.lb-texte { margin: 0; font: 400 1.06rem/1.6 var(--f-vers); color: rgba(235, 245, 248, .88); }
.lb-texte b { color: var(--lb-or); font-weight: 600; }
.lb-etat { margin: 0; font: 600 .8rem/1.4 var(--f-ui); color: rgba(235, 245, 248, .66); }
.lb-parcours .btn { background: rgba(255, 255, 255, .07); border-color: rgba(240, 217, 168, .35); color: #fbf6ea; }
.lb-parcours .btn.plein { background: var(--lb-or); border-color: var(--lb-or); color: #162830; font-weight: 600; }
.lb-suite { margin-top: .4rem; }
.lb-curseur { display: grid; gap: .45rem; width: 100%; margin-top: .3rem; font: 600 .78rem/1.2 var(--f-ui); color: rgba(235, 245, 248, .7); }
.lb-curseur input { width: 100%; accent-color: var(--lb-or); height: 2rem; }
.lb-fiche { display: flex; gap: .9rem; align-items: flex-start; width: 100%; padding: .9rem; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(163, 245, 255, .2); }
.lb-fiche-ic { flex: none; width: 4.2rem; height: 4.2rem; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #2a6f76, #123b40); display: grid; place-items: center; }
.lb-fiche-ic svg { width: 3.6rem; height: 3.6rem; }
.lb-fiche > span:last-child { display: grid; gap: .25rem; min-width: 0; }
.lb-fiche b { font: 400 1.15rem/1.15 var(--f-titre); color: #fbf6ea; }
.lb-fiche small { font: 600 .74rem/1.3 var(--f-ui); color: var(--cl-pervenche); }
.lb-fiche em { font: italic 400 .96rem/1.5 var(--f-vers); color: rgba(235, 245, 248, .86); }
.lb-fiche i { font: 500 .74rem/1.4 var(--f-ui); font-style: normal; color: rgba(255, 216, 107, .9); }
.lb-feuilles { display: grid; gap: .5rem; width: 100%; margin-top: .2rem; }
.lb-feuilles.tremble { animation: lb-tremble .45s ease; }
@keyframes lb-tremble { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.lb-feuille { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 3.1rem; padding: .6rem .9rem; border-radius: 14px; border: 1px solid rgba(143, 199, 177, .35); background: rgba(143, 199, 177, .08); color: #eaf3ee; font: italic 400 1.02rem/1.35 var(--f-vers); text-align: left; transition: opacity .3s, transform .2s, border-color .2s; }
.lb-feuille svg { flex: none; width: 1.3rem; height: 1.3rem; fill: none; stroke: #8fc7b1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-feuille:active { transform: scale(.98); }
.lb-feuille:focus-visible { outline: 2px solid var(--lb-or); outline-offset: 2px; }
.lb-feuille.pose { opacity: .35; }
.lb-vers { min-height: 1.6em; margin: .4rem 0 0; font: italic 400 1.18rem/1.6 var(--f-vers); color: #fbf6ea; }
.lb-vers.fini { padding: .9rem 1.1rem; border-left: 2px solid var(--lb-or); background: rgba(240, 217, 168, .07); border-radius: 0 14px 14px 0; }
.lb-vers .lb-rate { font: 500 .86rem/1.4 var(--f-ui); font-style: normal; color: #ffb3c8; }
.lb-note { margin: 0; font: 500 .76rem/1.4 var(--f-ui); color: rgba(235, 245, 248, .6); }
.lb-souvenir { display: grid; justify-items: center; gap: .45rem; width: 100%; padding: 1.4rem 1rem 1.3rem; border-radius: 22px; text-align: center; background: radial-gradient(80% 90% at 50% 20%, rgba(240, 217, 168, .2), transparent 70%), rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(240, 217, 168, .28); }
.lb-tasse { width: 9rem; height: auto; }
.lb-vapeur path { animation: lb-vapeur 3.2s ease-in-out infinite; }
.lb-vapeur path:nth-child(2) { animation-delay: .6s; } .lb-vapeur path:nth-child(3) { animation-delay: 1.2s; }
@keyframes lb-vapeur { 0%, 100% { opacity: .2; transform: translateY(3px); } 50% { opacity: .8; transform: translateY(-3px); } }
.lb-rarete { display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: #ffd86b; color: #2a1d00; font: 700 .68rem/1.1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.lb-souvenir .lb-texte { font-style: italic; }
.lb-avertir { margin: .8rem 0 0; padding: .85rem 1rem; border-radius: 14px; border: 1px dashed rgba(255, 216, 107, .55); font: 500 .86rem/1.5 var(--f-ui); color: rgba(243, 238, 223, .9); }
.lb-avertir b { color: #ffd86b; }
.lb-fin { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }

/* la direction artistique */
.lb-nuancier { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .7rem; list-style: none; margin: 0 0 1.6rem; padding: 0; }
.lb-nuancier li { display: grid; gap: .2rem; padding: .75rem; border-radius: 16px; border: 1px solid var(--trait); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.lb-nuancier i { display: block; height: 3.2rem; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(127, 154, 160, .25); margin-bottom: .35rem; }
.lb-nuancier b { font: 400 1.05rem/1.2 var(--f-titre); }
.lb-nuancier span { font: 500 .76rem/1.35 var(--f-ui); color: var(--brume); }
.lb-da { max-width: 44rem; }
.lb-correspond { list-style: none; counter-reset: c; display: grid; gap: .8rem; margin: 0 0 1.6rem; padding: 0; max-width: 46rem; }
.lb-correspond li { counter-increment: c; display: grid; grid-template-columns: 2.2rem 1fr; gap: .1rem .8rem; }
.lb-correspond li::before { content: counter(c); grid-row: span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--trait); font: 400 1.05rem/1 var(--f-titre); color: var(--rose); }
.lb-correspond b { font: 400 1.2rem/1.3 var(--f-titre); }
.lb-correspond span { font: 400 .98rem/1.55 var(--f-vers); color: color-mix(in srgb, var(--encre) 86%, transparent); }

/* ce qui est techniquement possible */
.cp-liste { display: grid; gap: .9rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .cp-liste { grid-template-columns: 1fr 1fr; } }
.cp-liste li { padding: 1.1rem 1.15rem 1.2rem; border-radius: 18px; border: 1px solid var(--trait); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.cp-liste b { display: block; margin-bottom: .3rem; font: 400 1.2rem/1.25 var(--f-titre); }
.cp-liste p { margin: 0; font: 400 .98rem/1.55 var(--f-vers); color: color-mix(in srgb, var(--encre) 86%, transparent); }
.cp-liste code { font: 500 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: .12rem .35rem; border-radius: 6px; background: var(--rose-voile); color: var(--encre); white-space: nowrap; }
.cp-liste .cp-etat code { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cp-liste .cp-etat { display: inline-block; margin-top: .55rem; font: 700 .66rem/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--heure); }
.cp-liste.travail .cp-etat { color: var(--rose); }
.cp-non { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.cp-non li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; font: 400 1rem/1.55 var(--f-vers); }
.cp-non li::before { content: ""; width: 1rem; height: 1rem; margin-top: .3rem; border-radius: 50%; border: 1.5px solid var(--rose); background: linear-gradient(45deg, transparent 45%, var(--rose) 45%, var(--rose) 55%, transparent 55%); }

@media (prefers-reduced-motion: reduce) {
  .lb-lune, .lb-reflet, .lb-lueurs circle, .lb-poisson, .lb-lanterne span, .lb-feuille { transition: none; }
  .lb-lanterne:not(.on) span, .lb-vapeur path, .lb-feuilles.tremble { animation: none; }
}
html.mvt-reduit .lb-lune, html.mvt-reduit .lb-reflet, html.mvt-reduit .lb-lueurs circle, html.mvt-reduit .lb-poisson, html.mvt-reduit .lb-lanterne span { transition: none; }
html.mvt-reduit .lb-lanterne:not(.on) span, html.mvt-reduit .lb-vapeur path { animation: none; }