/* Passe « clarté » : rythme de la remontée, indication de l'exemple Sillon, Sobbo réel, vues du Salon,
   et allègement du rendu pendant le défilement. Chargée en dernier. */

/* ---------- rendu : pas de flou recalculé à chaque image au-dessus des scènes animées ---------- */
.top{background:rgb(233 242 239 / .94);-webkit-backdrop-filter:none;backdrop-filter:none}
.top[data-theme="deep"]{background:transparent}
.top[data-theme="salon"]{background:rgb(6 29 36 / .9)}
.suite-rail{background:rgb(233 242 239 / .9);-webkit-backdrop-filter:none;backdrop-filter:none}
.project-screen{will-change:transform}

/* ---------- la remontée : cinq hauteurs d'écran, puis l'exploration de Sillon ---------- */
.dive{height:730svh}
.anchor{top:500svh}

.ask{width:min(27rem,calc(100% - 2*var(--gut)))}
.ask-lead{margin:0 0 1.5rem;font-size:1rem;line-height:1.45;color:#cfe4e0;max-width:25rem}
.ask ol{gap:1.2rem}
.ask li{opacity:.3;transition:opacity .45s}
.ask li.on{opacity:1}
.ask li.done{opacity:.62}
/* La réponse garde toujours sa place : la liste ne change plus de hauteur. */
.ask .a,.ask li.on .a,.ask li.done .a{max-height:none;overflow:visible;opacity:0;transition:opacity .45s;min-height:1.45em}
.ask li.answered .a{opacity:1}

/* ---------- Sillon : ce que le visiteur regarde, et ce qu'il peut faire ---------- */
.example-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px 28px;padding:12px 2px 12px;min-height:66px}
.example-what{margin:0;display:flex;flex-direction:column;gap:1px;line-height:1.3;min-width:0}
.example-what h2{margin:0;font-size:1.08rem;font-weight:620;letter-spacing:-.015em;color:var(--encre)}
.example-what span{font-size:.9rem;color:#3d5a5e}
.example-actions{display:flex;align-items:center;gap:22px;flex:none}
.example-actions .workshop-open{grid-area:auto;font:inherit;font-size:.92rem;font-weight:560;background:var(--encre);color:#e9f2ef;border:0;border-radius:100px;padding:11px 20px;min-height:44px;cursor:pointer;white-space:nowrap}
.example-actions .journey-next{grid-area:auto;display:inline-flex;align-items:center;font-size:.92rem;font-weight:560;color:var(--encre);text-decoration:underline;text-decoration-color:var(--corail);text-underline-offset:6px;border:0;padding:12px 0;white-space:nowrap}
.frame-top{flex:1 1 0;height:auto;width:100%;min-height:0;align-self:stretch;border-radius:18px 18px 0 0}
.calm-toggle-end{font:inherit;font-size:.82rem;color:inherit;background:none;border:0;padding:10px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;position:static;opacity:1}

/* The inner page is the same screenshot that expands into the finished preview. */
.project-sobbo{
  --sobbo-open:0;
  --sobbo-site-width:min(60vw,calc((100svh - var(--top-h,64px) - 85px) * 1800 / 1280));
  --sobbo-site-x:65%;
  --sobbo-site-y:49%;
  --sobbo-shift:7vw;
  --sobbo-start-scale:.74;
  --sobbo-page-height:calc(var(--sobbo-site-width) * var(--sobbo-start-scale) * 1280 / 1800);
  --sobbo-page-width:calc(var(--sobbo-page-height) * 679 / 1317);
}
.sobbo-book{
  /* Only this stylesheet enables the decorative book hidden in the HTML. */
  display:block;position:absolute;left:calc(var(--sobbo-site-x) + var(--sobbo-shift) - var(--sobbo-page-width) / 2);
  top:calc(var(--sobbo-site-y) - var(--sobbo-page-height) / 2);
  width:var(--sobbo-page-width);height:var(--sobbo-page-height);pointer-events:none;
}
.sobbo-book-page{
  position:absolute;inset:0;z-index:2;border-radius:6px 14px 14px 6px;
  background:#8ba16f;box-shadow:1px 4px #506044,0 23px 44px -15px #50301b99;
  opacity:var(--project-objects);
}
.sobbo-book-leaf{
  position:absolute;inset:0;z-index:4;transform-style:preserve-3d;transform-origin:left center;
  transform:perspective(1200px) rotateY(calc(-165deg * var(--sobbo-open)));will-change:transform;
}
.sobbo-book-cover,.sobbo-book-lining{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  backface-visibility:hidden;opacity:var(--project-objects);
}
.sobbo-book-lining{
  transform:rotateY(180deg);overflow:hidden;padding:5% 6% 6%;
  border-radius:14px 6px 6px 14px;background:#6c8055;
  box-shadow:inset -8px 0 18px #34482a80;
}
.sobbo-book-lining img{display:block;width:100%;height:100%;object-fit:contain;background:#fbf8eb;border-radius:3px 2px 2px 3px}
html:not(.calm) .project-sobbo .project-screen{
  left:var(--sobbo-site-x);right:auto;top:var(--sobbo-site-y);width:var(--sobbo-site-width);
  transform-origin:50% 50%;
  transform:translate(-50%,-50%) translateX(calc((1 - var(--project-reveal)) * var(--sobbo-shift)))
    scale(calc(var(--sobbo-start-scale) + (1 - var(--sobbo-start-scale)) * var(--project-reveal)));
  clip-path:none;pointer-events:none;
}
html:not(.calm) .project-sobbo .project-image-open{
  /* 31.67% on either side leaves a 679:1317 page inside the 1800:1280 screenshot. */
  clip-path:inset(0 calc(31.67% * (1 - var(--project-reveal))) round 12px);
  opacity:clamp(0,calc((var(--sobbo-open) - .015) * 18),1);will-change:clip-path,opacity;
}
.project-sobbo .project-image-open:focus-visible{outline-offset:-4px}
.project-sobbo[data-scene="website"] .project-image-open{pointer-events:auto}
html:not(.calm) .project-sobbo .project-screen figcaption{position:absolute;inset:100% 0 auto;opacity:var(--project-detail)}
html:not(.calm) .project-sobbo .project-image-hint{opacity:var(--project-detail)}
.dialog-captures{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:28px;margin:30px 0 8px}
.dialog-captures figure{margin:0}
.dialog-captures img{display:block;width:100%;height:auto;border:6px solid #181713;border-radius:30px;background:#181713}
.dialog-captures figcaption{margin-top:10px;font-size:.85rem;line-height:1.4}

/* ---------- Salon : trois vues nommées, visibles dès l'arrivée ---------- */
.salon-views{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.project-salon .project-description{display:none}
.salon-views button{font:inherit;font-size:.95rem;font-weight:540;min-height:44px;padding:9px 18px;border-radius:999px;border:1px solid rgb(237 244 239 / .45);background:transparent;color:inherit;cursor:pointer;text-align:left}
.salon-views button:hover{background:rgb(237 244 239 / .12)}
.salon-views button[aria-pressed="true"]{background:#edf4ef;color:#103d3e;border-color:#edf4ef}
.project-salon .project-open{margin-bottom:0}
.project-salon-crop{display:grid;place-items:center;position:relative;aspect-ratio:2056/1175;overflow:hidden;background:transparent}
.project-salon-crop img{position:static;display:block;width:100%;height:auto;object-fit:contain;transform:none}
.project-salon .project-image-hint{top:14px;bottom:auto;width:auto;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border-radius:999px;font-size:.78rem;font-weight:600}
.project-screen-salon figcaption .salon-view-name{font-weight:600;opacity:1}
.project-screen-salon figcaption{font-size:.8rem;opacity:.9}
.dialog-views{flex-direction:row;flex-wrap:wrap;margin:0;padding:16px 24px 0}
.dialog-views[hidden]{display:none}
.dialog-views button{border-color:#153d3e66}
.dialog-views button:hover{background:#153d3e14}
.dialog-views button[aria-pressed="true"]{background:#153d3e;color:#edf4ef;border-color:#153d3e}

@media(max-width:1000px) and (min-width:721px){
  .example-what span{display:none}
  .salon-views button{font-size:.85rem;padding:8px 13px}
}
@media(max-height:600px) and (min-width:721px){
  .project-salon .project-context{top:20px}
  .project-salon .project-index{display:none}
  .project-salon .project-context h3{font-size:clamp(1.7rem,3.5vw,2.7rem);margin-bottom:10px}
  .project-salon .project-context h3 br{display:none}
  .project-salon .project-intent{font-size:.94rem;margin-bottom:12px}
  .project-screen-salon{top:calc((100svh - var(--top-h))/2);left:auto;right:max(4%,48px);width:min(64%,calc((100svh - var(--top-h) - 60px) * 2056 / 1175))}
}
/* Même sous la hauteur minimale de la scène, garder du défilement pour consulter les vues avant le globe. */
@media(max-height:600px){
  .project-salon{height:calc(max(125svh, var(--scene-min) + 30svh) + var(--passage-len))}
}
@media(max-width:720px){
  .ask{bottom:26px}
  .ask-lead{font-size:.9rem;margin-bottom:.9rem}
  .ask ol{gap:.7rem}
  .ask .q{font-size:1.2rem}
  .ask .a{font-size:.9rem;margin-top:.15rem}
  .example-bar{flex-direction:column;align-items:stretch;gap:8px;padding:10px 0 10px}
  .example-what h2{font-size:.98rem}
  .example-what span{font-size:.82rem}
  .example-actions{justify-content:space-between;gap:10px}
  .example-actions .workshop-open{font-size:.86rem;padding:9px 16px;min-height:42px}
  .example-actions .journey-next{font-size:.86rem;padding:10px 0}
  .frame-top{border-radius:14px 14px 0 0}
  .project-sobbo{--sobbo-site-width:90vw;--sobbo-site-x:50%;--sobbo-site-y:clamp(349px,65%,500px);--sobbo-shift:7vw;--sobbo-start-scale:.91}
  .project-sobbo .project-status{max-width:none}
  .project-salon .project-context h3{font-size:1.9rem;max-width:none;margin-bottom:8px}
  .project-salon .project-context h3 br{display:none}
  .project-salon .project-intent,.project-salon .project-open{display:none}
  .salon-views{flex-direction:row;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
  .salon-views button{font-size:.82rem;padding:8px 12px;min-height:42px}
  .project-salon .project-status{margin-top:0}
  .project-screen-salon{top:max(57%,356px)}
  .project-salon .project-image-hint{top:9px}
  .project-screen-salon figcaption{font-size:.7rem}
  .project-screen-salon figcaption .salon-view-note{text-align:right}
  .dialog-views{padding:12px 14px 0}
  .dialog-views:not([hidden]) + .project-dialog-view img{min-width:0}
  .dialog-captures{gap:16px}
}

/* ---------- mouvements réduits ---------- */
html.calm .ask li{opacity:1}
html.calm .ask .a{opacity:1;color:#2c4a4e}
html.calm .ask-lead{color:#3d5a5e}
html.calm .example-bar{padding-top:18px}
html.calm .frame-top{flex:none}
html.calm .sobbo-book{
  --sobbo-open:0;--project-objects:1;position:relative;inset:auto;
  width:min(36vw,172px);height:auto;aspect-ratio:679/1317;margin:32px auto 0;
}
html.calm .sobbo-book-leaf{will-change:auto}
@media(max-height:600px) and (min-width:721px){
  .project-sobbo{--sobbo-site-y:calc((100svh - var(--top-h,64px) - 20px) / 2)}
}
@media(max-height:600px) and (max-width:720px){
  .project-sobbo{--sobbo-site-width:clamp(120px,calc((100svh - 314px) * 1800 / 1280),84vw);--sobbo-site-y:calc((100svh - var(--top-h,56px) + 197px) / 2)}
  html:not(.calm) .project-sobbo .project-context{top:12px}
  html:not(.calm) .project-sobbo .project-kind{margin-bottom:6px}
  html:not(.calm) .project-sobbo h3{margin-bottom:7px}
  html:not(.calm) .project-sobbo .project-intent{margin-bottom:6px}
  html:not(.calm) .project-sobbo .project-screen figcaption{margin-top:7px}
}
@media(max-height:520px) and (max-width:720px){
  .project-sobbo{--sobbo-site-y:calc((100svh - var(--top-h,56px) + 211px) / 2)}
  html:not(.calm) .project-sobbo .project-context{top:8px}
  html:not(.calm) .project-sobbo h3{font-size:2.85rem}
  html:not(.calm) .project-sobbo .project-open{min-height:42px}
  html:not(.calm) .project-sobbo .project-status{margin-top:5px}
}
@media(prefers-reduced-motion:reduce){.ask li,.ask .a{transition:none}}

/* ---------- cartographie : le surtitre s'efface avec le premier titre, l'en-tête garde un fond ---------- */
.maps-overview .maps-kicker{opacity:var(--map-intro)}

/* ---------- fenêtres basses et paysage : une seule hauteur minimale pour toutes les scènes épinglées,
   afin que la fin du passage et le début de la cartographie restent superposés ---------- */
:root{--scene-min:590px}
@media(max-width:720px){:root{--scene-min:600px}}
@media(max-height:700px) and (min-width:721px){:root{--scene-min:500px}}
.project-stage{min-height:var(--scene-min)}
.maps-chapter .maps-pin{min-height:var(--scene-min)}
.maps-chapter{margin-top:calc(-1*max(100svh - var(--top-h,64px), var(--scene-min)));background:linear-gradient(transparent max(100svh - var(--top-h,64px), var(--scene-min)),#061d24 0)}
html.calm .project-stage{min-height:0}
html.calm .maps-chapter .maps-pin{min-height:0}
html.calm .maps-chapter{margin-top:0;background:#061d24}

/* ---------- mouvements réduits : toujours pouvoir les rétablir ---------- */
.calm-restore{display:none}
html.calm .calm-toggle.calm-restore{display:inline-flex;align-items:center;position:fixed;left:16px;right:auto;top:auto;bottom:16px;z-index:30;min-height:44px;padding:10px 18px;border-radius:999px;background:#0e2f33;color:#e9f2ef;border:1px solid rgb(233 242 239 / .35);text-decoration:none;font-size:.85rem;font-weight:560;opacity:1;box-shadow:0 6px 24px rgb(0 0 0 / .25)}
html.calm .calm-toggle.calm-restore:hover{background:#174247}
html.calm .calm-toggle.calm-restore:focus-visible{outline:3px solid var(--corail);outline-offset:3px}
html.calm .pin .calm-toggle{display:none}