/* Styles propres au diaporama « Comparer BioTwin ».
   Charge apres deck.css, ne modifie pas le deck partage. */

/* Listes courtes sur une diapositive: on garde peu de texte */
.cmp-list {
  margin: .7em 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .38em;
  max-width: 22em;
}
.cmp-list li {
  position: relative;
  padding-left: 1.1em;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(13px, 1.35vw, 20px);
  font-weight: 650;
  line-height: 1.35;
}
.cmp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--aqua, #64eee3);
}
.cmp-list-tight li { font-size: clamp(12px, 1.15vw, 17px); }

/* Lien discret vers l'autre diaporama */
.cmp-link { margin-top: .6em; }
.cmp-link a {
  color: var(--aqua, #64eee3);
  font-size: clamp(12px, 1.15vw, 17px);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(100, 238, 227, .45);
  padding-bottom: 2px;
}
.cmp-link a:hover { border-bottom-color: currentColor; }

/* Repere d'acte permanent, en haut a droite */
.act-badge {
  position: absolute;
  z-index: 8;
  right: 4.4%;
  top: 3.4%;
  padding: .34em .7em;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(3, 16, 29, .5);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .82);
  font-size: clamp(9px, .78vw, 14px);
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  pointer-events: none;
}
body.clean .act-badge { display: none; }

/* Corrections propriétaire V3.6: une seule ligne de note, sans boîte de détails. */
#notesBtn { display: none !important; }
.notes-panel { display: none !important; }
.speaker-note {
  display: block !important;
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 72px;
  padding: 0 7.5%;
  background: none;
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  font-size: clamp(10px,.82vw,13px); line-height: 1.35;
  max-width: 100%;
}
.slide .content.bottom { padding-bottom: 7% !important; }
.slide-no { display: none !important; }
.title-line { display: block; }

/* Titres des écrans de contenu: bas gauche. Les ouvertures d'acte restent centrées. */
@media (min-width: 761px) {
  .slide:not([data-pos="intro"]) .content:not(.brand-comparison-content) {
    left: 0 !important;
    right: auto !important;
    width: 72% !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 7.2% 7.5% 7% !important;
    text-align: left !important;
  }
  .slide[data-title="Les grandes catégories d'options"] .content {
    left: 0 !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7.2% 7.5% !important;
    text-align: center !important;
  }
}

/* Foret 70 / arbre 30 */
.v36-forest-7030 { display: grid; grid-template-columns: 3fr 7fr; }

/* Retour au logo blanc, sans pastille. */
.brand { background: none; padding: 0; border-radius: 0; box-shadow: none; }
.brand img { filter: brightness(0) invert(1) !important; }

.cmp-list-opening {
  width: min(100%, 43em);
  max-width: none;
  gap: .72em;
  margin-top: 1.1em;
  text-align: left;
}
.cmp-list-opening li {
  padding-left: 1.2em;
  font-size: clamp(11px, 1vw, 16px);
  white-space: nowrap;
}

.cmp-bright-image { filter: brightness(1.78) saturate(1.12) contrast(.96); }
.slide[data-title="Une pièce peut tromper"] .scrim.bottom {
  background: linear-gradient(0deg, rgba(3,16,29,.84), rgba(3,16,29,.34) 45%, rgba(3,16,29,.04) 78%);
}

.metabolites-slide .scrim.bottom {
  background: linear-gradient(0deg, rgba(3,16,29,.99), rgba(3,16,29,.78) 48%, rgba(3,16,29,.12) 82%);
}
.metabolites-slide .content { width: 86% !important; }
.metabolites-slide .cmp-list {
  width: 100%;
  max-width: none;
  gap: .22em;
}
.metabolites-slide .cmp-list li {
  font-size: clamp(10px,.88vw,14px);
  white-space: nowrap;
}

.act-industry-collage { opacity: .82; }
.simulation-pair img { filter: saturate(.86) contrast(1.04); }

.brand-comparison-content {
  width: 100% !important;
  padding: 7% 7.5% 15% !important;
}
.brand-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2%;
  width: min(88%, 1180px);
  margin-top: 1.3em;
}
.brand-panel {
  min-height: 250px;
  padding: 5.5% 6%;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: rgba(3,16,29,.72);
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
  backdrop-filter: blur(14px);
  text-align: left;
}
.brand-panel img {
  display: block;
  width: min(62%, 260px);
  height: 44px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}
.brand-panel h2 {
  margin-top: .55em;
  color: var(--aqua);
  font-size: clamp(26px, 2.7vw, 50px);
  letter-spacing: -.05em;
}
.brand-panel p {
  margin-top: .8em;
  color: rgba(255,255,255,.86);
  font-size: clamp(13px,1.08vw,18px);
  line-height: 1.45;
}

/* ---- V3.6: filigrane sur les interfaces fictives ---- */
.slide[data-demo] .bg { position: relative; }
.slide[data-demo]::before {
  content: "Données de démonstration";
  position: absolute; z-index: 6; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-22deg);
  color: rgba(255,255,255,.30);
  font-size: clamp(16px, 3.2vw, 44px); font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none;
}

/* ---- V3.6: mise en page telephone des diaporamas ---- */
@media (max-width: 760px) {
  .deck-shell { width: 100% !important; height: auto !important; transform: none !important; }
  .stage { position: relative !important; width: 100% !important; height: auto !important;
           aspect-ratio: 3 / 5; transform: none !important; }
  .slide { position: absolute; inset: 0; }
  .slide .content { width: 88% !important; padding: 0 6% !important; }
  .slide h1, .slide h2 { font-size: clamp(22px, 6.4vw, 34px) !important; line-height: 1.1 !important; }
  .small-title { font-size: clamp(24px, 7vw, 38px) !important; }
  .center-label { width: 84% !important; font-size: clamp(26px, 8vw, 44px) !important; }
  .chapter-number { font-size: 26vw !important; }
  .speaker-note { bottom: 58px !important; font-size: 10px !important; padding: 0 6% !important; }
  .slide .content.bottom { padding-bottom: 19.5% !important; }
  .slide .content.bottom:has(.cmp-list) { padding-bottom: 25% !important; }
  .slide .content.bottom:has(.title-line) { padding-bottom: 25% !important; }
  .cmp-list-opening { gap: .46em; }
  .cmp-list-opening li { font-size: 9px; white-space: normal; }
  .metabolites-slide .cmp-list li { font-size: 8.5px; white-space: normal; }
  .brand-comparison-content { padding: 12% 6% 24% !important; }
  .brand-comparison { width: 100%; gap: 8px; }
  .brand-panel { min-height: 0; padding: 12px; border-radius: 12px; }
  .brand-panel img { width: 72%; height: 24px; }
  .brand-panel h2 { font-size: 18px !important; }
  .brand-panel p { margin-top: .5em; font-size: 8.5px; line-height: 1.3; }
  .act-nav { display: none !important; }
  .controls { bottom: 6px !important; }
  .rotate-hint { display: none !important; }
  .act-badge { top: 8px !important; right: 8px !important; font-size: 9px !important; }
}