/* ============================================================
   CE PREMIUM — Présentation 2026
   Système de design extrait du PDF source
   ============================================================ */

:root{
  /* Couleurs relevées au pixel sur le PDF d'origine */
  --navy:        #071a3d;
  --navy-soft:   #0b2a5b;
  --navy-deep:   #0a1a3a;
  --rose:        #ff0b4f;
  --rose-alt:    #ff0a4e;
  --rose-pale:   #fff1f5;
  --rose-pale-2: #fdedf2;
  --gold:        #d89c24;
  --gold-light:  #e1aa35;
  --grey:        #536078;
  --grey-soft:   #4d5667;
  --muted:       #98a1b4;
  --muted-2:     #a8b0be;
  --line:        #eceff2;
  --line-2:      #f0f1f5;
  --line-3:      #e3e7ef;
  --paper:       #f6f7fa;
  --bg:          #fefdfc;
  --beige:       #fdf5ef;

  --radius-card: 14px;
  --shadow-card: 0 2px 10px rgba(7,26,60,.05), 0 8px 28px rgba(7,26,60,.06);
  --shadow-soft: 0 1px 4px rgba(7,26,60,.04), 0 6px 18px rgba(7,26,60,.05);

  --font: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-alt: "Inter", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }

html, body{
  margin:0; padding:0; height:100%;
  background:#0d1526;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ---------- Scène : 960 × 540 pt, mise à l'échelle du viewport ---------- */
.viewport{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.deck{
  position:relative;
  width:960px; height:540px;
  transform:scale(var(--scale,1));
  transform-origin:center center;
  flex:none;
}
.slide{
  position:absolute; inset:0;
  width:960px; height:540px;
  overflow:hidden;
  background:var(--bg);
  color:var(--navy);
  opacity:0; visibility:hidden;
  transition:opacity .38s ease;
  border-radius:2px;
}
.slide.is-active{ opacity:1; visibility:visible; }

/* Impression / export : toutes les slides à la suite */
@media print{
  html,body{ overflow:visible; background:#fff; }
  .viewport{ position:static; display:block; }
  .deck{ transform:none; width:auto; height:auto; }
  .slide{ position:relative; opacity:1 !important; visibility:visible !important;
          page-break-after:always; break-after:page; margin:0; }
  .chrome{ display:none !important; }
}

/* ---------- Éléments communs à toutes les slides ---------- */

/* Badge numéro de slide, coin haut-gauche */
.badge-num{
  position:absolute; left:0; top:0;
  width:48px; height:38px;
  background:var(--rose-alt);
  border-bottom-right-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:18px; color:#fff;
  letter-spacing:.01em;
  z-index:20;
}
.badge-num--br{
  left:auto; right:0; top:auto; bottom:0;
  border-bottom-right-radius:0; border-top-left-radius:12px;
  width:44px; height:34px; font-size:15px;
}

/* Logos */
.logo-po{ position:absolute; }
.logo-cep{ position:absolute; }

/* Barre de pieds de slide */
.footbar{
  position:absolute; left:0; right:0; bottom:0; height:66px;
  background:#fff; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:0;
}
.footbar--navy{ background:var(--navy-deep); border-top:none; }
.footbar__item{
  display:flex; align-items:center; gap:10.4px;
  padding:0 24px; position:relative;
}
.footbar__item + .footbar__item::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:31px; background:rgba(7,26,60,.14);
}
.footbar--navy .footbar__item + .footbar__item::before{ background:rgba(255,255,255,.16); }
.footbar__label{
  font-size:11px; font-weight:600; line-height:1.32;
  color:var(--navy); letter-spacing:.005em;
}
.footbar--navy .footbar__label{ color:#fff; font-weight:500; }

/* Pastille icône cerclée */
.ico-ring{
  flex:none; display:grid; place-items:center;
  width:27px; height:27px; border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold);
}
.ico-ring svg{ width:14px; height:14px; }
.ico-ring--rose{ border-color:var(--rose-alt); color:var(--rose-alt); }
.ico-ring--lg{ width:34px; height:34px; }
.ico-ring--lg svg{ width:17px; height:17px; }

/* Cartes blanches */
.card{
  background:#fff; border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}

/* Utilitaires typographiques */
.t-rose{ color:var(--rose); }
.t-gold{ color:var(--gold); }
.t-navy{ color:var(--navy); }
.t-grey{ color:var(--grey); }
.t-white{ color:#fff; }

/* ============================================================
   Chrome de navigation (hors slide)
   ============================================================ */
.chrome{ position:fixed; z-index:100; color:#fff; font-family:var(--font); }

.chrome-nav{
  left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
  padding:8px 14px; border-radius:999px;
  background:rgba(10,20,40,.72);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  opacity:.25; transition:opacity .25s ease;
}
.chrome-nav:hover, .chrome-nav:focus-within, body.ui-awake .chrome-nav{ opacity:1; }

.nav-btn{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:none; color:#fff;
  cursor:pointer; transition:background .18s ease, transform .18s ease;
}
.nav-btn:hover{ background:var(--rose); transform:translateY(-1px); }
.nav-btn:disabled{ opacity:.3; cursor:default; transform:none; background:rgba(255,255,255,.06); }
.nav-btn svg{ width:15px; height:15px; }
/* Le téléchargement du PDF est un lien, pas un bouton : il lui faut ce
   que le navigateur ne donne qu'aux boutons. */
a.nav-btn{ text-decoration:none; }

.nav-dots{ display:flex; align-items:center; gap:6px; }
.nav-dot{
  width:7px; height:7px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.28); border:none; cursor:pointer;
  transition:background .2s ease, width .2s ease;
}
.nav-dot:hover{ background:rgba(255,255,255,.6); }
.nav-dot.is-active{ background:var(--rose); width:20px; border-radius:4px; }

.nav-count{
  font-size:12px; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.75); letter-spacing:.04em; min-width:44px; text-align:center;
}
.nav-count b{ color:#fff; font-weight:700; }

.chrome-progress{
  left:0; top:0; height:2px; width:100%;
  background:rgba(255,255,255,.08);
}
.chrome-progress__bar{
  height:100%; width:0; background:var(--rose);
  transition:width .38s cubic-bezier(.4,0,.2,1);
}

.chrome-title{
  left:20px; bottom:20px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.32);
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
body.ui-awake .chrome-title{ opacity:1; }