@import url("polices.css");

/* ============================================================================
   Construisez le dashboard qui répond à vos questions
   Montaine Marteau · Agile en Seine & IA · 23 septembre 2026

   Scène de 1920 × 1080. Toutes les tailles sont en pixels de cette scène :
   une slide Google de 13,33 × 7,5 pouces fait 540 pt de haut, donc 1 pt = 2 px.
   Une valeur de 44 pt dans le deck d'origine s'écrit ici 88 px.
   ========================================================================== */

:root {
  /* encre et fonds */
  --bg:        #FFFFFF;
  --soft:      #F7F8FA;
  --ink:       #0A1628;
  --ink-2:     #1F2937;
  --muted:     #6B7280;
  --line:      #E5E7EB;

  /* fait main, repris du système de design : le trait, les tampons et les annotations
     sont en vermillon ; le surligneur est saffron, jamais en texte */
  --vermillon: #D04629;
  --saffron:   #FEC51F;

  /* accents */
  --ocean:     #1E5FD1;
  --ocean-dk:  #06192E;
  --turq:      #A8D4D0;
  --pale:      #E8F4F2;

  /* gabarit imposé Agile en Seine */
  --aesia-ink:    #302840;
  --aesia-accent: #C85828;
  --aesia-muted:  #7A7488;

  /* MonSéjour : palette du produit, jamais celle du talk */
  --ms-blue:   #000091;
  --ms-blue-2: #6A6AF4;
  --ms-ink:    #161616;
  --ms-grey:   #3A3A48;
  --ms-green:  #18753C;
  --ms-green-l:#B8FEC9;
  --ms-warn:   #B34000;
  --ms-warn-l: #FFE9E0;
  --ms-panel:  #DEDEE8;

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  /* la main : Caveat, en graisse 700. Montaine l'a préférée à Permanent Marker (système TBL) le 16/09 */
  --main: "Caveat", cursive;

  --r-sm: 12px;
  --r:    24px;
  --r-lg: 40px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #05070C;
  font-family: var(--sans);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- scène ---------------------------------------------------------------- */

#scene {
  position: absolute;
  top: 50%; left: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  background: var(--bg);
  overflow: hidden;
}

.slide {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  padding: 80px 128px 60px;
  background: var(--bg);
}
.slide.on { display: flex; }

/* une slide qui vient d'arriver : le contenu monte de quelques pixels */
.slide.on > * { animation: entree .32s cubic-bezier(.22,.61,.36,1) both; }
.slide.on > *:nth-child(2) { animation-delay: .04s; }
.slide.on > *:nth-child(3) { animation-delay: .08s; }
.slide.on > *:nth-child(4) { animation-delay: .12s; }
/* un élément à dévoiler (.frag) échappe à l'animation d'entrée : son maintien à opacité 1 écrasait le
   opacity: 0 et les notes de la slide du tweet étaient visibles avant leur flèche (constaté le 16/09) */
.slide.on > .frag { animation: none; }
@keyframes entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide.on > * { animation: none; } }
/* Une page embarquee porte son propre agrandissement : l'animation d'entree finit
   sur transform:none, ce qui l'annulerait et ne laisserait qu'un bout d'ecran. */
.slide.on > iframe.page-vive { animation: none; }

.slide.plein { padding: 0; }
.slide.centre { align-items: center; justify-content: center; text-align: center; }

/* --- en-têtes ------------------------------------------------------------- */

/* eyebrows masqués le 16/09 à la demande de Montaine (« on verra à la fin comment on le gère ») :
   retirer la ligne display:none pour les rétablir tous */
.eyebrow { display: none !important; }
.eyebrow {
  display: flex; align-items: center; gap: 22px;
  font-size: 26px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ocean);
  margin-bottom: 26px;
}
.eyebrow::before {
  content: ""; display: block;
  width: 62px; height: 5px; border-radius: 3px;
  background: var(--ocean); flex: none;
}
.eyebrow.sourd { color: var(--muted); }
.eyebrow.sourd::before { background: var(--muted); }

h1 {
  font-size: 88px; font-weight: 800; line-height: 1.04;
  letter-spacing: -.022em; color: var(--ink);
  max-width: 1620px;
}
h1.md { font-size: 76px; }
h1.sm { font-size: 64px; }
h1.xl { font-size: 116px; }

.sous {
  font-size: 40px; color: var(--muted); line-height: 1.32;
  margin-top: 20px; max-width: 1560px;
}
.sous b, .sous strong { color: var(--ocean); font-weight: 700; }

.corps { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.corps.haut { justify-content: flex-start; padding-top: 44px; }

/* --- pied de slide : sources ---------------------------------------------- */

.sources {
  margin-top: auto; padding-top: 28px; margin-bottom: 18px;  /* 17/09 : de l'air au-dessus de la signature */
  font-size: 22px; color: var(--muted); line-height: 1.45;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
}
.sources b { font-weight: 700; }
.sources .ref { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #C7CDD6; }
.sources .aparte { font-style: italic; text-align: right; flex: none; }

/* --- cartes --------------------------------------------------------------- */

.cartes { display: grid; gap: 34px; }
.c2 { grid-template-columns: 1fr 1fr; }
.c3 { grid-template-columns: repeat(3, 1fr); }
.c4 { grid-template-columns: repeat(4, 1fr); }

.carte {
  background: var(--soft); border-radius: var(--r-lg);
  padding: 44px 46px; display: flex; flex-direction: column; gap: 18px;
}
.carte.pale  { background: var(--pale); }
.carte.ocean { background: var(--ocean); color: #fff; }
.carte.ocean .k, .carte.ocean .titre { color: #fff; }
.carte.ocean .d { color: var(--pale); }
.carte.ocean .val { color: var(--turq); }

.carte .k {
  font-size: 40px; font-weight: 700; color: var(--ocean); letter-spacing: -.01em;
}
.carte .k span { color: var(--muted); font-weight: 500; }
.carte.ocean .k span { color: var(--turq); }
.carte .titre { font-size: 68px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.carte .titre.p { font-size: 44px; }
.carte .d { font-size: 34px; color: var(--ink-2); line-height: 1.35; }
.carte .fin { font-size: 24px; color: var(--muted); line-height: 1.4; margin-top: auto; }
.carte.ocean .fin { color: var(--pale); }

.puces { list-style: none; display: flex; flex-direction: column; gap: 22px; }
.puces li { font-size: 42px; line-height: 1.25; padding-left: 40px; position: relative; color: var(--ink); }
.puces li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 14px; height: 14px; border-radius: 3px; background: var(--ocean);
}
.puces b { font-weight: 700; }

/* --- lignes clé / valeur -------------------------------------------------- */

.kv { display: flex; flex-direction: column; gap: 34px; }
.kv .ligne { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px; }
.kv .nom { font-size: 34px; font-weight: 700; }
.kv .val { font-size: 38px; font-weight: 700; color: var(--ocean); white-space: nowrap; }
.kv .det { grid-column: 1 / -1; font-size: 26px; color: var(--muted); line-height: 1.35; margin-top: -22px; }
.carte.ocean .kv .det { color: #C7D7F5; }

/* --- bandeau « à retenir » ------------------------------------------------ */

.retenir {
  background: var(--pale); border-radius: var(--r);
  padding: 30px 40px; font-size: 36px; font-weight: 700; line-height: 1.3;
}
.retenir b { color: var(--ocean); }
.retenir.plein { background: var(--ocean); color: #fff; }
.retenir.nu { background: none; padding: 0; text-align: center; }

/* --- tampon incliné ------------------------------------------------------- */

.tampon {
  border: 5px solid var(--ocean); border-radius: 22px;
  padding: 22px 40px; color: var(--ocean); text-align: center;
  transform: rotate(-1.6deg); background: rgba(255,255,255,.94);
  align-self: center;
}
.tampon .g { display: block; font-size: 34px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.tampon .p { display: block; font-size: 30px; font-weight: 500; margin-top: 4px; }
.tampon.petit { transform: rotate(-2.2deg); padding: 18px 32px; }
.tampon.petit .g { font-size: 30px; text-transform: none; letter-spacing: 0; }

/* --- axe éphémère → durable ----------------------------------------------- */

.axe {
  display: flex; align-items: center; gap: 20px;
  margin-top: 30px; font-size: 30px; color: var(--muted);
}
.axe .trait { flex: 1; height: 3px; background: linear-gradient(90deg, var(--line), var(--ocean)); position: relative; }
.axe .trait::after {
  content: ""; position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  border: 8px solid transparent; border-left: 16px solid var(--ocean);
}
/* les deux mots à la même taille et la même graisse, le second en couleur ; la pointe déborde le trait de 16 px, centrée sur lui */
.axe .deb, .axe .fin { font-weight: 700; font-style: normal; line-height: 1; }
.axe .fin { color: var(--ocean); }

/* --- étapes à picto (3 ou 4 colonnes) ------------------------------------- */

.etapes { display: grid; align-items: start; gap: 0; }
.etapes.e3 { grid-template-columns: 1fr 120px 1fr 120px 1fr; }
.etapes.e4 { grid-template-columns: repeat(4, 1fr); gap: 60px; }
.etape { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }

.rond {
  width: 220px; height: 220px; border-radius: 50%;
  background: var(--pale); display: grid; place-items: center; margin-bottom: 14px;
}
.rond img { width: 108px; height: 108px; object-fit: contain; }
.rond.plein { background: var(--ocean); }

.etape .num { font-family: var(--mono); font-size: 30px; font-weight: 500; color: var(--ocean); letter-spacing: .06em; }
.etape .lib { font-size: 60px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.etape .lib.ocean { color: var(--ocean); }
.etape .det { font-size: 36px; color: var(--muted); line-height: 1.25; }
.etape .qui { display: flex; gap: 10px; margin-top: 18px; }
.etape .qui img { width: 44px; height: 44px; }
.etape .pub { font-size: 30px; color: var(--muted); }

/* la flèche se cale sur le centre des cercles (236 px), pas sur celui de la colonne */
.fleche { align-self: start; margin-top: 116px; height: 3px; background: var(--ocean); position: relative; }
.fleche::after {
  content: ""; position: absolute; right: -1px; top: -7px;
  border: 8px solid transparent; border-left: 13px solid var(--ocean);
}

/* étapes « naïvement » : pastilles alignées sur une ligne */
.pastilles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; align-items: start; }
.pastille { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.pastille .ic { width: 180px; height: 180px; border-radius: 50%; background: var(--pale); display: grid; place-items: center; }
.pastille .ic img { width: 88px; height: 88px; }
.pastille .num { font-family: var(--mono); font-size: 32px; color: var(--ocean); font-weight: 500; }
.pastille .lib { font-size: 48px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pastille .lib.ocean { color: var(--ocean); }

/* --- frise horaire (problème nº2) ----------------------------------------- */

.frise { position: relative; padding: 0 40px; }
.frise .rail { position: absolute; left: 0; right: 0; top: 178px; height: 3px; background: var(--turq); }
.frise .rail::after {
  content: ""; position: absolute; right: -2px; top: -7px;
  border: 8px solid transparent; border-left: 14px solid var(--turq);
}
.frise .moments { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.moment { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.moment .h { font-family: var(--mono); font-size: 40px; font-weight: 500; color: var(--ocean); }
.moment .ic {
  width: 160px; height: 160px; border-radius: 50%; background: var(--pale);
  display: grid; place-items: center; border: 4px solid var(--bg);
}
.moment .ic.fort { border-color: var(--ocean); background: var(--bg); }
.moment .ic img { width: 76px; height: 76px; }
.moment .lib { font-size: 44px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; margin-top: 8px; }
.moment .lib.ocean { color: var(--ocean); }

.mentions { margin-top: 44px; display: flex; flex-direction: column; gap: 12px; font-size: 32px; }
.mentions b { color: var(--ocean); font-weight: 700; }
.mentions span { color: var(--ink-2); }

/* --- tips ----------------------------------------------------------------- */

.tips { display: grid; gap: 40px 72px; }
.tips.t4 { grid-template-columns: 1fr 1fr; }
.tips.t3 { grid-template-columns: repeat(3, 1fr); }
.tip { display: grid; grid-template-columns: 62px 1fr; gap: 6px 22px; align-items: start; }
.tip .n { font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--ocean); line-height: 1.25; }
.tip .t { font-size: 46px; font-weight: 700; line-height: 1.18; letter-spacing: -.015em; }
.tips.t3 .tip .t { font-size: 44px; }
.tip .d { grid-column: 2; font-size: 32px; color: var(--muted); line-height: 1.3; }

/* --- questions numérotées (ouverture « la réalité ») ---------------------- */

.questions { display: flex; flex-direction: column; gap: 46px; }
.question { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: 24px; }
.question .n { font-family: var(--mono); font-size: 52px; font-weight: 700; color: var(--ocean); }
.question .q { font-size: 52px; font-weight: 700; letter-spacing: -.015em; }

/* --- tableau (TCO, Systems of Record) ------------------------------------- */

table.tb { width: 100%; border-collapse: collapse; }
table.tb th {
  text-align: left; font-size: 26px; font-weight: 700; color: var(--muted);
  padding: 0 24px 14px 0; border-bottom: 2px solid var(--line);
}
table.tb th.num, table.tb td.num { text-align: right; padding-right: 40px; white-space: nowrap; }
table.tb td { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--line); font-size: 30px; vertical-align: top; }
table.tb td.nom { font-weight: 700; }
table.tb td.num { font-weight: 700; color: var(--ocean); font-size: 32px; }
table.tb tr:last-child td { border-bottom: none; }

.formule { display: block; margin: 0 auto; max-height: 132px; }
.legende { font-size: 26px; color: var(--muted); text-align: center; margin-top: 16px; }

/* --- chiffres (GitClear) -------------------------------------------------- */

.figs { display: flex; flex-direction: column; gap: 16px; }
.fig {
  display: grid; grid-template-columns: 1fr 150px 54px 230px 150px;
  align-items: center; gap: 18px;
  background: var(--soft); border-radius: var(--r); padding: 22px 36px;
}
.fig .lib { font-size: 38px; font-weight: 700; letter-spacing: -.01em; }
.fig .lib small { display: block; font-size: 26px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.fig .avant { font-size: 40px; color: var(--muted); text-align: right; }
.fig .fl { font-size: 40px; color: var(--ocean); text-align: center; font-weight: 700; }
.fig .apres { font-size: 62px; font-weight: 800; color: var(--ocean); letter-spacing: -.02em; }
.fig .delta {
  font-size: 32px; font-weight: 700; color: var(--ocean);
  background: var(--pale); border-radius: 12px; padding: 8px 0; text-align: center;
}

.notex { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; margin: 22px 0 14px; }
.notex .txt { font-size: 28px; color: var(--muted); line-height: 1.35; }
.notex .encadre {
  border: 3px solid var(--ocean); border-radius: 16px; padding: 18px 28px;
  font-size: 28px; line-height: 1.3; color: var(--ink);
}

/* --- citation ------------------------------------------------------------- */

.citation { background: var(--soft); border-radius: var(--r-lg); padding: 44px 50px; }
.citation .q { font-size: 40px; font-style: italic; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.citation .src { font-size: 28px; color: var(--muted); margin-top: 26px; }

.grande-citation { font-size: 76px; font-weight: 800; color: var(--ocean); line-height: 1.12; letter-spacing: -.02em; }

/* --- définition (wrapping) ------------------------------------------------ */

.definition {
  background: var(--pale); border-radius: var(--r);
  padding: 30px 44px; display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: baseline;
}
.definition .mot { font-size: 38px; font-weight: 800; color: var(--ocean); }
.definition .txt { font-size: 32px; line-height: 1.32; }
.definition .txt b { font-weight: 700; }

/* --- prompts (bulles de conversation) ------------------------------------- */

.slide.prompt .chat { margin-top: auto; margin-bottom: auto; }
.chat { display: flex; flex-direction: column; gap: 56px; width: 100%; }
.bulle {
  align-self: flex-end; max-width: 1240px;
  background: var(--ocean); color: #fff; border-radius: 34px;
  padding: 44px 56px; font-size: 60px; font-weight: 700; line-height: 1.24; letter-spacing: -.015em;
}
/* Un prompt long se lit en plusieurs respirations : interligne ouvert et,
   surtout, un vrai blanc entre les paragraphes. Sans lui, le pave bleu devient
   un mur. */
.bulle.long { font-size: 46px; line-height: 1.42; padding: 48px 56px; }
.bulle p + p { margin-top: 26px; }
.bulle.long p + p { margin-top: 38px; }
/* Une ligne qui commence par un tiret est un element de liste : elle se detache
   de la precedente sans aller jusqu'au blanc d'un paragraphe. */
.bulle .liste { margin-top: 38px; display: flex; flex-direction: column; gap: 20px; }
.bulle .qui { display: block; font-size: 26px; font-weight: 600; color: #BFD3F5; margin-bottom: 14px; letter-spacing: .04em; text-transform: uppercase; }
.repond { align-self: flex-start; display: flex; align-items: center; gap: 22px; }
.repond .qui { font-size: 26px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.points { background: var(--pale); border-radius: 22px; padding: 26px 34px; display: flex; gap: 16px; }
.points i { width: 20px; height: 20px; border-radius: 50%; background: var(--ocean); display: block; animation: pulse 1.4s infinite ease-in-out; }
.points i:nth-child(2) { animation-delay: .2s; }
.points i:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .points i { animation: none; opacity: .7; } }

/* Le logo de l'outil, en haut a gauche : c'est lui qui dit qui repond,
   plutot que son nom repete sur chaque slide de prompt. */
.marque { position: absolute; top: 60px; left: 128px; width: 230px; height: 230px; }
.marque img { width: 100%; height: 100%; object-fit: contain; }

/* --- images et vidéos plein écran ----------------------------------------- */

.plein img.bleed, .plein video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; background: #000;
}
.plein img.contenu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg); }
.plein.noir { background: #000; }
.plein.noir img.contenu { background: #000; }

/* une capture cadrée, posée sous le fil d'ariane */
.capture { position: relative; flex: 1; min-height: 0; margin-top: 8px; }
.capture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.capture.cadre img { filter: drop-shadow(0 18px 42px rgba(10,22,40,.14)); }

/* légende posée par-dessus une image pleine page */
.legende-sur {
  position: absolute; left: 96px; right: 96px; bottom: 76px;
  background: rgba(10,22,40,.88); color: #fff; border-radius: 20px;
  padding: 26px 40px; font-size: 34px; font-weight: 700; line-height: 1.25;
  backdrop-filter: blur(6px);
}

/* --- gabarit Agile en Seine (titre et partenaires) ------------------------ */

.aesia { background: var(--aesia-ink); color: #fff; padding: 0; }
.aesia .fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aesia .contenu { position: relative; width: 100%; height: 100%; padding: 64px 96px 52px; display: flex; flex-direction: column; }
.aesia .logo { width: 520px; }
.aesia h1 { color: #16121F; font-size: 92px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; max-width: 1180px; margin-top: 128px; }
/* les trois lignes du bas en blanc, demande du 16/09 */
.aesia .auteur { margin-top: auto; font-size: 34px; color: #fff; font-weight: 500; }
.aesia .auteur b { font-weight: 800; }
.aesia .date { font-size: 30px; color: #fff; margin-top: 12px; }
.aesia .bandeau { margin-top: 44px; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: .01em; }

.aesia.clair { background: #fff; }
.aesia.clair .contenu { padding: 72px 96px 56px; }
.aesia.clair .sur { font-size: 26px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--aesia-accent); }
.aesia.clair h2 { font-size: 66px; font-weight: 800; color: var(--aesia-ink); letter-spacing: -.02em; margin-top: 14px; }
.logos { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 44px; margin-top: 24px; }
.logos .rangee { display: flex; align-items: center; justify-content: center; gap: 46px; flex-wrap: nowrap; }
.logos img { max-height: 112px; max-width: 250px; object-fit: contain; flex: 0 1 auto; min-width: 0; }
.logos .rangee.grande img { max-height: 150px; max-width: 420px; }
.aesia .pied { display: flex; justify-content: space-between; align-items: center; font-size: 22px; color: var(--aesia-muted); }
/* logo en bas à gauche, comme sur la slide imposée par l'organisation (1,55 × 0,34 pouce, soit 223 × 49 px) */
.aesia .pied .logo-pied { height: 49px; width: auto; }
.aesia .pied .droite { display: flex; align-items: center; gap: 22px; }
.aesia .pied .n { color: var(--aesia-accent); font-weight: 800; }

/* --- fait main : surligneur, note au marqueur, flèche ----------------------
   Vocabulaire repris du système de design : vermillon pour le trait et les
   annotations, saffron pour le surligneur. Une note fait cinq mots au plus.
   Un élément .frag reste invisible jusqu'à ce que la flèche droite le
   dévoile ; ceux qui partagent un data-frag apparaissent ensemble.
   ------------------------------------------------------------------------ */

.frag { opacity: 0; transition: opacity .28s ease; }
.frag.vu { opacity: 1; }

/* le cadre qui reçoit l'image annotée : les surligneurs se placent en % de l'image */
.annote { position: relative; display: inline-block; line-height: 0; }
.annote > img { display: block; height: 100%; }

.surligneur {
  position: absolute; pointer-events: none;
  mix-blend-mode: multiply; transform: rotate(-.4deg);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 80%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22s%22 x=%22-5%25%22 y=%22-10%25%22 width=%22110%25%22 height=%22120%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.004 0.2%22 numOctaves=%222%22 seed=%223%22 result=%22n%22/%3E%3CfeColorMatrix in=%22n%22 type=%22matrix%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 0 0 0 1.9%22 result=%22m%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22m%22 operator=%22in%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M14.0,3.9 L37.0,6.4 L60.0,5.0 L83.0,6.8 L106.0,7.0 L129.0,2.5 L152.0,2.1 L175.0,8.7 L198.0,4.1 L221.0,3.9 L244.0,10.0 L267.0,5.8 L295.8,12.0 L297.0,30.0 L295.7,48.0 L297.4,66.0 L286.0,76.7 L263.0,73.8 L240.0,75.1 L217.0,71.2 L194.0,75.1 L171.0,76.9 L148.0,74.2 L125.0,75.9 L102.0,75.4 L79.0,70.5 L56.0,76.1 L33.0,74.7 L3.4,70.0 L1.2,52.0 L7.9,34.0 L4.8,16.0Z%22 fill=%22%23FEC51F%22 filter=%22url(%23s)%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.surligneur.vu { opacity: .92; }

.note-main {
  position: absolute; font-family: var(--main); color: var(--vermillon);
  font-size: 60px; font-weight: 700; line-height: 1.02; white-space: nowrap;
}

/* les flèches : un calque SVG qui couvre la scène, tracés en coordonnées de scène,
   passés par le filtre « encre » du système (défini dans la slide) pour le grain du pinceau */
.fleches { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fleches path { fill: none; stroke: var(--vermillon); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round;
                filter: url(#main-encre); }

/* ellipse ouverte à main levée : autour d'un mot (note) ou d'une zone d'image (en % du cadre .annote) */
.entoure-main { display: inline-block; padding: .5em 1.1em; font-family: var(--main); font-weight: 700;
                color: var(--vermillon); line-height: 1; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 56%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M20,47 C4,40 3,20 26,11 C50,2 96,4 111,17 C123,28 110,44 80,49 C56,53 26,52 13,41 C7,35 10,27 22,22%22 fill=%22none%22 stroke=%22%23D04629%22 stroke-width=%225%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") center/100% 100% no-repeat; }
/* .ell entoure le mot qui la contient (.mot) ; .entoure-img une zone d'image, en % du cadre .annote */
.mot { position: relative; display: inline-block; }
.mot .ell { left: -.42em; right: -.42em; top: -.26em; bottom: -.2em; }
/* ellipse fixe, comme partout (le tracé animé a été essayé puis retiré le 16/09) */
.entoure-img, .mot .ell { position: absolute; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 56%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M20,47 C4,40 3,20 26,11 C50,2 96,4 111,17 C123,28 110,44 80,49 C56,53 26,52 13,41 C7,35 10,27 22,22%22 fill=%22none%22 stroke=%22%23D04629%22 stroke-width=%225%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") center/100% 100% no-repeat; }

/* variante orange de l'ellipse et des traits au marqueur (TCO, 17/09) : la première version des coûts, avant le rouge de la suite */
.entoure-img.orange { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 56%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M20,47 C4,40 3,20 26,11 C50,2 96,4 111,17 C123,28 110,44 80,49 C56,53 26,52 13,41 C7,35 10,27 22,22%22 fill=%22none%22 stroke=%22%23E8891D%22 stroke-width=%225%22 stroke-linecap=%22round%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E"); }
.fleches path.orange { stroke: #E8891D; }
.souligne.orange { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 44%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M1.0,23.8 L2.9,9.9 L23.9,11.0 L48.4,10.1 L67.7,9.4 L92.0,11.9 L111.6,11.0 L135.5,8.6 L155.7,8.9 L179.1,11.6 L200.6,10.6 L220.7,10.4 L241.0,10.5 L262.2,12.7 L285.6,12.6 L307.0,13.3 L328.4,16.9 L352.3,15.9 L373.4,19.6 L392.7,20.7 L399.0,25.5 L392.2,29.2 L371.3,28.2 L348.9,28.2 L328.3,29.9 L307.9,29.2 L287.7,29.2 L263.1,30.8 L243.6,29.0 L221.1,30.7 L200.5,32.4 L177.5,30.3 L155.6,29.6 L134.4,32.0 L113.3,33.0 L91.9,30.7 L67.9,34.0 L47.5,32.0 L27.3,34.7 L3.6,32.9Z%22 fill=%22%23E8891D%22/%3E%3C/svg%3E"); }
.fleches path.frag { transition: opacity .28s ease; }

/* flèche à main levée entre deux pastilles (slide « Naïvement ») */
.pastilles.fleches-main { grid-template-columns: 1fr 160px 1fr 160px 1fr 160px 1fr; gap: 8px; }
.pastilles .pas { width: 160px; height: 96px; margin-top: 42px; justify-self: center; overflow: visible; }
.pastilles .pas path { fill: none; stroke: var(--vermillon); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round;
                       vector-effect: non-scaling-stroke; filter: url(#main-encre); }
.pastille .lib.main { font-family: var(--main); color: var(--ocean); font-size: 68px; font-weight: 700;
                      letter-spacing: 0; transform: rotate(-3deg); }

/* le grand « ? » fin de la slide buy or make, centré sur la hauteur du bloc BUY / or / MAKE */
.q-fin { font-size: 520px; font-weight: 200; color: var(--ocean); line-height: .8; align-self: center; margin-left: 40px; }

/* le « ? » à main levée de la slide buy or make (plus utilisé) */
.q-main { font-family: var(--main); font-weight: 700; color: var(--vermillon); font-size: 380px; line-height: .82;
          transform: rotate(6deg); }

/* trait de pinceau sous un mot (système de design) : le soulignement qui compte ; saffron sur une bulle bleue.
   (.trait est déjà pris par l'axe éphémère → durable) */
/* le trait est un fond de texte, réparti ligne par ligne (box-decoration-break) : un mot souligné peut
   passer à la ligne sans casser la phrase. L'ancienne version en ::after sur un inline-block forçait des retours (16/09) */
.souligne { display: inline; padding-bottom: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
            background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 44%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-4%25%22 y=%22-40%25%22 width=%22108%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0023 0.320%22 numOctaves=%222%22 seed=%224%22 result=%22n%22/%3E%3CfeColorMatrix in=%22n%22 type=%22matrix%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.55%22 result=%22m%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22m%22 operator=%22in%22 result=%22s%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0150 0.140%22 numOctaves=%222%22 seed=%229%22 result=%22dd%22/%3E%3CfeDisplacementMap in=%22s%22 in2=%22dd%22 scale=%226.2%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M1.0,23.8 L2.9,9.9 L23.9,11.0 L48.4,10.1 L67.7,9.4 L92.0,11.9 L111.6,11.0 L135.5,8.6 L155.7,8.9 L179.1,11.6 L200.6,10.6 L220.7,10.4 L241.0,10.5 L262.2,12.7 L285.6,12.6 L307.0,13.3 L328.4,16.9 L352.3,15.9 L373.4,19.6 L392.7,20.7 L399.0,25.5 L392.2,29.2 L371.3,28.2 L348.9,28.2 L328.3,29.9 L307.9,29.2 L287.7,29.2 L263.1,30.8 L243.6,29.0 L221.1,30.7 L200.5,32.4 L177.5,30.3 L155.6,29.6 L134.4,32.0 L113.3,33.0 L91.9,30.7 L67.9,34.0 L47.5,32.0 L27.3,34.7 L3.6,32.9Z%22 fill=%22%23D04629%22 filter=%22url(%23b)%22/%3E%3C/svg%3E") left calc(100% + .02em) / 100% .24em no-repeat; }
.souligne.bleu { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 44%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-4%25%22 y=%22-40%25%22 width=%22108%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0023 0.320%22 numOctaves=%222%22 seed=%224%22 result=%22n%22/%3E%3CfeColorMatrix in=%22n%22 type=%22matrix%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.55%22 result=%22m%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22m%22 operator=%22in%22 result=%22s%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0150 0.140%22 numOctaves=%222%22 seed=%229%22 result=%22dd%22/%3E%3CfeDisplacementMap in=%22s%22 in2=%22dd%22 scale=%226.2%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M1.0,23.8 L2.9,9.9 L23.9,11.0 L48.4,10.1 L67.7,9.4 L92.0,11.9 L111.6,11.0 L135.5,8.6 L155.7,8.9 L179.1,11.6 L200.6,10.6 L220.7,10.4 L241.0,10.5 L262.2,12.7 L285.6,12.6 L307.0,13.3 L328.4,16.9 L352.3,15.9 L373.4,19.6 L392.7,20.7 L399.0,25.5 L392.2,29.2 L371.3,28.2 L348.9,28.2 L328.3,29.9 L307.9,29.2 L287.7,29.2 L263.1,30.8 L243.6,29.0 L221.1,30.7 L200.5,32.4 L177.5,30.3 L155.6,29.6 L134.4,32.0 L113.3,33.0 L91.9,30.7 L67.9,34.0 L47.5,32.0 L27.3,34.7 L3.6,32.9Z%22 fill=%22%231E5FD1%22 filter=%22url(%23b)%22/%3E%3C/svg%3E"); }
.bulle .souligne { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 44%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-4%25%22 y=%22-40%25%22 width=%22108%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0023 0.320%22 numOctaves=%222%22 seed=%224%22 result=%22n%22/%3E%3CfeColorMatrix in=%22n%22 type=%22matrix%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.55%22 result=%22m%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22m%22 operator=%22in%22 result=%22s%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0150 0.140%22 numOctaves=%222%22 seed=%229%22 result=%22dd%22/%3E%3CfeDisplacementMap in=%22s%22 in2=%22dd%22 scale=%226.2%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M1.0,23.8 L2.9,9.9 L23.9,11.0 L48.4,10.1 L67.7,9.4 L92.0,11.9 L111.6,11.0 L135.5,8.6 L155.7,8.9 L179.1,11.6 L200.6,10.6 L220.7,10.4 L241.0,10.5 L262.2,12.7 L285.6,12.6 L307.0,13.3 L328.4,16.9 L352.3,15.9 L373.4,19.6 L392.7,20.7 L399.0,25.5 L392.2,29.2 L371.3,28.2 L348.9,28.2 L328.3,29.9 L307.9,29.2 L287.7,29.2 L263.1,30.8 L243.6,29.0 L221.1,30.7 L200.5,32.4 L177.5,30.3 L155.6,29.6 L134.4,32.0 L113.3,33.0 L91.9,30.7 L67.9,34.0 L47.5,32.0 L27.3,34.7 L3.6,32.9Z%22 fill=%22%23A9C4F2%22 filter=%22url(%23b)%22/%3E%3C/svg%3E"); }

/* trait de pinceau sous une zone d'image (en % du cadre .annote) : souligne ce qui compte */
.trait-img { position: absolute; pointer-events: none; transform: rotate(-1.6deg); background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 44%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-4%25%22 y=%22-40%25%22 width=%22108%25%22 height=%22180%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0023 0.320%22 numOctaves=%222%22 seed=%224%22 result=%22n%22/%3E%3CfeColorMatrix in=%22n%22 type=%22matrix%22 values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.55%22 result=%22m%22/%3E%3CfeComposite in=%22SourceGraphic%22 in2=%22m%22 operator=%22in%22 result=%22s%22/%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0150 0.140%22 numOctaves=%222%22 seed=%229%22 result=%22dd%22/%3E%3CfeDisplacementMap in=%22s%22 in2=%22dd%22 scale=%226.2%22 xChannelSelector=%22R%22 yChannelSelector=%22G%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M1.0,23.8 L2.9,9.9 L23.9,11.0 L48.4,10.1 L67.7,9.4 L92.0,11.9 L111.6,11.0 L135.5,8.6 L155.7,8.9 L179.1,11.6 L200.6,10.6 L220.7,10.4 L241.0,10.5 L262.2,12.7 L285.6,12.6 L307.0,13.3 L328.4,16.9 L352.3,15.9 L373.4,19.6 L392.7,20.7 L399.0,25.5 L392.2,29.2 L371.3,28.2 L348.9,28.2 L328.3,29.9 L307.9,29.2 L287.7,29.2 L263.1,30.8 L243.6,29.0 L221.1,30.7 L200.5,32.4 L177.5,30.3 L155.6,29.6 L134.4,32.0 L113.3,33.0 L91.9,30.7 L67.9,34.0 L47.5,32.0 L27.3,34.7 L3.6,32.9Z%22 fill=%22%23D04629%22 filter=%22url(%23b)%22/%3E%3C/svg%3E") center/100% 100% no-repeat; }

/* tampon à main levée (système de design) : cadre encré vermillon, seconde ligne au marqueur */
.tampon.main { border: 6px solid var(--vermillon); border-radius: 8px; color: var(--vermillon); background: transparent;
               transform: rotate(-2.4deg); filter: url(#main-encre); padding: 20px 44px 14px; }
.tampon.main .g { font-weight: 900; letter-spacing: .02em; }
.tampon.main .p { font-family: var(--main); font-weight: 700; font-size: 50px; margin-top: 2px; }

/* Naïvement : flèches droites, C'est fait au marqueur en bleu, bonhomme content dessiné dessous */
.pastilles .pas.droite path { filter: none; stroke: var(--ocean); stroke-width: 4; }
.pastille .smiley { width: 120px; height: 120px; margin-top: 4px; overflow: visible; }
.pastille .smiley path { fill: none; stroke: var(--ocean); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
                         vector-effect: non-scaling-stroke; filter: url(#main-encre); }

/* phrase écrite à la main, sans cadre (Chat / Cowork / Code) */
.phrase-main { font-family: var(--main); font-weight: 700; font-size: 54px; line-height: 1.15; color: var(--vermillon); }

/* conséquences à la main derrière un coin (MCP ou API) */
.consequences { align-self: flex-end; margin: 22px 40px 0 0; display: flex; flex-direction: column; gap: 6px; }
.consequences > div { display: flex; align-items: center; gap: 14px; font-family: var(--main); font-weight: 700; font-size: 44px; color: var(--vermillon); line-height: 1; }
.consequences .coin { width: 44px; height: 44px; overflow: visible; }
.consequences .coin path { fill: none; stroke: var(--vermillon); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: url(#main-encre); }

/* frise du problème nº2 écrite à la main : libellés au marqueur, heure soulignée au pinceau (16/09) */
.slide.sombre .frise.main .lib, .frise.main .lib { font-family: var(--main); font-weight: 700; font-size: 44px; line-height: 1.02; color: var(--vermillon); letter-spacing: 0; }
.frise.main .h .souligne { padding-bottom: .12em; background-size: 100% .3em; }

/* la vue d'ensemble, nulle part : une note au marqueur entourée, sur le fond sombre du problème nº1 */
.vide-main { text-align: center; margin-top: 178px; }
.vide-main .entoure-main { font-size: 84px; transform: rotate(-2deg); padding: .72em 2.3em; }


/* --- annotations manuscrites (capture des tarifs Jira) -------------------- */

.manuscrit {
  position: absolute; font-family: var(--main); color: var(--vermillon);
  font-size: 96px; font-weight: 700; line-height: 1; transform: rotate(-4deg);
}

/* --- MonSéjour : le produit, dans sa propre identité ---------------------- */

.ms { background: #F4F4F8; }
.ms .marque-ms { display: flex; align-items: center; gap: 28px; }
.ms .carre { width: 104px; height: 104px; background: var(--ms-blue); color: #fff; border-radius: 8px;
             display: grid; place-items: center; font-size: 46px; font-weight: 800; letter-spacing: .02em; }
.ms .nom { font-size: 118px; font-weight: 800; color: var(--ms-ink); letter-spacing: -.03em; }
.ms .bl { font-size: 44px; color: var(--ms-grey); margin-top: 22px; }
.ms .chapo { font-size: 26px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-blue); margin-top: 46px; }

.ms h1 { color: var(--ms-ink); font-size: 64px; }
.ms .etiq { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.ms .etiq .b { width: 58px; height: 58px; border-radius: 8px; background: var(--ms-blue); color: #fff;
               display: grid; place-items: center; font-size: 28px; font-weight: 800; }
.ms .etiq .l { font-size: 26px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ms-blue); }

.ms .colonnes { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; min-height: 0; }
.ms .qui { display: flex; align-items: center; gap: 16px; padding: 0 0 10px; border-bottom: 3px solid var(--ms-blue); font-size: 26px; font-weight: 800; color: var(--ms-ink); }
.ms .qui .picto-qui { width: 96px; height: 96px; flex: none; display: grid; place-items: center; }
.ms .qui .picto-qui img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; }
.ms .qui .picto-qui:empty { border: 2px dashed var(--ms-blue-2); border-radius: 50%; }
.ms .qui .picto-qui svg { width: 60px; height: 60px; stroke: var(--ms-blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms .phrase-ms { align-self: flex-start; min-height: 88px; margin-bottom: 22px; font-size: 32px; line-height: 1.3; color: var(--ms-grey); }
.ms .questions-pill { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.ms .pil { background: #fff; border-radius: 14px; padding: 20px 30px; font-size: 34px; font-weight: 700;
           box-shadow: 0 4px 18px rgba(22,22,22,.07); }
.ms .pil:nth-child(2) { margin-left: 88px; }
.ms .pil:nth-child(3) { margin-left: 44px; }
.ms .alerte { display: inline-flex; align-items: center; gap: 16px; background: var(--ms-warn-l);
              color: var(--ms-warn); border-radius: 12px; padding: 16px 28px; font-size: 30px; font-weight: 700; margin-top: 40px; }
.ms .ok { display: inline-flex; align-items: center; gap: 14px; background: var(--ms-green-l);
          color: var(--ms-green); border-radius: 12px; padding: 16px 28px; font-size: 32px; font-weight: 700; }

/* téléphone */
.tel { width: 420px; background: var(--ms-ink); border-radius: 36px; padding: 12px; box-shadow: 0 26px 60px rgba(22,22,22,.22); }
.tel .ecr { background: #fff; border-radius: 26px; overflow: hidden; }
.tel .bar { background: var(--ms-blue); color: #fff; padding: 22px 24px 20px; }
.tel .bar .m { font-size: 17px; font-weight: 800; letter-spacing: .14em; opacity: .85; }
.tel .bar .b { font-size: 30px; font-weight: 800; margin-top: 4px; }
.tel .zone { padding: 20px 22px 0; }
.tel .conv { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.tel .conv .l { font-size: 15px; font-weight: 800; letter-spacing: .1em; color: var(--ms-blue); }
.tel .conv .d { font-size: 25px; font-weight: 800; color: var(--ms-ink); margin-top: 4px; }
.tel .conv .s { font-size: 19px; color: #666; margin-top: 2px; }
.tel .etat { margin-top: 12px; border-radius: 8px; padding: 12px 14px; font-size: 21px; font-weight: 700; }
.tel .etat.att { background: var(--ms-warn-l); color: var(--ms-warn); }
.tel .etat.fait { background: var(--ms-green-l); color: var(--ms-green); }
.tel ul.doc { list-style: none; margin-top: 14px; }
.tel ul.doc li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #E6E6E6; font-size: 21px; color: var(--ms-ink); }
.tel ul.doc li:last-child { border-bottom: none; }
.tel ul.doc .v { width: 26px; height: 26px; border-radius: 50%; background: var(--ms-green); color: #fff;
                 display: grid; place-items: center; font-size: 16px; flex: none; }
.tel ul.doc .v.vide { background: #fff; border: 2px solid var(--ms-warn); }
.tel ul.doc li.manque { color: var(--ms-warn); font-weight: 700; }
.tel .bouton { background: var(--ms-blue); color: #fff; text-align: center; border-radius: 8px;
               padding: 14px; font-size: 21px; font-weight: 700; margin: 16px 0 20px; }
.tel .onglets { display: flex; border-top: 1px solid #E6E6E6; }
.tel .onglets span { flex: 1; text-align: center; padding: 14px 0; font-size: 15px; font-weight: 700; color: #7A7A85; }
.tel .onglets span.actif { color: var(--ms-blue); box-shadow: inset 0 3px 0 var(--ms-blue); }

/* fenêtre back office */
.fen { background: #2F2F3C; border-radius: 16px; padding: 14px; box-shadow: 0 26px 70px rgba(22,22,22,.24); width: 100%; }
.fen .titre-fen { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; }
.fen .titre-fen i { width: 13px; height: 13px; border-radius: 50%; background: #8A8A9A; display: block; }
.fen .titre-fen .onglet { margin-left: 14px; background: #3F3F4E; color: #C9C9D6; border-radius: 6px;
                           padding: 6px 18px; font-size: 20px; }
.fen .page { background: #fff; border-radius: 10px; overflow: hidden; }
.fen .entete { background: var(--ms-blue); color: #fff; display: flex; align-items: center; gap: 18px; padding: 20px 26px; }
.fen .entete .ms { background: #fff; color: var(--ms-blue); border-radius: 6px; width: 40px; height: 40px;
                   display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.fen .entete .t { font-size: 30px; font-weight: 800; }
.fen .entete .r { margin-left: auto; font-size: 24px; color: #DCDCFF; }
.fen table { width: 100%; border-collapse: collapse; }
.fen th { text-align: left; font-size: 21px; font-weight: 800; color: #666; letter-spacing: .04em;
          padding: 16px 26px 12px; border-bottom: 2px solid var(--ms-ink); }
.fen td { padding: 18px 26px; border-bottom: 1px solid #DDD; font-size: 28px; color: var(--ms-grey); }
.fen td.h { font-weight: 800; color: var(--ms-blue); white-space: nowrap; }
.fen td.p { font-weight: 800; color: var(--ms-ink); white-space: nowrap; }
.fen tr.vert td { background: #F4FAF6; }
.fen .badge { display: inline-block; border-radius: 8px; padding: 8px 16px; font-size: 24px; font-weight: 800; white-space: nowrap; }
.fen .badge.ok { background: var(--ms-green-l); color: var(--ms-green); }
.fen .badge.att { background: var(--ms-warn-l); color: var(--ms-warn); }
.fen .pied-fen { padding: 16px 26px 20px; font-size: 24px; color: #666; }

.ms .resultats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 30px; }
.ms .res { background: #fff; border-radius: 10px; padding: 24px 28px; border-top: 6px solid var(--ms-blue); }
.ms .res:nth-child(2) { border-top-color: var(--ms-blue-2); }
.ms .res:nth-child(3) { border-top-color: var(--ms-green); }
.ms .res .t { font-size: 34px; font-weight: 800; color: var(--ms-ink); }
.ms .res .d { font-size: 26px; color: #666; margin-top: 6px; }
/* écran de secrétariat posé dans un moniteur, pour qu'on repère « l'écran » sans avoir à le lire */
.moniteur { border: 14px solid var(--ms-ink); border-radius: 22px; background: var(--ms-ink); box-shadow: 0 26px 60px rgba(22,22,22,.22); position: relative; }
.moniteur .fen { border-radius: 10px; }
.moniteur .pied-moniteur { position: absolute; left: 50%; bottom: -74px; width: 260px; height: 60px; margin-left: -130px;
  background: linear-gradient(var(--ms-ink), var(--ms-ink)) center/70px 46px no-repeat, linear-gradient(var(--ms-ink), var(--ms-ink)) bottom/260px 14px no-repeat; border-radius: 0 0 8px 8px; }
.ms .pied-ms { display: flex; align-items: center; gap: 20px; font-size: 28px; color: var(--ms-grey); margin-top: auto; padding-top: 26px; }
.ms .pied-ms .carre { width: 52px; height: 52px; font-size: 24px; border-radius: 6px; }
.ms .sombre { display: inline-flex; align-items: center; gap: 14px; background: var(--ms-ink); color: #fff;
              border-radius: 10px; padding: 16px 28px; font-size: 30px; font-weight: 700; }

/* --- fin : merci ---------------------------------------------------------- */

.merci { display: grid; grid-template-columns: 420px 1fr; gap: 88px; align-items: center; flex: 1; }
.merci img.portrait { width: 420px; object-fit: contain; align-self: center; }
.merci h1 { font-size: 128px; }
.merci .role { font-size: 48px; color: var(--ocean); font-weight: 700; margin-top: 12px; }
.merci .ligne { font-size: 36px; color: var(--ink-2); margin-top: 22px; line-height: 1.35; max-width: 1000px; }
.merci .apres { margin-top: 42px; background: var(--pale); border-radius: var(--r); padding: 26px 36px;
                font-size: 32px; display: inline-block; }
.merci .apres b { color: var(--ocean); }
/* Merci refaite le 17/09 : trois colonnes (portrait, texte, QR LinkedIn), avis TingEvent */
/* Merci, quatrième composition du 17/09, tout en positions fixes sur la scène (1920 × 1080) :
   « Merci » en haut à gauche, nom et rôle dessous ; portrait en bas à gauche, posé sur le bord ; à sa droite, sur le bas,
   la boîte « Juste après » ; QR LinkedIn en haut à droite, l'avis TingEvent dessous */
.slide.merci-slide { padding: 0; }
.merci3 { position: absolute; inset: 0; }
.merci3 h1 { position: absolute; left: 64px; top: 30px; font-size: 360px; line-height: .95; letter-spacing: -.04em; max-width: none; }
.merci3 .qui { position: absolute; left: 76px; top: 400px; font-size: 42px; line-height: 1.25; color: var(--ink-2); }
.merci3 .qui b { color: var(--ocean); font-weight: 800; font-size: 50px; }
.merci3 img.portrait { position: absolute; left: 30px; bottom: 0; width: 540px; height: auto; }
.merci3 .qr { position: absolute; right: 64px; top: 60px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.merci3 .qr img { width: 560px; height: 560px; image-rendering: pixelated; border: 8px solid var(--pale); border-radius: 16px; }
.merci3 .qr .lib { font-size: 27px; color: var(--muted); white-space: nowrap; }
.merci3 .qr .lib b { color: var(--ink); font-weight: 700; }
.merci3 .avis { position: absolute; right: 64px; top: 720px; width: 576px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
                font-size: 28px; line-height: 1.35; color: var(--ink-2); }
.merci3 .avis .etoiles { color: var(--saffron); font-size: 34px; letter-spacing: .04em; white-space: nowrap; }
.merci3 .avis b { color: var(--ocean); }
.merci3 .apres { position: absolute; left: 600px; right: 64px; bottom: 36px; min-height: 180px; box-sizing: border-box;
                 background: var(--pale); border-radius: var(--r); padding: 26px 40px; font-size: 34px; line-height: 1.3; color: var(--ink); }
.merci3 .apres b { color: var(--ocean); }
.merci3 .apres .titre { display: block; margin-top: 4px; font-size: 29px; white-space: nowrap; }
.merci3 .apres .avec { display: block; margin-top: 6px; font-size: 26px; color: var(--muted); }
.merci .apres .avec { display: block; margin-top: 8px; font-size: 27px; color: var(--muted); }
.merci .avis { margin-top: 34px; display: flex; align-items: center; gap: 22px; font-size: 28px; color: var(--ink-2); max-width: 900px; line-height: 1.35; }
.merci .avis .etoiles { color: var(--saffron); font-size: 34px; letter-spacing: .06em; white-space: nowrap; }
.merci .avis b { color: var(--ocean); }
.merci .qr { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.merci .qr img { width: 320px; height: 320px; image-rendering: pixelated; border: 6px solid var(--pale); border-radius: 14px; }
.merci .qr .lib { font-size: 22px; color: var(--muted); text-align: center; white-space: nowrap; }
.merci .qr .lib b { color: var(--ink); font-weight: 700; }
.aplacer { border: 3px dashed var(--ocean); border-radius: 18px; color: var(--ocean);
           font-size: 28px; font-weight: 700; padding: 20px 28px; display: inline-block; }

/* --- réservé (problème nº3) ----------------------------------------------- */

.reserve { border: 5px dashed var(--turq); border-radius: var(--r-lg); padding: 60px 70px; text-align: center; }
.reserve .t { font-size: 44px; font-weight: 800; color: var(--ocean); }
.reserve .d { font-size: 34px; color: var(--muted); margin-top: 18px; line-height: 1.4; }

/* ============================================================================
   Habillage : barre de progression, compteur, notes, plan, minuteur
   ========================================================================== */

/* Bandeau haut (S2, 17/09) : cinq segments dans les marges du contenu, un nom sous chacun,
   la section en cours en foncé et son segment rempli au prorata des slides. Tout en gris.
   Il vit dans #scene, donc à l'échelle des slides. Les noms sont cliquables. */
#plan-haut { position: absolute; left: 128px; right: 128px; top: 0; z-index: 30; pointer-events: none;
             transition: opacity .25s ease; }
#plan-haut.cache, #signature.cache { opacity: 0; pointer-events: none; }
#plan-haut .segs { display: flex; gap: 10px; }
#plan-haut .segs i { flex: 1; height: 6px; background: #DDE0E5; border-radius: 0 0 3px 3px; position: relative; overflow: hidden; }
#plan-haut .segs i.fait { background: #8B929C; }
#plan-haut .segs i.cur::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: #8B929C;
                                transition: width .3s ease; }
#plan-haut .noms { display: flex; gap: 10px; padding-top: 10px; }
#plan-haut .noms button { flex: 1; font: inherit; font-size: 20px; line-height: 1.2; color: #A9AFB8; background: none; border: 0; padding: 0;
                          text-align: left; cursor: pointer; pointer-events: auto; white-space: nowrap; }
#plan-haut .noms button.cur { color: var(--ink-2); font-weight: 700; }
#plan-haut .noms button:hover { color: var(--ocean); }
#plan-haut.sombre .segs i { background: rgba(255,255,255,.14); }
#plan-haut.sombre .segs i.fait, #plan-haut.sombre .segs i.cur::after { background: rgba(255,255,255,.6); }
#plan-haut.sombre .noms button { color: rgba(255,255,255,.35); }
#plan-haut.sombre .noms button.cur { color: #fff; }
#plan-haut.sombre .noms button:hover { color: var(--turq); }

/* Signature, en bas à gauche : le nom et le titre du talk, en italique et plus clair que les sources
   (17/09 : droite et du même gris, le nom se lisait comme une ligne de plus des sources) */
#signature { position: absolute; left: 128px; bottom: 28px; z-index: 30; font-size: 19px; font-style: italic; color: #A9AFB8;
             letter-spacing: .01em; pointer-events: none; transition: opacity .25s ease; white-space: nowrap; }
#signature .qui { color: #8B929C; }
#signature .sep { margin: 0 12px; color: #C9CDD3; font-style: normal; }
#signature.sombre, #signature.sombre .qui { color: rgba(255,255,255,.42); }
#signature.sombre .talk { color: rgba(255,255,255,.34); }
#signature.sombre .sep { color: rgba(255,255,255,.22); }

/* Barre de navigation, toujours visible et toujours au-dessus de tout :
   c'est elle qui garantit de reprendre la main depuis une video ou une page
   HTML embarquee, qui capteraient sinon le clic et le clavier. */
#nav {
  position: fixed; right: 22px; bottom: 20px; z-index: 58;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 9px;
  box-shadow: 0 10px 28px -10px rgba(10,22,40,.28);
  backdrop-filter: blur(8px);
}
#nav button {
  font: inherit; color: var(--ink); background: transparent; border: 0;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1; display: grid; place-items: center;
}
#nav button:hover { background: var(--pale); color: var(--ocean); }
#nav button:disabled { opacity: .3; cursor: default; background: none; }
#compteur {
  font-family: var(--mono); font-size: 15px; color: var(--muted);
  padding: 0 6px; cursor: pointer; user-select: none; min-width: 74px; text-align: center;
}
#compteur:hover { color: var(--ocean); }

#minuteur {
  position: fixed; left: 18px; bottom: 14px; z-index: 40;
  font-family: var(--mono); font-size: 13px; color: var(--ocean); font-weight: 700;
  background: rgba(255,255,255,.82); border-radius: 8px; padding: 4px 10px;
  display: none;
}
#minuteur.on { display: block; }

#notes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  max-height: 42vh; overflow: auto;
  background: #0A1628; color: #E8EDF5;
  padding: 22px 32px 26px; font-size: 15px; line-height: 1.5;
  border-top: 3px solid var(--ocean);
  display: none;
}
#notes.on { display: block; }
#notes h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #7FA6E8; margin-bottom: 10px; }
#notes p { margin-bottom: 8px; }
#notes p:last-child { margin-bottom: 0; }

/* Plan en storyboard (21/09) : des post-its, une ligne par section, une couleur par type de carte.
   La planche est dessinée pour 1920 px de large, deck.js la met à l'échelle de la fenêtre.
   Version précédente, une vignette par slide : ../archives/2026-09-21-plan-une-vignette-par-slide.md */
#plan {
  position: fixed; inset: 0; z-index: 50; background: #0A1628; overflow: auto; display: none;
}
#plan.on { display: block; }
#plan .planche { width: 1920px; padding: 36px 48px 28px; color: #E8EDF5; }
#plan .haut { display: flex; align-items: baseline; gap: 28px; margin-bottom: 18px; }
#plan .haut h1 { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
#plan .haut .tot { font-size: 22px; color: #7FA6E8; font-family: var(--mono); }
#plan .ligne { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
#plan .ligne .nom { width: 196px; flex: none; padding-top: 6px; }
#plan .ligne .nom b { display: block; font-size: 21px; color: #fff; line-height: 1.2; }
#plan .ligne .nom span { font-size: 17px; color: #7FA6E8; font-family: var(--mono); }
#plan .cartes { display: flex; flex-wrap: wrap; gap: 10px; }
#plan .carte {
  width: 150px; height: 148px; border-radius: 6px; padding: 12px 12px 10px; cursor: pointer;
  display: flex; flex-direction: column; box-shadow: 0 6px 14px rgba(0,0,0,.35);
  background: #F3F4F6; color: #0A1628;
}
#plan .carte:hover { transform: translateY(-3px); }
#plan .carte.actuelle { outline: 4px solid #fff; outline-offset: 3px; }
#plan .carte .t { font-size: 18px; font-weight: 700; line-height: 1.22; }
#plan .carte .bas { margin-top: auto; display: flex; justify-content: space-between; font-size: 15px; opacity: .78; }
#plan .carte .n { font-family: var(--mono); }
#plan .t-cadre  { background: #8B929C; }
#plan .t-fil    { background: #7FA6E8; }
#plan .t-recit  { background: #F3F4F6; }
#plan .t-notion { background: var(--turq); }
#plan .t-demo   { background: var(--saffron); }
#plan .t-apres  { background: var(--vermillon); color: #fff; }
#plan .t-tips   { background: #C9B8F5; }
#plan .legende { display: flex; gap: 22px; flex-wrap: wrap; font-size: 17px; color: #C9D6EA; padding-top: 14px; }
#plan .legende span { display: inline-flex; align-items: center; gap: 8px; }
#plan .legende i { width: 18px; height: 18px; border-radius: 5px; display: inline-block; }
#plan .legende .src { margin-left: auto; color: #7A8AA3; font-style: italic; }

#aide {
  position: fixed; inset: 0; z-index: 60; background: rgba(10,22,40,.96); color: #E8EDF5;
  display: none; place-items: center;
}
#aide.on { display: grid; }
#aide dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; font-size: 16px; }
#aide dt { font-family: var(--mono); color: var(--turq); text-align: right; }
#aide h3 { font-size: 22px; margin-bottom: 26px; }

/* ============================================================================
   Impression : une slide par page, pour garder un PDF de secours
   ========================================================================== */

@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { overflow: visible; background: #fff; height: auto; }
  #scene { position: static; width: 1920px; height: auto; transform: none; }
  .slide { position: relative; display: flex !important; width: 1920px; height: 1080px;
           page-break-after: always; break-after: page; }
  .slide.on > * { animation: none; }
  .frag { opacity: 1; }  /* le PDF de secours montre tout */
  #plan-haut, #signature, #compteur, #notes, #plan, #aide, #minuteur { display: none !important; }
}

/* --- quatre boards et le cadre vide (contexte du probleme n1) ------------- */

.board {
  background: var(--bg); border: 3px solid var(--line); border-radius: 28px;
  padding: 26px 28px 22px; min-height: 252px; display: flex; flex-direction: column;
}
.board > span { font-size: 34px; font-weight: 700; margin-bottom: 22px; }
.board::after {
  content: ""; display: block; margin-top: auto; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--turq) var(--av, 48%), var(--soft) var(--av, 48%));
}
.board:nth-child(1) { --av: 62%; }
.board:nth-child(2) { --av: 34%; }
.board:nth-child(3) { --av: 46%; }
.board:nth-child(4) { --av: 22%; }
.board .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.board .cols i { display: block; height: 34px; border-radius: 8px; background: var(--pale); }
.board .cols i.fait { background: var(--turq); }

.vide-cadre {
  margin: 48px auto 0; width: 62%;
  border: 4px dashed var(--ocean); border-radius: 28px;
  padding: 36px; text-align: center;
}
.vide-cadre .q { font-size: 76px; font-weight: 800; color: var(--ocean); line-height: 1; }
.vide-cadre .l { font-size: 40px; font-weight: 700; margin-top: 12px; }


/* --- ajustements de mise en page ----------------------------------------- */

/* le tampon se pose sous les cartes, decale vers la droite, jamais par-dessus */
.tampon.sous { align-self: flex-end; margin: -26px 12px 0 0; position: relative; z-index: 2; }

/* MonSejour : version compacte des maquettes quand deux ecrans cohabitent */
.compact .tel { zoom: .78; }
.compact .fen { zoom: .84; }
.compact .resultats { margin-top: 22px; }
.compact .res { padding: 18px 22px; }
.compact .res .t { font-size: 30px; }
.compact .res .d { font-size: 24px; }

/* TCO : la page est dense, on resserre */
.tco .formule { max-height: 104px; }
.tco table.tb td { padding: 15px 24px 15px 0; font-size: 29px; }
.tco table.tb th { padding-bottom: 12px; }
.tco .legende { margin-top: 12px; font-size: 24px; }
.tco .retenir.nu { font-size: 32px; line-height: 1.28; }

/* annotations manuscrites : plus grandes, plus proches de la capture */
.manuscrit { font-size: 116px; }


/* ============================================================================
   Pages HTML vivantes et commandes video
   ========================================================================== */

/* une page HTML posee en direct dans la slide : elle se fait defiler a la molette */
.slide.plein iframe.page-vive {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: #fff;
}
/* Pages du daily : dessinees pour 1280 px de large. On les rend dans une fenetre
   de 1280 x 720 agrandie une fois et demie, ce qui remplit la slide et porte le
   texte courant de 18 a 27 px, au-dessus du plancher de 26 px fixe pour la salle. */
.slide.plein iframe.page-vive.zoom {
  inset: auto; top: 0; left: 0;
  width: 1280px; height: 720px;
  transform: scale(1.5); transform-origin: top left;
}


/* la page entiere, par-dessus le deck */
#explorer { position: fixed; inset: 0; z-index: 55; background: #0A1628; display: none; flex-direction: column; }
#explorer.on { display: flex; }
#explorer .barre {
  flex: none; display: flex; align-items: center; gap: 18px;
  padding: 10px 16px; background: #0A1628; color: #C9D6EA; font-size: 14px;
}
#explorer .barre .nom { font-family: var(--mono); color: #7FA6E8; }
#explorer .barre .aide { margin-left: auto; }
#explorer .barre kbd {
  font-family: var(--mono); background: #1B3355; border-radius: 5px; padding: 2px 7px; color: #E8EDF5;
}
#explorer .barre button {
  font: inherit; font-weight: 700; color: #0A1628; background: var(--turq);
  border: 0; border-radius: 7px; padding: 6px 16px; cursor: pointer;
}
#explorer iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* les commandes natives de la video restent disponibles : pas de clic capte par le deck */
.slide.plein video { cursor: default; }


/* ============================================================================
   Transitions sur fond foncé
   Les trois ouvertures de problème et « Et maintenant ? ». Elles ne portent
   aucune donnée : leur fond sombre dit à la salle qu'on change de partie.
   ========================================================================== */

.slide.sombre { background: var(--ocean-dk); color: #fff; }
.slide.sombre h1 { color: #fff; }
.slide.sombre .eyebrow { color: var(--turq); }
.slide.sombre .eyebrow::before { background: var(--turq); }
.slide.sombre .sous { color: #C7D6E6; }
.slide.sombre .sous b, .slide.sombre .sous strong { color: var(--turq); }
.slide.sombre .sous b, .slide.sombre .sous strong { color: var(--turq); }

/* les quatre boards de l'équipe */
.slide.sombre .board { background: rgba(255,255,255,.05); border-color: rgba(168,212,208,.22); }
.slide.sombre .board > span { color: #fff; }
.slide.sombre .board .cols i { background: rgba(168,212,208,.14); }
.slide.sombre .board .cols i.fait { background: rgba(168,212,208,.72); }
.slide.sombre .board::after { background: linear-gradient(90deg, var(--turq) var(--av, 48%), rgba(255,255,255,.10) var(--av, 48%)); }
.slide.sombre .vide-cadre { border-color: var(--turq); }
.slide.sombre .vide-cadre .q { color: var(--turq); }
.slide.sombre .vide-cadre .l { color: #fff; }

/* la frise horaire du problème nº2 : les pastilles restent claires,
   c'est ce qui garde les pictos lisibles */
.slide.sombre .frise .rail { background: rgba(168,212,208,.45); }
.slide.sombre .frise .rail::after { border-left-color: rgba(168,212,208,.45); }
.slide.sombre .moment .h { color: var(--turq); }
.slide.sombre .moment .ic { border-color: var(--ocean-dk); }
.slide.sombre .moment .ic.fort { border-color: var(--turq); background: #fff; }
.slide.sombre .moment .lib { color: #fff; }
.slide.sombre .moment .lib.ocean { color: var(--turq); }
.slide.sombre .mentions b { color: var(--turq); }
.slide.sombre .mentions span { color: #C7D6E6; }

/* les questions numérotées et le cadre réservé du problème nº3 */
.slide.sombre .question .n { color: var(--turq); }
.slide.sombre .question .q { color: #fff; }
.slide.sombre .reserve { border-color: rgba(168,212,208,.45); }
.slide.sombre .reserve .t { color: var(--turq); }
.slide.sombre .reserve .d { color: #9DB2CC; }

.slide.sombre .retenir { background: rgba(255,255,255,.07); color: #fff; }
.slide.sombre .retenir b { color: var(--turq); }
.slide.sombre .sources { color: #7E93AC; }

/* « Et maintenant ? » : une seule phrase, rien d'autre */
.slide.sombre .bascule { font-size: 150px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.slide.sombre .bascule em { color: var(--turq); font-style: normal; }
.slide.sombre .apres-bascule { font-size: 46px; color: #9DB2CC; line-height: 1.35; margin-top: 44px; max-width: 1400px; }

/* « fictif » de la slide du cas client : à la main, en haut à droite, souligné deux fois, pulse lente (16/09) */
.fictif { position: absolute; right: 150px; top: 90px; font-family: var(--main); font-weight: 700; color: var(--vermillon);
          font-size: 120px; line-height: 1; transform: rotate(-7deg); animation: fictif-pulse 1.8s ease-in-out infinite; }
.fictif svg { display: block; width: 100%; height: .34em; margin-top: -.06em; overflow: visible; }
.fictif svg path { fill: none; stroke: var(--vermillon); stroke-width: 6; stroke-linecap: round; filter: url(#main-encre); }
@keyframes fictif-pulse { 0%, 100% { opacity: 1; transform: rotate(-7deg) scale(1); } 50% { opacity: .55; transform: rotate(-7deg) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .fictif { animation: none; } }
@media print { .fictif { animation: none; } }

/* --- L'équipe MonSéjour, refaite dans le style du deck (16/09) ----------
   17/09 : une couleur par équipe (--eq), les mêmes que les timelines des slides 18 à 22 ;
   Novadis en gris, hors équipe ; CTO entouré à la main. */
.cto { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 12px 22px 12px 12px; border: 3px solid var(--ocean); border-radius: 14px;
       font-size: 26px; line-height: 1.1; color: var(--ink); flex: none; }
.cto .ini { width: 60px; height: 60px; border-radius: 50%; background: var(--ocean); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 24px; }
.equipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 70px; }
.equipe { --eq: var(--ocean); position: relative; background: var(--pale); border-radius: 18px; padding: 30px 32px 26px; display: flex; flex-direction: column; gap: 18px;
          border-top: 10px solid var(--eq); }
.equipe.pat { --eq: #6366F1; background: #EEEEFC; }
.equipe.hop { --eq: #14B8A6; background: #E5F7F4; }
.equipe.soc { --eq: #F59E0B; background: #FFF3DF; }
.equipe .tete { display: flex; align-items: center; gap: 16px; }
.equipe .picto { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.equipe .picto svg { width: 36px; height: 36px; stroke: var(--eq); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.equipe .nom-eq { font-size: 32px; white-space: nowrap; font-weight: 800; color: var(--ink); letter-spacing: -.015em; }
.equipe .tag { margin-left: auto; background: var(--eq); color: #fff; font-size: 22px; font-weight: 800; padding: 6px 12px; border-radius: 8px; letter-spacing: .06em; }
.equipe .mission { font-size: 27px; line-height: 1.32; color: var(--ink-2); min-height: 108px; }
.equipe .gens { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; }
.equipe .pers { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; }
.equipe .pers .ini { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid var(--eq); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 20px; }
.equipe .pers.po .ini { background: var(--eq); border-color: var(--eq); color: #fff; }
.equipe .pers .nom { font-size: 19px; color: var(--ink); white-space: nowrap; }
.equipe .pers .role { font-size: 15px; font-weight: 800; letter-spacing: .08em; color: var(--eq); }
.pied-equipes { display: flex; gap: 36px; margin-top: 30px; font-size: 26px; }
.pied-equipes .novadis { flex: 1.2; border: 3px dashed #C4C8CF; border-radius: 12px; padding: 16px 24px; color: var(--muted); }
.pied-equipes .novadis b { color: var(--muted); }
.pied-equipes .messagerie { flex: 1; border-left: 8px solid var(--ocean); background: var(--pale); border-radius: 0 12px 12px 0; padding: 16px 24px; color: var(--ink); }

/* --- conclusion « Make or buy… or wrap ? » (17/09) : deux moitiés, chacune centrée ----------------
   à gauche MAKE or BUY comme sur la slide 4, trois points de suspension qui battent ; à droite « or wrap ? »
   tout à la main, vermillon (le « ? » n'est plus bleu, demande de Montaine du 17/09) */
.corps.conclusion { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; }
.conclusion .gauche, .conclusion .droite { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.conclusion .mots { display: flex; flex-direction: column; align-items: flex-start;
                    font-size: 150px; font-weight: 800; line-height: 1.0; letter-spacing: -.035em; color: var(--ink); }
.conclusion .mots .ou { color: var(--muted); font-weight: 500; position: relative; top: -14px; }
.conclusion .suspens { display: inline-flex; gap: 16px; margin-left: 30px; vertical-align: baseline; }
.conclusion .suspens i { width: 24px; height: 24px; border-radius: 50%; background: var(--vermillon); display: inline-block;
                         animation: suspens 1.3s infinite ease-in-out; }
.conclusion .suspens i:nth-child(2) { animation-delay: .22s; }
.conclusion .suspens i:nth-child(3) { animation-delay: .44s; }
@keyframes suspens { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-14px); } }
.conclusion .droite { font-family: var(--main); font-weight: 700; color: var(--vermillon); gap: 8px; }
.conclusion .droite .ou { font-size: 110px; line-height: 1; transform: rotate(-5deg); position: relative; left: -160px; }
.conclusion .droite .ligne { display: flex; align-items: center; gap: 96px; }
.conclusion .droite .wrap { font-size: 230px; line-height: 1; transform: rotate(-2.5deg); }
.conclusion .droite .wrap .ell { left: -.36em; right: -.44em; top: -.16em; bottom: -.34em; }
.conclusion .droite .q-main { font-size: 250px; line-height: .8; transform: rotate(6deg); position: relative; top: -10px; }

/* --- conclusion, variante haute (17/09, vers 2 h) : WRAP ? en police haute, vermillon, lettre par lettre ----------
   La pile MAKE or BUY et WRAP ? côte à côte, centrés ensemble ; les trois points ne prennent plus de place
   (en surimpression après BUY) et s'effacent quand WRAP arrive. La police se change en une ligne : --haute.
   Taille et décalage calés au pixel pour que le haut des capitales et la ligne de base tombent sur ceux de MAKE et BUY. */
.corps.conclusion.haute { --haute: "League Gothic"; --taille-haute: 564px; --decale-haute: 6px;
                          justify-content: center; gap: 64px; }
.conclusion.haute .gauche, .conclusion.haute .droite { flex: none; }
.conclusion.haute .mots > span:last-child { position: relative; }
.conclusion.haute .suspens { position: absolute; left: 100%; bottom: .2em; }
.conclusion.haute .wrap-haut { display: flex; font-family: var(--haute); font-weight: 400; font-size: var(--taille-haute);
                               line-height: 1; color: var(--vermillon); position: relative; top: var(--decale-haute); }
.conclusion.haute .wrap-haut i { font-style: normal; opacity: 0; transform: translateY(.04em); }
.conclusion.haute .wrap-haut i.q { margin-left: .04em; }
.conclusion.haute .droite.vu .wrap-haut i { animation: lettre-haute .7s ease-out forwards; animation-delay: calc(.25s + var(--i) * .55s); }
@keyframes lettre-haute { to { opacity: 1; transform: none; } }
@media print { .conclusion.haute .wrap-haut i { opacity: 1; transform: none; animation: none; } }
@media (prefers-reduced-motion: reduce) { .conclusion.haute .droite.vu .wrap-haut i { animation-duration: .01s; animation-delay: 0s; } }

/* --- conclusion, essai 2 (17/09) : deux lignes -----------------------------------------------------
   MAKE | or BUY ••• ; dessous, sous le premier « or » : or WRAP ?  Grille à deux colonnes alignée sur les lignes de base,
   donc les deux « or » tombent l'un sous l'autre. WRAP ? en police haute, vermillon, lettre par lettre.
   --taille-haute règle la taille du WRAP (hauteur de capitale ≈ 0,73 × taille en League Gothic). */
.corps.conclusion.ligne { --haute: "League Gothic"; --taille-haute: 400px; justify-content: center; align-items: center; }
.conclusion.ligne .grille { display: grid; grid-template-columns: auto auto; column-gap: .32em; row-gap: 44px; align-items: baseline;
                            font-size: 150px; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--ink); }
.conclusion.ligne .c2 { grid-column: 2; display: flex; align-items: baseline; gap: .32em; }
.conclusion.ligne .ou { color: var(--muted); font-weight: 500; }
.conclusion.ligne .suspens { display: inline-flex; gap: 16px; margin-left: -.1em; align-self: baseline; }
.conclusion.ligne .suspens i { width: 24px; height: 24px; border-radius: 50%; background: var(--vermillon); display: inline-block;
                               animation: suspens 1.3s infinite ease-in-out; }
.conclusion.ligne .suspens i:nth-child(2) { animation-delay: .22s; }
.conclusion.ligne .suspens i:nth-child(3) { animation-delay: .44s; }
.conclusion.ligne .wrap-haut { display: flex; align-items: baseline; font-family: var(--haute); font-weight: 400; font-size: var(--taille-haute);
                               letter-spacing: 0; line-height: .9; color: var(--vermillon); }
.conclusion.ligne .wrap-haut i { font-style: normal; opacity: 0; transform: translateY(.04em); }
.conclusion.ligne .wrap-haut i.q { margin-left: .04em; }
.conclusion.ligne .l2.vu .wrap-haut i { animation: lettre-haute .7s ease-out forwards; animation-delay: calc(.35s + var(--i) * .55s); }
@media print { .conclusion.ligne .wrap-haut i { opacity: 1; transform: none; animation: none; } }
@media (prefers-reduced-motion: reduce) { .conclusion.ligne .l2.vu .wrap-haut i { animation-duration: .01s; animation-delay: 0s; } }

/* --- Merci épurée (17/09, vers 3 h), QR agrandi ------------------------------------------------------
   Le QR occupe la moitié droite : 666 px, une fois et demie l'image (444 px, 33 modules de 12 px), soit des modules
   de 18 px, nets, scannables du fond de la salle (888 px essayé : trop gros, avis de Montaine). Centré dans la moitié
   droite, le haut de ses modules aligné sur le haut du M de Merci. Le texte se regroupe à gauche :
   Merci, nom et rôle, puis « Juste après » ; en bas, le portrait. L'avis TingEvent est centré sous le QR. */
.merci4 { position: absolute; inset: 0; }
.merci4 h1 { position: absolute; left: 120px; top: 90px; font-size: 200px; line-height: .9; letter-spacing: -.045em; max-width: none; color: var(--ink); }
.merci4 .qui { position: absolute; left: 126px; top: 305px; display: flex; flex-direction: column; gap: 4px; }
.merci4 .qui b { font-size: 44px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.merci4 .qui span { font-size: 30px; color: var(--muted); }
.merci4 .apres { position: absolute; left: 126px; top: 455px; width: 730px; padding-top: 26px; border-top: 2px solid var(--line); }
.merci4 .apres .quand { font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.merci4 .apres .quand span { margin-left: 18px; color: var(--ocean); letter-spacing: .06em; }
.merci4 .apres .titre { margin-top: 10px; font-size: 50px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); }
.merci4 .apres .sous { margin-top: 8px; font-size: 27px; color: var(--ink-2); }
.merci4 .apres .avec { margin-top: 6px; font-size: 22px; color: var(--muted); }
.merci4 img.portrait { position: absolute; left: 70px; bottom: 0; width: 400px; height: auto; }
.merci4 .avis { margin-top: 34px; width: 560px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
                font-size: 22px; line-height: 1.4; color: var(--muted); }
.merci4 .avis .etoiles { color: var(--saffron); font-size: 24px; letter-spacing: .12em; }
.merci4 .avis b { color: var(--ink-2); font-weight: 700; }
.merci4 .qr { position: absolute; right: 237px; top: 77px; display: flex; flex-direction: column; align-items: center; }
.merci4 .qr img { width: 666px; height: 666px; image-rendering: pixelated; display: block; }
.merci4 .qr .lib { margin-top: 4px; font-size: 24px; color: var(--muted); white-space: nowrap; }
.merci4 .qr .lib b { color: var(--ink); font-weight: 700; }

/* --- dévoilement « se remplit » (17/09) : un segment de jauge apparaît de gauche à droite, sans écraser son texte ;
   .apres-remplit : ce qui l'accompagne arrive juste après, sur la même flèche. */
.frag.remplit { opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path .6s ease; }
.frag.remplit.vu { clip-path: inset(0 0 0 0); }
.frag.apres-remplit.vu { transition-delay: .4s; }
@media print { .frag.remplit { clip-path: none; } }

/* ==========================================================================
   Slide « Le produit MonSéjour », version du 20/09/2026 : chaque écran est
   posé sur le bas d'une photo qui dit où l'on est (chez Denise, à l'hôpital).
   ========================================================================== */

.ms .lieu {
  display: flex; align-items: center; gap: 16px; margin-bottom: 26px;
  font-size: 26px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ms-blue);
}
.ms .lieu svg {
  width: 46px; height: 46px; flex: none;
  stroke: var(--ms-blue); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ms .carte-lieu { display: flex; flex-direction: column; min-width: 0; }
.ms .photo-lieu {
  position: relative; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(22,22,22,.16);
}
.ms .photo-lieu img { width: 100%; display: block; }
/* l'écran mord sur le bas de la photo : marge négative sur ce conteneur, pas
   sur l'écran lui-même, dont le zoom fausserait la valeur */
.ms .pose { position: relative; z-index: 2; display: flex; justify-content: center; }
/* l'écran est plus étroit que la photo : les cellules rendent au tableau la
   largeur qu'il lui faut, sinon le badge « Prête · 4/4 » se coupe */
.ms .carte-lieu .fen td { padding-left: 16px; padding-right: 16px; }
.ms .p10 .fen td { padding-left: 10px; padding-right: 10px; }

/* ==========================================================================
   Retouches du 21/09/2026 (travail/retouches-2026-09-21/)
   ========================================================================== */

/* la pointe se pose au bout du trait : elle était 7 px avant la fin, le trait la dépassait */
.fleche::after { right: -12px; border-right-width: 0; }

/* l'engrenage : image fixe tournée par le CSS, et non plus un GIF dont la vitesse est figée dans le
   fichier. Le GIF faisait un tour en 11,5 s ; --tour règle la durée d'un tour, plus grand = plus lent.
   30 s d'abord, puis 60 s le 21/09 à la demande de Montaine (« encore plus doucement ») */
.engrenage { width: 520px; height: 520px; animation: tourne var(--tour, 60s) linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* cache posé sur une page embarquée : il ne laisse voir que son bandeau de tête à l'arrivée, la
   première flèche le retire. Cliquable tant qu'il est là, traversé par la souris ensuite */
.cache-page { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.cache-page.vu { pointer-events: auto; }
@media print { .cache-page { display: none; } }

/* slides de rappel du problème nº3 : la slide de contexte, où chaque question traitée porte une
   vignette de la page qui y répond, et où la question qui arrive passe en rouge */
.rappel-vignette { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; margin-top: 18px; }
.rappel-vignette img { max-width: 100%; max-height: 100%; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.rappel-vignette.pastille img { width: 100%; height: auto; border-radius: 999px; }

/* --- 21/09/2026 · slide 57, Systems of Record / Systems of Engagement -------
   Classes prefixees s57- : .mot, .question, .q et .r existent deja plus haut. */
.s57-titres { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .s57-t { font-size: 54px; font-weight: 800; letter-spacing: -.02em; line-height: 1.02;
           color: var(--ink); padding-bottom: 14px; border-bottom: 3px solid var(--ink); }
  .s57-t.eng { color: var(--ocean); border-bottom-color: var(--ocean); }

  .s57-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .s57-col { display: flex; flex-direction: column; }
  .s57-photo { width: 100%; height: 404px; border-radius: 20px; overflow: hidden;
               background: var(--soft); position: relative; }
  .s57-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .s57-credit { position: absolute; right: 10px; bottom: 9px; font-size: 16px; line-height: 1;
                color: #fff; background: rgba(6,25,46,.46); padding: 4px 8px; border-radius: 5px;
                letter-spacing: .01em; }

  .s57-mot { font-size: 40px; font-weight: 800; font-style: italic;
             color: var(--ink); margin-top: 16px; }
  .s57-col.eng .s57-mot { color: var(--ocean); }
  .s57-ligne { font-size: 27px; line-height: 1.34; color: var(--ink-2); margin-top: 8px; }

  .s57-bas { margin-top: 34px; }
  .s57-q { font-size: 46px; font-weight: 800; line-height: 1.1; color: var(--ink); }
/* --- fin slide 57 --- */