/* ============================================================
   RÉALISATIONS
   Trois mécaniques réellement manipulables, six en aperçu.

   L'ouverture d'une carte change la mise en page UNE fois, de
   façon instantanée ; le mouvement, lui, est joué par FLIP —
   on inverse l'écart par une transformation, puis on la relâche.
   Aucune propriété de mise en page n'est animée.
   ============================================================ */

.vitrine{
  display:grid;
  gap:var(--e-4);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .vitrine{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

/* ---------- La carte ---------- */
.demo{
  display:flex; flex-direction:column;
  background:var(--bg-leve);
  border:var(--trait) solid var(--rule);
  border-radius:var(--r-3);
  min-width:0;
  overflow:hidden;
  /* transform-origin en haut à gauche : c'est le coin qui ne bouge pas
     pendant l'agrandissement, le mouvement paraît donc naturel. */
  transform-origin:top left;
}
.demo[data-ouvert]{ grid-column:1 / -1 }

/* La tête de carte : ce n’est plus un bouton — un titre ne peut pas
   vivre dans un <button>. Seul le titre est cliquable. */
.demo__tete{
  display:flex; flex-direction:column; gap:var(--e-3);
  padding:var(--e-6);
  text-align:start;
  inline-size:100%;
  min-width:0;
}
.demo__haut{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e-3);
}
.demo__num{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  color:var(--ink-3);
}
.demo__etat{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}
.demo__titre{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-titre);
}
.demo__quoi{ font-size:var(--fs-small); color:var(--ink-2) }

/* ---------- L'aperçu animé au survol ---------- */
.apercu{
  block-size:72px;
  margin-block-start:var(--e-2);
  border-radius:var(--r-2);
  background:var(--bg-creux);
  border:var(--trait) solid var(--rule);
  padding:var(--e-3);
  display:flex; flex-direction:column; justify-content:center; gap:var(--e-2);
  overflow:hidden;
}
.apercu__barre{
  block-size:6px;
  border-radius:var(--r-rond);
  background:var(--rule-fort);
  transform-origin:left center;
  transition:transform var(--t-etat) var(--courbe);
  transition-delay:calc(var(--i, 0) * var(--cascade));
}
.apercu__cases{ display:flex; gap:var(--e-2) }
.apercu__case{
  block-size:20px; flex:1;
  border-radius:var(--r-1);
  background:var(--rule-fort);
  transform-origin:center;
  transition:transform var(--t-etat) var(--courbe);
  transition-delay:calc(var(--i, 0) * var(--cascade));
}

/* Au survol, l'aperçu montre ce que la mécanique fait. */
@media (hover:hover){
  /* 1 — un créneau se remplit, un autre part en liste d'attente */
  .demo:hover .apercu--creneaux .apercu__case:nth-child(2){ transform:scaleY(1.35) }
  .demo:hover .apercu--creneaux .apercu__case:nth-child(4){ transform:scaleY(.45) }

  /* 2 — le filtre retire ce qui ne correspond pas */
  .demo:hover .apercu--filtre .apercu__barre:nth-child(2){ transform:translateX(115%) }
  .demo:hover .apercu--filtre .apercu__barre:nth-child(4){ transform:translateX(115%) }

  /* 3 — la charge se reporte d'une zone à l'autre */
  .demo:hover .apercu--zones .apercu__barre:nth-child(1){ transform:scaleX(.45) }
  .demo:hover .apercu--zones .apercu__barre:nth-child(2){ transform:scaleX(1) }
  .demo:hover .apercu--zones .apercu__barre:nth-child(3){ transform:scaleX(.85) }
}
.apercu--zones .apercu__barre:nth-child(1){ transform:scaleX(1) }
.apercu--zones .apercu__barre:nth-child(2){ transform:scaleX(.55) }
.apercu--zones .apercu__barre:nth-child(3){ transform:scaleX(.3) }

/* L'aperçu disparaît une fois la carte ouverte : la vraie
   mécanique le remplace. */
.demo[data-ouvert] .apercu{ display:none }

/* ---------- La scène manipulable ---------- */
.demo__scene{
  display:none;
  padding:0 var(--e-6) var(--e-6);
  border-block-start:var(--trait) solid var(--rule);
  margin-block-start:var(--e-2);
  padding-block-start:var(--e-6);
}
.demo[data-ouvert] .demo__scene{ display:block }

.scene__grille{ display:grid; gap:var(--e-6) }
@media (min-width:820px){
  .demo[data-ouvert] .scene__grille{ grid-template-columns:minmax(0,1fr) minmax(0,300px) }
}

.scene__sortie{
  display:flex; flex-direction:column; gap:var(--e-3);
  padding:var(--e-5);
  background:var(--bg-creux);
  border:var(--trait) solid var(--rule);
  border-radius:var(--r-2);
  align-self:start;
}
.scene__ligne{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e-3);
  font-size:var(--fs-small);
}
.scene__cle{ color:var(--ink-3); font-family:var(--font-mono); font-size:var(--fs-nano); letter-spacing:var(--ls-caps); text-transform:uppercase }
.scene__val{ font-variant-numeric:tabular-nums }

/* ---------- Créneaux et liste d'attente ---------- */
.places{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));
  gap:var(--e-2);
}
.place{
  min-block-size:calc(var(--tap-min) + var(--e-3));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--e-1);
  border:var(--trait) solid var(--rule-fort);
  border-radius:var(--r-2);
  background:var(--bg-creux);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  transition:transform var(--t-reaction) var(--courbe);
}
@media (hover:hover){ .place:hover{ transform:translateY(-1px) } }
.place__h{ font-size:var(--fs-micro); color:var(--ink) }
.place__reste{ font-size:var(--fs-nano); color:var(--ink-3) }
.place[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink) }
.place[aria-pressed="true"] .place__h,
.place[aria-pressed="true"] .place__reste{ color:var(--bg) }
.place[data-complet]{ border-style:dashed }
.place[data-complet] .place__h{ color:var(--ink-3) }

/* ---------- Filtrage par niveau ---------- */
.niveaux{ display:flex; flex-wrap:wrap; gap:var(--e-2) }
.niveau{
  min-block-size:var(--tap-min);
  padding-inline:var(--e-4);
  display:inline-flex; align-items:center;
  border:var(--trait) solid var(--rule-fort);
  border-radius:var(--r-rond);
  background:var(--bg-creux);
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  transition:transform var(--t-reaction) var(--courbe);
}
.niveau[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
@media (hover:hover){ .niveau:hover{ transform:translateY(-1px) } }

.sorties{ display:flex; flex-direction:column; gap:var(--e-2); margin-block-start:var(--e-4) }
.sortie{
  display:flex; align-items:center; gap:var(--e-4);
  padding:var(--e-4);
  border:var(--trait) solid var(--rule);
  border-radius:var(--r-2);
  background:var(--bg-creux);
  min-width:0;
  transform-origin:top center;
  transition:transform var(--t-etat) var(--courbe),
             opacity var(--t-etat) var(--courbe);
}
/* Une sortie écartée reste dans le flux : elle recule, elle ne
   disparaît pas — la hauteur du bloc ne bouge donc jamais. */
.sortie[data-hors]{ transform:scale(.97); opacity:.28 }
.sortie__nom{ flex:1; min-width:0; font-size:var(--fs-small) }
.sortie__prof{
  font-family:var(--font-mono); font-size:var(--fs-nano);
  color:var(--ink-3); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ---------- Allocation par zones ---------- */
.zones{ display:flex; flex-direction:column; gap:var(--e-4) }
.zone{ display:flex; flex-direction:column; gap:var(--e-2) }
.zone__haut{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e-3);
  font-size:var(--fs-small);
}
.zone__nom{ min-width:0 }
.zone__compte{
  font-family:var(--font-mono); font-size:var(--fs-nano);
  color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.zone__jauge{
  block-size:8px;
  background:var(--rule);
  border-radius:var(--r-rond);
  overflow:hidden;
}
.zone__plein{
  block-size:100%;
  background:var(--ink-2);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform var(--t-etat) var(--courbe);
}
/* La part reportée depuis une zone pleine se distingue par sa trame. */
.zone__plein[data-report]{
  background:repeating-linear-gradient(
    45deg, var(--ink-3) 0 4px, transparent 4px 8px);
}

.pupitre{
  display:flex; flex-direction:column; gap:var(--e-4);
}
.pupitre__ligne{ display:flex; align-items:center; gap:var(--e-3) }
.pas{
  inline-size:var(--tap-min); block-size:var(--tap-min); flex:none;
  display:grid; place-items:center;
  border:var(--trait) solid var(--rule-fort);
  border-radius:var(--r-2);
  background:var(--bg-creux);
  font-family:var(--font-mono);
  transition:transform var(--t-reaction) var(--courbe), opacity var(--t-reaction) var(--courbe);
}
.pas:active:not(:disabled){ transform:translateY(1px) }
.pas:disabled{ opacity:.35; cursor:not-allowed }
.pupitre__valeur{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h2);
  font-variant-numeric:tabular-nums;
  min-inline-size:3ch; text-align:center;
}

/* ---------- Les six aperçus non manipulables ---------- */
.echantillon{
  margin-block-start:clamp(36px, 3.5vw, 64px);
  padding-block-start:clamp(28px, 2.5vw, 44px);
  border-block-start:var(--trait) solid var(--rule);
}
.echantillon__mot{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  color:var(--ink-3);
  margin-block-end:var(--e-6);
  max-width:56ch;
}
.autres{
  display:grid; gap:0;
  grid-template-columns:1fr;
}
@media (min-width:720px){ .autres{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--e-10) } }
@media (min-width:1080px){ .autres{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.autre{
  display:flex; flex-direction:column; gap:var(--e-2);
  padding-block:var(--e-5);
  border-block-start:var(--trait) solid var(--rule);
  min-width:0;
}
.autre__titre{ font-size:var(--fs-small); font-weight:var(--fw-normal) }
.autre__quoi{ font-size:var(--fs-micro); color:var(--ink-3) }

/* ---------- Le bouton d'ouverture ---------- */
.demo__ouvrir{
  display:flex; align-items:center; gap:var(--e-2);
  margin-block-start:var(--e-4);
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--ink-3);
}


/* ---------- Le titre porte le bouton ----------
   Un <button> ne peut pas contenir de titre : c'est le titre qui
   contient le bouton. La hiérarchie redevient juste — les trois
   démonstrations sont des h3, les six aperçus des h4. */
.demo__titre{ margin:0 }
.demo__bouton{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-4);
  inline-size:100%;
  min-block-size:var(--tap-min);
  text-align:start;
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-titre);
  color:var(--ink);
  transition:opacity var(--t-reaction) var(--courbe);
}
.demo__bouton:hover{ opacity:.78 }
.demo__bouton svg{
  flex:none;
  transition:transform var(--t-etat) var(--courbe);
}
.demo[data-ouvert] .demo__bouton svg{ transform:rotate(45deg) }

.echantillon__titre{
  font-size:var(--fs-h3);
  margin-block-end:var(--e-3);
}
.autre__titre{ font-size:var(--fs-small); font-weight:var(--fw-normal) }

/* ---------- Curseur horizontal ---------- */
.curseur{ display:flex; flex-direction:column; gap:var(--e-2); margin-block-end:var(--e-4) }
.curseur__haut{
  display:flex; justify-content:space-between; gap:var(--e-3);
  font-size:var(--fs-micro); color:var(--ink-2);
}
.curseur input[type="range"]{
  inline-size:100%;
  block-size:var(--tap-min);
  accent-color:var(--ink);
  background:transparent;
  cursor:pointer;
}

/* ---------- Bascule ---------- */
.ctl-bascule{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-4);
  inline-size:100%;
  min-block-size:var(--tap-min);
  margin-block-start:var(--e-4);
  text-align:start;
  font-size:var(--fs-small);
}
.ctl-bascule__piste{
  inline-size:44px; block-size:26px; flex:none;
  border-radius:var(--r-rond);
  border:var(--trait) solid var(--rule-fort);
  background:var(--bg-creux);
  padding:2px;
}
.ctl-bascule__pouce{
  display:block;
  inline-size:20px; block-size:20px;
  border-radius:var(--r-rond);
  background:var(--rule-fort);
  transition:transform var(--t-etat) var(--courbe);
}
.ctl-bascule[aria-pressed="true"] .ctl-bascule__piste{ background:var(--ink); border-color:var(--ink) }
.ctl-bascule[aria-pressed="true"] .ctl-bascule__pouce{ transform:translateX(18px); background:var(--bg) }

/* ============================================================
   PROJET CLIENT
   Il précède la grille et s'en distingue : ce n'est pas une
   démonstration construite pour ce site, c'est du travail livré.
   ============================================================ */
.projet{
  display:grid;
  gap:var(--e-8);
  padding:var(--e-8);
  margin-block-end:var(--e-8);
  background:var(--bg-leve);
  border:var(--trait) solid var(--rule-fort);
  border-radius:var(--r-3);
  min-width:0;
}
@media (min-width:900px){
  .projet{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--e-16) }
}

.projet__sur{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--ink-3);
  margin-block-end:var(--e-3);
}
.projet__titre{
  font-size:var(--fs-h2);
  letter-spacing:var(--ls-titre);
  margin-block-end:var(--e-4);
}
.projet__quoi{ color:var(--ink-2); max-width:var(--mesure) }
.projet__note{
  margin-block-start:var(--e-4);
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  color:var(--ink-3);
}

.projet__faits{ display:flex; flex-direction:column; gap:0; align-self:start }
.projet__fait{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e-4);
  padding-block:var(--e-3);
  border-block-start:var(--trait) solid var(--rule);
}
.projet__fait:first-child{ border-block-start:0; padding-block-start:0 }
.projet__k{ font-size:var(--fs-small); color:var(--ink-2) }
.projet__v{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  font-size:var(--fs-h3);
  white-space:nowrap;
}
.projet__etat{
  display:flex; align-items:flex-start; gap:var(--e-3);
  flex-wrap:wrap;
  margin-block-start:var(--e-5);
  font-size:var(--fs-nano);
  color:var(--ink-3);
}
.projet__etat span:last-child{ flex:1; min-width:12ch }

/* ---------- Aperçu vivant du projet ----------
   Le vrai site, dans un cadre, réduit par transform : aucune image
   à produire ni à maintenir. Le cadre a un rapport fixe, donc la
   mise en page ne bouge pas pendant le chargement. */
.projet{ grid-template-areas:"vue" "texte" "faits" }
@media (min-width:900px){
  .projet{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    grid-template-areas:"vue texte" "vue faits";
    align-items:start;
    row-gap:var(--e-6);
  }
}
.projet__vue{ grid-area:vue; min-width:0 }
.projet__texte{ grid-area:texte; min-width:0 }
.projet__faits{ grid-area:faits; min-width:0 }

.projet__cadre{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:var(--r-2);
  border:var(--trait) solid var(--rule);
  background:var(--bg-creux);
}
.projet__iframe{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  inline-size:1280px; block-size:960px;
  border:0;
  transform-origin:top left;
  /* Réduction : 1280 px de large ramenés à la largeur du cadre. */
  transform:scale(var(--reduction, .34));   /* --reduction posée par js/apercu.js */
  pointer-events:none;   /* on n'interagit pas dans la vignette */
}
.projet__ouvrir{
  inline-size:100%;
  margin-block-start:var(--e-4);
}