/* =====================================================================
   FROST STUDIO — section (03) « Ce que Frost construit » (atelier.css)
   Direction « L'Atelier » : un seul site fictif traverse quatre postes —
   DESIGN (plan en fond, site découvert au curseur), MOTION (site vivant,
   vidéo), SYSTEMS (back-office sans défilement), INTELLIGENCE (Jensen).
   Desktop : scène épinglée, rail des mots à gauche, établi à droite avec
   quatre widgets superposés (`data-station` choisit le visible).
   Progressions écrites par atelier.js : `--p1` entrée, `--pz` sortie.
   Mobile : quatre blocs empilés, un widget chacun.
   ===================================================================== */

.atelier { position: relative; height: 560vh; height: 560svh; background: var(--ob-0); color: var(--bone); --p1: 0; --pz: 0; }
.atelier__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: var(--ob-0);
  display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 66%); align-items: center; column-gap: clamp(1.5rem, 3.4vw, 3.6rem);
  padding: 0 var(--gutter);
}

/* ---------- Colonne texte : étiquette, titre, rail ---------- */
.atelier__copy { display: grid; gap: 1.5rem; align-content: center; opacity: calc(1 - var(--pz)); transform: translateY(calc(var(--pz) * -24px)); }
.atelier__label { margin: 0; font-size: .64rem; color: var(--bone-soft); }
.atelier__title { margin: 0; }
.atelier__line { display: block; }
.atelier__line--sans { font-size: clamp(1.8rem, 3.1vw, 3.3rem); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.atelier__line--serif { font: italic clamp(1.4rem, 2.5vw, 2.7rem)/1 var(--font-serif); margin: -.02em 0 0 clamp(.3rem, 1.6vw, 1.4rem); color: rgba(233,228,220,.94); }

.atelier__rail { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.atelier__station { display: grid; }
.atelier__word {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; color: var(--bone-faint);
  font-family: var(--font-display); font-size: clamp(1.9rem, 4.2vw, 4.4rem); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96;
  line-height: .92; letter-spacing: -.02em; text-transform: uppercase;
  transition: color .55s var(--ease-out);
}
.atelier__word:hover { color: var(--bone-soft); }
.atelier__station[aria-current="true"] .atelier__word { color: var(--bone); }
.atelier__station[aria-current="true"] .atelier__word::after { content: ""; display: inline-block; width: .42em; height: .42em; margin: 0 0 .06em .28em; border-radius: 50%; background: var(--cold); vertical-align: baseline; box-shadow: 0 0 18px rgba(185,198,214,.55); }
.atelier__desc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease-out), opacity .45s var(--ease-out); }
.atelier__desc > div { overflow: hidden; }
.atelier__station[aria-current="true"] .atelier__desc { grid-template-rows: 1fr; opacity: 1; transition-delay: .05s; }
.atelier__sentence { margin: .5rem 0 0; max-width: 24rem; font-size: clamp(.92rem, 1vw, 1.05rem); line-height: 1.5; color: var(--bone-soft); }
.atelier__tags { margin: .5rem 0 .4rem; font-size: .58rem; color: var(--bone-faint); }
.atelier__demo { display: none; }

/* ---------- Établi : cadre + widgets superposés ---------- */
.atelier__bench {
  position: relative; width: 100%; max-height: 82svh; aspect-ratio: 16 / 10; justify-self: end;
  border-radius: calc(8px + var(--pz) * 22%); overflow: hidden; background: var(--ob-1);
  box-shadow: 0 0 0 1px rgba(233,228,220,.14), 0 40px 90px -40px rgba(0,0,0,.9);
  transform: translate(calc((1 - var(--p1)) * -3vw), calc((1 - var(--p1)) * 34vh)) scale(calc((.22 + .78 * var(--p1)) * (1 - .86 * var(--pz))));
  transform-origin: 50% 50%; will-change: transform;
}
.atelier__w { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: opacity .55s var(--ease-out), visibility 0s .55s; }
.atelier[data-station="0"] .atelier__w--design, .atelier[data-station="1"] .atelier__w--motion, .atelier[data-station="2"] .atelier__w--dash, .atelier[data-station="3"] .atelier__w--ai { visibility: visible; opacity: 1; transition-delay: 0s; }
canvas.atelier__w { display: block; }
.atelier__bench::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(233,228,220,.08); border-radius: inherit; }
.atelier__tile { position: absolute; inset: 0; width: 100%; height: 100%; padding: 22%; color: var(--bone); background: var(--ob-0); opacity: var(--pz); pointer-events: none; z-index: 5; }
.atelier__cursorhint { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); font-size: .56rem; color: var(--bone-faint); opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 4; }
.atelier[data-station="0"] .atelier__bench:hover .atelier__cursorhint, .atelier[data-station="1"] .atelier__bench:hover .atelier__cursorhint { opacity: 1; }

/* ====================================================================
   SYSTEMS — tableau de bord (scopé .dash) : tient dans l'établi sans défilement
   ==================================================================== */
/* ---------- SYSTEMS — back-office Ondine (scopé .dash) ----------
   Dessiné à 1600 × 1000 (base 16 px, tout en em) et mis à l'échelle de l'établi par `--k` (atelier.js) : la composition
   est identique sur tous les écrans et reste lisible — retour d'Axel (v22.2) : « aéré, qu'on voit tout correctement ».
   Mobile : même DOM, pas d'échelle, base réduite, mise en page en colonne. */
.dash { --sand: #d8c3a5; position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform: scale(var(--k, 1)); transform-origin: 0 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); background: linear-gradient(180deg, #08090c, #050507); color: var(--bone); font-size: 16px; line-height: 1.4; overflow: hidden; }
.dash *, .dash *::before, .dash *::after { box-sizing: border-box; }
.dash button { font: inherit; color: inherit; }
.dash__eyebrow { display: block; font-family: var(--font-mono); font-size: .68em; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-faint); }
.dash__side { display: grid; grid-template-rows: auto 1fr auto; gap: 2em; padding: 1.8em 1.2em 1.6em; border-right: 1px solid rgba(233,228,220,.08); background: rgba(233,228,220,.02); }
.dash__brand { display: grid; gap: .3em; padding: 0 .6em; }
.dash__brand i { font: italic 2em/1 var(--font-serif); }
.dash__brand span { font-family: var(--font-mono); font-size: .68em; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint); }
.dash__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25em; align-content: start; }
.dash__side li button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .8em .9em; border: 0; border-radius: .5em; background: none; text-align: left; font-family: var(--font-display); font-size: 1em; font-weight: 500; color: var(--bone-soft); cursor: pointer; transition: background .2s, color .2s; }
.dash__side li button:hover { background: rgba(233,228,220,.05); color: var(--bone); }
.dash__side li button.is-on { background: rgba(216,195,165,.1); color: var(--bone); box-shadow: inset 3px 0 0 var(--sand); }
.dash__side li button em { font-style: normal; background: var(--sand); color: #0a0a0d; border-radius: 1em; padding: .1em .55em; font-size: .72em; font-weight: 700; }
.dash__user { display: flex; align-items: center; gap: .7em; padding: 0 .5em; }
.dash__user b { display: block; font-size: 1em; font-weight: 700; }
.dash__user small { font-family: var(--font-mono); font-size: .68em; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
.dash__av { display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(216,195,165,.16); color: var(--bone); font: 700 .78em/1 var(--font-display); letter-spacing: .04em; flex: none; }
.dash__av--lg { width: 3.2em; height: 3.2em; font-size: 1.05em; }
.dash__main { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.dash__top { display: flex; align-items: center; gap: 1em; padding: 1em 1.8em; border-bottom: 1px solid rgba(233,228,220,.08); }
.dash__search { flex: 1; max-width: 30em; }
.dash__search input { width: 100%; padding: .65em 1em; border: 1px solid rgba(233,228,220,.1); border-radius: .5em; background: rgba(233,228,220,.035); color: var(--bone); font: 500 1em var(--font-display); outline: none; }
.dash__search input:focus { border-color: rgba(216,195,165,.6); }
.dash__date { margin-left: auto; font-family: var(--font-mono); font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
.dash__btn { padding: .7em 1.2em; border: 1px solid rgba(233,228,220,.18); border-radius: 999px; background: none; font-family: var(--font-mono); font-size: .72em; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .2s; white-space: nowrap; }
.dash__btn:hover { background: rgba(233,228,220,.06); transform: translateY(-1px); }
.dash .dash__btn--primary { background: var(--bone); color: #0a0a0d; border-color: var(--bone); }
.dash .dash__btn--primary:hover { background: #fff; }
.dash__btn--wide { width: 100%; text-align: center; margin-top: .8em; }
.dash__view { padding: 1.5em 1.8em; overflow: hidden; min-height: 0; }
.dash__demo { margin: 0; padding: .6em 1.8em; border-top: 1px solid rgba(233,228,220,.06); font-family: var(--font-mono); font-size: .62em; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
/* --- tableau de bord --- */
.dash__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1em; margin-bottom: 1.4em; }
.dash__kpi { position: relative; display: grid; gap: .6em; padding: 1.7em 1.5em 1.6em; border: 1px solid rgba(233,228,220,.08); border-radius: .75em; background: linear-gradient(160deg, rgba(233,228,220,.04), rgba(233,228,220,.01)); }
.dash__kpi strong { font-size: 2.8em; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.dash__delta { font-family: var(--font-mono); font-size: .75em; color: var(--sand); }
.dash__delta em { font-style: normal; color: var(--bone-faint); }
.dash__kpi svg { position: absolute; right: 1.2em; bottom: 1.2em; width: 5.5em; height: 1.7em; fill: none; stroke: rgba(216,195,165,.7); stroke-width: 1.5; }
.dash__cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1em; }
.dash__stack { display: grid; gap: 1em; align-content: start; }
.dash__panel { padding: 1.4em 1.5em; border: 1px solid rgba(233,228,220,.08); border-radius: .75em; background: rgba(233,228,220,.02); }
.dash__panel h4 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .7em; font: italic 400 1.5em/1 var(--font-serif); }
.dash__panel h4 span { font-family: var(--font-mono); font-size: .45em; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
.dash__two { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.dash__list { list-style: none; margin: 0; padding: 0; display: grid; }
.dash__list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9em; padding: .85em .6em; border-radius: .5em; cursor: pointer; transition: background .2s; }
.dash__list li:hover { background: rgba(233,228,220,.05); }
.dash__list b { display: block; font-size: 1em; font-weight: 700; }
.dash__list small { display: block; font-family: var(--font-mono); font-size: .68em; color: var(--bone-faint); letter-spacing: .06em; margin-top: .15em; }
.dash__list--tight li { padding: .6em .3em; grid-template-columns: auto 1fr; }
.dash__list--tight .dash__chip { display: none; }
.dash__none { color: var(--bone-faint); font-size: .9em; cursor: default; }
.dash__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5em; height: 9.5em; align-items: end; }
.dash__week div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: .35em; text-align: center; }
.dash__week i { align-self: end; display: block; height: calc(var(--o) * 100%); min-height: 3px; border-radius: 3px 3px 0 0; background: rgba(233,228,220,.22); }
.dash__week .is-today i { background: var(--sand); }
.dash__week span { font-family: var(--font-mono); font-size: .68em; color: var(--bone-faint); }
.dash__week .is-today span { color: var(--bone); }
.dash__chip { display: inline-block; padding: .3em .7em; border-radius: 999px; font-family: var(--font-mono); font-size: .66em; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.dash__chip--confirmed { background: rgba(216,195,165,.16); color: var(--sand); }
.dash__chip--pending { background: rgba(185,198,214,.14); color: var(--cold); }
.dash__chip--cancelled { background: rgba(233,228,220,.06); color: var(--bone-faint); text-decoration: line-through; }
/* --- réservations --- */
.dash__filters { display: flex; align-items: center; gap: .5em; margin-bottom: 1em; }
.dash__filter { padding: .5em .9em; border: 1px solid rgba(233,228,220,.12); border-radius: 999px; background: none; font-family: var(--font-mono); font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-soft); cursor: pointer; }
.dash__filter.is-on { background: rgba(216,195,165,.12); border-color: rgba(216,195,165,.5); color: var(--bone); }
.dash__count { margin-left: auto; font-family: var(--font-mono); font-size: .72em; color: var(--bone-faint); }
.dash__table { width: 100%; border-collapse: collapse; }
.dash__table th { text-align: left; padding: .6em .7em; border-bottom: 1px solid rgba(233,228,220,.1); }
.dash__table th button { border: 0; background: none; padding: 0; font-family: var(--font-mono); font-size: .68em; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); cursor: pointer; }
.dash__table th button.is-on { color: var(--sand); }
.dash__table td { padding: 1.05em .8em; border-bottom: 1px solid rgba(233,228,220,.05); vertical-align: middle; white-space: nowrap; }
.dash__table td:first-child { display: flex; align-items: center; gap: .7em; font-weight: 700; }
.dash__table td:last-child { text-align: right; font-family: var(--font-mono); font-size: .85em; }
.dash__table tbody tr { cursor: pointer; transition: background .2s; }
.dash__table tbody tr:hover { background: rgba(233,228,220,.05); }
.dash__more { margin: .6em .7em 0; font-family: var(--font-mono); font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-faint); }
/* --- clients --- */
.dash__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
.dash__card { display: grid; gap: .35em; padding: 1.8em 1.5em; border: 1px solid rgba(233,228,220,.08); border-radius: .75em; background: rgba(233,228,220,.02); }
.dash__card b { font-size: 1.05em; margin-top: .6em; }
.dash__card small { font-family: var(--font-mono); font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-faint); }
.dash__meta { font-size: .9em; line-height: 1.5; color: var(--bone-soft); margin-top: .4em; }
/* --- planning --- */
.dash__plan { display: grid; grid-template-columns: minmax(0, 1fr) 22em; gap: 1.2em; height: 100%; }
.dash__cal { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.dash__month { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7em; font: italic 400 1.5em/1 var(--font-serif); }
.dash__legend { font-family: var(--font-mono); font-size: .45em; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-faint); display: flex; gap: .9em; align-items: center; }
.dash__legend i { width: .75em; height: .75em; border-radius: 2px; display: inline-block; margin-right: .35em; }
.dash__legend .l0 { background: rgba(233,228,220,.06); } .dash__legend .l3 { background: var(--sand); }
.dash__grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: .4em; min-height: 0; }
.dash__dow { text-align: center; font-family: var(--font-mono); font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-faint); padding-bottom: .3em; }
.dash__day { position: relative; display: grid; grid-template-rows: auto 1fr; gap: .35em; padding: .55em .6em .7em; min-height: 0; border: 1px solid rgba(233,228,220,.07); border-radius: .5em; background: rgba(233,228,220,.02); text-align: left; cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; }
.dash__day:hover { border-color: rgba(216,195,165,.5); background: rgba(233,228,220,.04); }
.dash__daynum { font-size: 1em; font-weight: 500; color: var(--bone-soft); }
.dash__day.is-today .dash__daynum { color: var(--bone); font-weight: 700; }
.dash__day.is-today::after { content: ""; position: absolute; top: .6em; right: .6em; width: .35em; height: .35em; border-radius: 50%; background: var(--sand); }
.dash__day.is-sel { border-color: var(--sand); box-shadow: 0 0 0 1px var(--sand) inset; background: rgba(216,195,165,.06); }
.dash__day.is-full .dash__daynum { color: var(--sand); }
.dash__rooms { display: flex; flex-wrap: wrap; gap: .25em; align-content: flex-start; }
.dash__rooms i, .dash__roomlist i { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.25em; padding: 0 .35em; border-radius: 3px; font: 700 .62em/1 var(--font-mono); letter-spacing: .04em; font-style: normal; }
.dash__rooms i.r0, .dash__roomlist i.r0 { background: rgba(216,195,165,.85); color: #0a0a0d; }
.dash__rooms i.r1, .dash__roomlist i.r1 { background: rgba(185,198,214,.7); color: #0a0a0d; }
.dash__rooms i.r2, .dash__roomlist i.r2 { background: rgba(233,228,220,.55); color: #0a0a0d; }
.dash__rooms i.r3, .dash__roomlist i.r3 { background: rgba(233,228,220,.18); }
.dash__occ { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform: scaleX(var(--o)); transform-origin: left; background: var(--sand); opacity: .8; }
.dash__empty { display: block; }
.dash__dayside { display: grid; align-content: start; gap: .5em; padding: 1.2em; border: 1px solid rgba(233,228,220,.08); border-radius: .75em; background: rgba(233,228,220,.02); min-height: 0; overflow: hidden; }
.dash__dayside h3 { margin: 0 0 .5em; font: italic 400 2.6em/1 var(--font-serif); }
.dash__dayside h3 i { font-size: .5em; color: var(--bone-soft); }
.dash__roomlist { list-style: none; margin: 0 0 .4em; padding: 0; display: grid; gap: .3em; }
.dash__roomlist li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7em; padding: .5em 0; border-bottom: 1px solid rgba(233,228,220,.06); }
.dash__roomlist b { display: block; font-size: .95em; font-weight: 700; }
.dash__roomlist small { display: block; font-family: var(--font-mono); font-size: .68em; color: var(--bone-faint); letter-spacing: .06em; margin-top: .1em; }
.dash__roomlist em { font-family: var(--font-mono); font-style: normal; font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: var(--sand); }
.dash__form { display: grid; gap: .6em; margin-top: .4em; padding-top: .8em; border-top: 1px solid rgba(216,195,165,.3); }
.dash__form label { display: grid; gap: .3em; font-family: var(--font-mono); font-size: .68em; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
.dash__form input, .dash__form select { padding: .65em .8em; border: 1px solid rgba(233,228,220,.14); border-radius: .5em; background: rgba(5,5,7,.6); color: var(--bone); font: 500 1.35em var(--font-display); outline: none; }
.dash__form input:focus, .dash__form select:focus { border-color: rgba(216,195,165,.6); }
.dash__form select option { background: #0a0a0d; }
.dash__actions { display: flex; gap: .6em; margin-top: .3em; }
/* --- statistiques --- */
.dash__charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.dash__charts canvas { width: 100%; height: auto; display: block; }
.dash__kpis--tiles { margin-top: 1.1em; }
/* --- fiche, message --- */
.dash__drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 24em; padding: 1.5em; border-left: 1px solid rgba(233,228,220,.1); background: rgba(7,8,10,.98); box-shadow: -30px 0 60px -30px rgba(0,0,0,.8); animation: dash-drawer .5s var(--ease-out) both; z-index: 3; }
.dash__drawer header { display: flex; justify-content: space-between; align-items: center; }
.dash__x { border: 0; background: none; color: var(--bone-soft); font-size: 1.4em; line-height: 1; cursor: pointer; }
.dash__drawer h3 { margin: 1em 0 .1em; font: italic 400 2em/1 var(--font-serif); }
.dash__drawer > small { font-family: var(--font-mono); font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-faint); }
.dash__drawer dl { display: grid; gap: .9em; margin: 1.3em 0; }
.dash__drawer dt { font-family: var(--font-mono); font-size: .68em; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
.dash__drawer dd { margin: .2em 0 0; font-size: 1em; }
.dash__toast { position: absolute; left: 50%; bottom: 3em; transform: translateX(-50%); padding: .7em 1.1em; border-radius: 999px; background: var(--bone); color: #0a0a0d; font-family: var(--font-mono); font-size: .68em; letter-spacing: .12em; text-transform: uppercase; animation: dash-toast .4s var(--ease-out) both; z-index: 4; white-space: nowrap; }
@keyframes dash-drawer { from { transform: translateX(24px); opacity: 0; } }
@keyframes dash-toast { from { transform: translate(-50%, 10px); opacity: 0; } }
@keyframes dash-in { from { opacity: 0; transform: translateY(10px); } }
.dash--in .dash__kpi, .dash--in .dash__panel, .dash--in .dash__card, .dash--in .dash__table tbody tr { animation: dash-in .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* ====================================================================
   INTELLIGENCE — concierge (scopé .ai)
   ==================================================================== */
/* composé à 1140 px de large (sa taille sur un écran de 1920) et mis à l'échelle de l'établi par --k (atelier.js), comme le
   back-office : même composition partout, plus de débordement sur une petite fenêtre CSS (écran 2560 à 200 %, portable) */
.ai { position: absolute; left: 0; top: 0; width: calc(100% / var(--k, 1)); height: calc(100% / var(--k, 1)); transform: scale(var(--k, 1)); transform-origin: 0 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--ob-0); color: var(--bone); font-size: 12px; overflow: hidden; }
.ai *, .ai *::before, .ai *::after { box-sizing: border-box; }
.ai__chat { display: grid; grid-template-rows: auto 1fr auto auto; min-height: 0; border-right: 1px solid rgba(233,228,220,.1); }
.ai__chat header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(233,228,220,.1); }
.ai__chat header b { display: block; font-size: 13px; }
.ai__chat header small { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
.ai__local { margin-left: auto; font-family: var(--font-mono); font-size: 6.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-faint); text-align: right; max-width: 40%; }
.ai__five { margin: 8px 0 0; font-size: 10px; line-height: 1.4; color: var(--bone-soft); }
.ai__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cold); box-shadow: 0 0 14px rgba(185,198,214,.8); animation: ai-dot 2.4s ease-in-out infinite; will-change: opacity; }
@keyframes ai-dot { 50% { opacity: .45; } }
.ai__log { padding: 14px 18px; overflow: auto; display: grid; gap: 8px; align-content: start; min-height: 0; scrollbar-width: thin; }
.ai__msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; line-height: 1.45; font-size: 12.5px; animation: dash-in .45s var(--ease-out) both; }
.ai__msg--bot { justify-self: start; background: rgba(233,228,220,.06); border: 1px solid rgba(233,228,220,.08); border-bottom-left-radius: 4px; }
.ai__msg--user { justify-self: end; background: rgba(185,198,214,.16); border: 1px solid rgba(185,198,214,.25); border-bottom-right-radius: 4px; }
.ai__think { color: var(--bone-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.ai__caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--cold); vertical-align: -2px; animation: ai-caret .8s steps(2) infinite; will-change: opacity; }
@keyframes ai-caret { 50% { opacity: 0; } }
.ai__ex { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; }
.ai__ex button { max-width: 100%; padding: 6px 10px; border: 1px solid rgba(233,228,220,.14); border-radius: 999px; background: none; color: var(--bone-soft); font: 500 10px var(--font-display); text-align: left; cursor: pointer; transition: border-color .25s, color .25s; }
.ai__ex button:hover { border-color: rgba(185,198,214,.6); color: var(--bone); }
.ai__form { display: flex; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid rgba(233,228,220,.08); }
.ai__form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid rgba(233,228,220,.14); border-radius: 8px; background: rgba(233,228,220,.04); color: var(--bone); font: 500 12.5px var(--font-display); outline: none; }
.ai__form input:focus { border-color: rgba(185,198,214,.6); }
.ai__send { padding: 0 16px; border: 0; border-radius: 8px; background: var(--bone); color: #0a0a0d; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.ai__side { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.ai__field { display: block; width: 100%; height: 100%; min-height: 0; }
.ai__brief { margin: 0 14px 14px; padding: 12px 14px; border: 1px solid rgba(185,198,214,.5); border-radius: 10px; background: rgba(9,10,14,1); box-shadow: 0 0 40px -10px rgba(185,198,214,.35); animation: dash-in .5s var(--ease-out) both; }
.ai__eyebrow { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cold); }
.ai__brief dl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 10px; margin: 8px 0; }
.ai__brief dt { font-family: var(--font-mono); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
.ai__brief dd { margin: 1px 0 0; font-size: 11px; font-weight: 700; }
.ai__reco { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(233,228,220,.12); }
.ai__reco small { display: block; font-family: var(--font-mono); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
.ai__reco b { font-size: 14px; font-weight: 800; color: var(--cold); }
.ai__lead { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(233,228,220,.12); }
.ai__lead .ai__eyebrow, .ai__lead input[name="name"], .ai__lead .ai__sendbrief, .ai__lead .ai__leadmsg { grid-column: 1 / -1; }
.ai__lead input { min-width: 0; padding: 8px 10px; border: 1px solid rgba(233,228,220,.14); border-radius: 8px; background: rgba(233,228,220,.04); color: var(--bone); font: 500 11px var(--font-display); }
.ai__lead input:focus { outline: 0; border-color: rgba(185,198,214,.6); }
.ai__lead .ai__sendbrief { margin-top: 2px; }
.ai__lead .ai__sendbrief:disabled { opacity: .5; cursor: default; }
.ai__leadmsg { display: block; min-height: 1em; font-size: 9.5px; line-height: 1.35; color: var(--bone-soft); }
.ai__leadmsg:empty { display: none; }
.ai__leadok { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(185,198,214,.35); font-size: 11px; line-height: 1.4; color: var(--cold); }
.ai__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ai__sendbrief { margin-top: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 999px; background: var(--bone); color: #0a0a0d; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

/* ---------- Tablette ---------- */
@media (max-width: 1023px) and (min-width: 768px) {
  .atelier__stage { grid-template-columns: minmax(0, 40%) minmax(0, 60%); }
  .atelier__word { font-size: clamp(1.7rem, 4.6vw, 3rem); }
  .dash { grid-template-columns: 140px 1fr; font-size: 11px; }
  .dash__kpis { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Mobile : quatre blocs, pas d'épinglage, un widget par bloc ---------- */
@media (max-width: 767px), (pointer: coarse) and (max-height: 520px) {
  .atelier { height: auto; }
  .atelier__stage { position: relative; height: auto; overflow: visible; display: block; padding: 14vh var(--gutter) 6vh; }
  .atelier__copy { gap: 1.2rem; opacity: 1; transform: none; }
  .atelier__line--sans { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .atelier__line--serif { font-size: clamp(1.7rem, 8.5vw, 2.4rem); margin-left: .8rem; }
  .atelier__rail { margin-top: 3vh; gap: 0; }
  .atelier__station { min-height: 92svh; align-content: center; gap: .2rem; padding: 6vh 0; }
  .atelier__word { font-size: clamp(2.6rem, 14vw, 4rem); color: var(--bone); cursor: default; }
  .atelier__station[aria-current="true"] .atelier__word::after { display: none; }
  .atelier__desc { grid-template-rows: 1fr; opacity: 1; }
  .atelier__sentence { max-width: none; }
  .atelier__demo { display: block; position: relative; aspect-ratio: 16 / 10; margin-top: 1rem; border-radius: 8px; overflow: hidden; background: var(--ob-1); box-shadow: 0 0 0 1px rgba(233,228,220,.14); touch-action: pan-y; }
  .atelier__demo--dom { aspect-ratio: auto; }
  .atelier__demo .atelier__w { position: relative; visibility: visible; opacity: 1; }
  .atelier__demo canvas.atelier__w { position: absolute; inset: 0; }
  .atelier__bench { display: none; }
  .dash { position: relative; width: auto; height: auto; transform: none; grid-template-columns: 1fr; font-size: 12px; min-height: 70svh; }
  .dash__side { grid-template-rows: auto auto; padding: 12px; border-right: 0; border-bottom: 1px solid rgba(233,228,220,.1); }
  .dash__side ul { grid-auto-flow: column; overflow-x: auto; }
  .dash__view { overflow: auto; }
  .dash__plan { grid-template-columns: 1fr; height: auto; }
  .dash__grid { grid-auto-rows: 52px; }
  .dash__rooms { display: none; }
  .dash__side li button { white-space: nowrap; padding: 7px 8px; }
  .dash__user { display: none; }
  .dash__top { flex-wrap: wrap; padding: 10px 12px; }
  .dash__view { padding: 12px; }
  .dash__kpis { grid-template-columns: 1fr 1fr; }
  .dash__cols, .dash__plan, .dash__charts { grid-template-columns: 1fr; }
  .dash__cards { grid-template-columns: 1fr 1fr; }
  .dash__table td:nth-child(3), .dash__table th:nth-child(3), .dash__table td:nth-child(4), .dash__table th:nth-child(4) { display: none; }
  .dash__drawer { width: 100%; }
  .ai, .atelier__demo .ai { position: relative; width: auto; height: auto; transform: none; grid-template-columns: 1fr; min-height: 80svh; }
  .ai__side { grid-template-rows: 200px auto; order: -1; }
  .ai__chat { border-right: 0; border-top: 1px solid rgba(233,228,220,.1); }
  .ai__log { max-height: 42svh; }
}
/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .atelier { --p1: 1 !important; --pz: 0 !important; }
  .atelier__bench, .atelier__copy { transform: none; }
  .atelier__word, .atelier__desc, .atelier__w { transition: none; }
  .dash--in .dash__kpi, .dash--in .dash__panel, .dash--in .dash__card, .dash--in .dash__table tbody tr, .ai__msg, .ai__brief { animation: none; }
}