/* =========================================================
   PRÉSENTATION RAPIDE — Apprendre à prompter (secondaire)
   Feuille autonome : tout est préfixé « pr- » et rangé sous
   body.pr-app. Aucune police ni bibliothèque externe.
   ========================================================= */
.pr-app{
  --pr-fond:#0b0d1a; --pr-fond2:#141733; --pr-carte:rgba(255,255,255,.06); --pr-bord:rgba(255,255,255,.14);
  --pr-texte:#ffffff; --pr-doux:#b9bcd8; --pr-violet:#8b7bff; --pr-cyan:#35e0ff; --pr-vert:#2ee6a8;
  --pr-jaune:#ffd23f; --pr-rose:#ff5f8f; --pr-orange:#ffa33f;
  --pr-titre:"Montserrat","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --pr-corps:"Inter","Segoe UI",-apple-system,Roboto,Arial,sans-serif;
  margin:0; height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column;
  font-family:var(--pr-corps); color:var(--pr-texte); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 620px at 10% -10%, rgba(139,123,255,.30), transparent 62%),
    radial-gradient(900px 560px at 95% 110%, rgba(53,224,255,.20), transparent 60%),
    var(--pr-fond);
  -webkit-tap-highlight-color:transparent;
}
.pr-app *{ box-sizing:border-box; }

/* ---------- barre du haut ---------- */
.pr-haut{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:10px clamp(12px,3vw,28px); }
.pr-retour{ color:var(--pr-doux); text-decoration:none; font-size:15px; font-weight:600; white-space:nowrap; padding:10px 0; }
.pr-retour:hover,.pr-retour:focus-visible{ color:var(--pr-cyan); }
.pr-marque{ flex:1; text-align:center; font:800 12px var(--pr-titre); letter-spacing:2.4px; text-transform:uppercase; color:var(--pr-violet); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-compteur{ font:800 15px var(--pr-titre); color:var(--pr-doux); white-space:nowrap; min-width:54px; text-align:right; }
.pr-progres{ flex:0 0 auto; height:4px; background:rgba(255,255,255,.08); }
.pr-progres span{ display:block; height:100%; background:linear-gradient(90deg,var(--pr-violet),var(--pr-cyan)); transition:width .35s ease; }

/* ---------- scène et slides ---------- */
.pr-scene{ flex:1 1 auto; position:relative; min-height:0; overflow:hidden; touch-action:pan-y; }
.pr-slide{ position:absolute; inset:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(14px,3vh,34px) clamp(16px,4vw,56px); display:flex; align-items:center;
  opacity:0; visibility:hidden; transform:translateX(24px); transition:opacity .35s ease, transform .35s ease, visibility 0s .35s; }
.pr-slide.pr-on{ opacity:1; visibility:visible; transform:none; transition:opacity .35s ease, transform .35s ease, visibility 0s; }
.pr-slide.pr-avant{ transform:translateX(-24px); }
.pr-grille{ width:100%; max-width:1180px; margin:auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(18px,4vw,56px); align-items:center; }
.pr-grille.pr-plein{ grid-template-columns:minmax(0,1fr); }

.pr-kicker{ display:inline-block; margin:0 0 12px; padding:6px 14px; border-radius:999px; background:rgba(139,123,255,.16); border:1px solid rgba(139,123,255,.4);
  color:var(--pr-violet); font:800 12px var(--pr-titre); letter-spacing:2.2px; text-transform:uppercase; }
.pr-titre{ font:900 clamp(28px,min(5.4vw,7.4vh),62px)/1.04 var(--pr-titre); letter-spacing:-1.2px; margin:0 0 16px; overflow-wrap:break-word; }
.pr-titre em{ font-style:normal; background:linear-gradient(100deg,var(--pr-violet),var(--pr-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pr-texte{ font-size:clamp(16px,min(2vw,2.8vh),23px); line-height:1.55; color:var(--pr-doux); margin:0 0 14px; max-width:40em; }
.pr-texte b{ color:var(--pr-texte); }
.pr-surligne{ background:linear-gradient(transparent 58%, rgba(255,210,63,.45) 58%); color:var(--pr-texte); font-weight:700; }
.pr-illu{ width:100%; display:flex; justify-content:center; }
.pr-illu svg{ width:100%; max-width:520px; height:auto; max-height:min(58vh,520px); display:block; }

.pr-puces{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.pr-puces li{ padding:8px 14px; border-radius:999px; background:var(--pr-carte); border:1px solid var(--pr-bord); font-weight:700; font-size:clamp(14px,1.6vw,17px); }

/* ---------- slide 2 : 5 ingrédients ---------- */
.pr-ingr{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.6vw,18px); margin-top:clamp(10px,2vh,22px); }
.pr-ingr > div{ background:var(--pr-carte); border:2px solid var(--pr-bord); border-radius:22px; padding:clamp(14px,2.2vh,24px) 12px; text-align:center; }
.pr-ingr svg{ width:clamp(54px,min(7vw,10vh),88px); height:auto; display:block; margin:0 auto 10px; }
.pr-ingr h3{ margin:0 0 6px; font:900 clamp(15px,1.7vw,21px) var(--pr-titre); letter-spacing:.5px; text-transform:uppercase; }
.pr-ingr p{ margin:0; color:var(--pr-doux); font-size:clamp(14px,1.5vw,17px); line-height:1.4; }
.pr-c1{ border-color:rgba(255,95,143,.55) !important; } .pr-c1 h3{ color:var(--pr-rose); }
.pr-c2{ border-color:rgba(53,224,255,.55) !important; } .pr-c2 h3{ color:var(--pr-cyan); }
.pr-c3{ border-color:rgba(139,123,255,.6) !important; } .pr-c3 h3{ color:var(--pr-violet); }
.pr-c4{ border-color:rgba(46,230,168,.55) !important; } .pr-c4 h3{ color:var(--pr-vert); }
.pr-c5{ border-color:rgba(255,163,63,.55) !important; } .pr-c5 h3{ color:var(--pr-orange); }

/* ---------- slide 3 : ACTIF ---------- */
.pr-actif{ display:flex; gap:clamp(6px,1vw,12px); margin:6px 0 18px; flex-wrap:wrap; }
.pr-lettre{ flex:1 1 0; min-width:62px; border-radius:16px; padding:10px 6px; text-align:center; color:#0b0d1a; }
.pr-lettre b{ display:block; font:900 clamp(30px,min(4.4vw,6vh),52px)/1 var(--pr-titre); }
.pr-lettre span{ display:block; font-weight:800; font-size:clamp(11px,1.2vw,14px); letter-spacing:.6px; text-transform:uppercase; margin-top:4px; }
.pr-la{ background:var(--pr-jaune); } .pr-lc{ background:var(--pr-cyan); } .pr-lt{ background:var(--pr-rose); } .pr-li{ background:var(--pr-violet); } .pr-lf{ background:var(--pr-vert); }
.pr-exemple{ background:rgba(255,255,255,.04); border:2px dashed var(--pr-bord); border-radius:22px; padding:clamp(14px,2.4vh,24px) clamp(14px,2vw,26px); font-size:clamp(17px,min(2.1vw,3vh),26px); line-height:1.75; margin:0; }
.pr-exemple mark{ color:var(--pr-texte); border-radius:8px; padding:2px 6px; -webkit-box-decoration-break:clone; box-decoration-break:clone; position:relative; }
.pr-exemple mark sup{ font:900 .62em var(--pr-titre); margin-left:4px; padding:1px 6px; border-radius:6px; color:#0b0d1a; vertical-align:.45em; }
.pr-mi{ background:rgba(139,123,255,.28); box-shadow:inset 0 -3px 0 var(--pr-violet); } .pr-mi sup{ background:var(--pr-violet); }
.pr-ma{ background:rgba(255,210,63,.22); box-shadow:inset 0 -3px 0 var(--pr-jaune); } .pr-ma sup{ background:var(--pr-jaune); }
.pr-mc{ background:rgba(53,224,255,.2); box-shadow:inset 0 -3px 0 var(--pr-cyan); } .pr-mc sup{ background:var(--pr-cyan); }
.pr-mt{ background:rgba(255,95,143,.22); box-shadow:inset 0 -3px 0 var(--pr-rose); } .pr-mt sup{ background:var(--pr-rose); }
.pr-mf{ background:rgba(46,230,168,.2); box-shadow:inset 0 -3px 0 var(--pr-vert); } .pr-mf sup{ background:var(--pr-vert); }

/* ---------- slide 3 : avant / après ---------- */
.pr-avap{ display:grid; grid-template-columns:minmax(0,.7fr) auto minmax(0,1.6fr); gap:clamp(10px,1.6vw,18px); align-items:center; margin:4px 0 14px; }
.pr-fleche svg{ width:clamp(36px,4vw,56px); height:auto; display:block; }
.pr-avap .pr-exemple{ border:0; background:none; padding:0; font-size:clamp(16px,min(1.9vw,2.8vh),24px); line-height:1.8; }
.pr-astuce{ margin:0; font-size:clamp(15px,min(1.8vw,2.6vh),21px); color:var(--pr-doux); }
.pr-astuce b{ color:var(--pr-jaune); } .pr-astuce span{ color:var(--pr-texte); font-weight:700; }
@media (max-width:760px), (orientation:portrait) and (max-width:1024px){ .pr-avap{ grid-template-columns:minmax(0,1fr); } .pr-fleche{ justify-self:center; transform:rotate(90deg); } }
/* ---------- cartes avant / après ---------- */
.pr-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,22px); margin:8px 0 16px; }
.pr-carte{ border-radius:22px; padding:clamp(14px,2.4vh,24px); border:2px solid var(--pr-bord); background:var(--pr-carte); display:flex; gap:14px; align-items:flex-start; }
.pr-carte svg{ flex:0 0 auto; width:clamp(48px,6vw,72px); height:auto; }
.pr-carte h3{ margin:0 0 6px; font:900 clamp(14px,1.5vw,17px) var(--pr-titre); letter-spacing:1.6px; text-transform:uppercase; }
.pr-carte q{ display:block; font-size:clamp(17px,min(2vw,2.9vh),24px); font-weight:700; line-height:1.4; quotes:"« " " »"; }
.pr-vague{ border-color:rgba(255,95,143,.5); } .pr-vague h3{ color:var(--pr-rose); }
.pr-precis{ border-color:rgba(46,230,168,.55); background:rgba(46,230,168,.07); } .pr-precis h3{ color:var(--pr-vert); }
.pr-retenir{ border-radius:20px; padding:clamp(12px,2vh,20px) clamp(14px,2vw,22px); background:rgba(255,210,63,.1); border:1px solid rgba(255,210,63,.4); }
.pr-retenir h3{ margin:0 0 6px; font:900 13px var(--pr-titre); letter-spacing:2px; text-transform:uppercase; color:var(--pr-jaune); }
.pr-retenir p{ margin:0; font-size:clamp(16px,min(1.9vw,2.7vh),22px); line-height:1.5; }
.pr-etapes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pr-etapes span{ padding:7px 14px; border-radius:999px; font-weight:800; font-size:clamp(14px,1.5vw,17px); background:rgba(255,255,255,.08); border:1px solid var(--pr-bord); }

/* ---------- slide 5 : planète ---------- */
.pr-impacts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,16px); }
.pr-impacts > div{ background:var(--pr-carte); border:2px solid var(--pr-bord); border-radius:20px; padding:clamp(10px,1.6vh,16px); display:flex; gap:12px; align-items:center; }
.pr-impacts > div svg{ flex:0 0 auto; width:clamp(44px,min(5vw,8vh),66px); height:auto; }
.pr-impacts h3{ margin:0 0 3px; font:900 clamp(14px,1.5vw,17px) var(--pr-titre); text-transform:uppercase; letter-spacing:.6px; }
.pr-impacts p{ margin:0; color:var(--pr-doux); font-size:clamp(13px,1.35vw,16px); line-height:1.35; }
.pr-planete{ grid-column:1 / -1; width:100%; height:auto; max-height:min(16vh,130px); }
@media (max-height:560px){ .pr-planete{ display:none; } }
.pr-calcul{ margin:10px 0 14px; display:grid; gap:7px; }
.pr-calcul div{ display:grid; grid-template-columns:7.5em 1fr; gap:10px; align-items:center; font-weight:700; font-size:clamp(14px,1.5vw,17px); }
.pr-calcul i{ display:block; height:14px; border-radius:7px; background:linear-gradient(90deg,var(--pr-vert),var(--pr-jaune),var(--pr-rose)); background-size:100% 100%; }
.pr-note{ font-size:clamp(13px,1.3vw,15px); color:var(--pr-doux); margin:0 0 12px; }
.pr-conclusion{ font:900 clamp(18px,min(2.3vw,3.4vh),28px)/1.3 var(--pr-titre); margin:6px 0 14px; }
.pr-conclusion span{ background:linear-gradient(100deg,var(--pr-vert),var(--pr-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pr-cta{ display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 24px; border-radius:16px; text-decoration:none;
  font:900 17px var(--pr-titre); color:#0b0d1a; background:linear-gradient(100deg,var(--pr-vert),var(--pr-cyan)); }
.pr-cta:hover,.pr-cta:focus-visible{ filter:brightness(1.08); outline:3px solid #fff; outline-offset:3px; }

/* ---------- navigation ---------- */
.pr-nav{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px clamp(12px,3vw,28px) max(10px,env(safe-area-inset-bottom)); }
.pr-btn{ min-height:52px; min-width:52px; padding:0 20px; border-radius:16px; border:2px solid var(--pr-bord); background:rgba(255,255,255,.06);
  color:var(--pr-texte); font:800 16px var(--pr-corps); cursor:pointer; touch-action:manipulation; white-space:nowrap; }
.pr-btn:disabled{ opacity:.35; cursor:default; }
.pr-btn:focus-visible{ outline:3px solid var(--pr-cyan); outline-offset:2px; }
.pr-suiv{ border:0; color:#0b0d1a; background:linear-gradient(100deg,var(--pr-violet),var(--pr-cyan)); }
.pr-points{ flex:1; display:flex; justify-content:center; gap:8px; }
.pr-points button{ width:14px; height:14px; padding:0; border-radius:50%; border:0; background:rgba(255,255,255,.22); cursor:pointer; }
.pr-points button.pr-on{ background:var(--pr-cyan); width:30px; border-radius:7px; }
.pr-points button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ---------- petits écrans ---------- */
@media (max-width:900px){
  .pr-ingr{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px), (orientation:portrait) and (max-width:1024px){
  .pr-slide{ align-items:flex-start; }
  .pr-grille{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .pr-illu svg{ max-width:340px; max-height:30vh; }
  .pr-ordre-illu{ order:-1; }
}
@media (max-width:600px){
  .pr-ingr{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pr-ingr > div:last-child{ grid-column:1 / -1; }
  .pr-duo{ grid-template-columns:1fr; }
  .pr-impacts{ grid-template-columns:1fr; }
  .pr-btn .pr-lib{ display:none; }
  .pr-btn{ padding:0 16px; font-size:20px; }
  .pr-marque{ display:none; }
}
@media (max-height:500px) and (orientation:landscape){
  .pr-haut{ padding-top:4px; padding-bottom:4px; }
  .pr-nav{ padding-top:4px; padding-bottom:4px; }
  .pr-btn{ min-height:44px; }
  .pr-illu svg{ max-height:52vh; }
  .pr-titre{ font-size:clamp(24px,6vh,34px); margin-bottom:10px; }
  .pr-lettre{ padding:6px 4px; } .pr-lettre b{ font-size:26px; }
  .pr-kicker{ margin-bottom:8px; }
}


/* ---------- slide 4 : électricité des centres de données ---------- */
.pr-chiffre{ display:flex; flex-direction:column; gap:6px; margin:4px 0 14px; padding:clamp(14px,2.4vh,22px) clamp(16px,2vw,24px); border-radius:22px;
  background:rgba(255,210,63,.08); border:2px solid rgba(255,210,63,.45); }
.pr-chiffre-val{ font:900 clamp(40px,min(6.4vw,9vh),84px)/1 var(--pr-titre); color:var(--pr-jaune); letter-spacing:-1.5px; }
.pr-chiffre-lib{ font-size:clamp(15px,min(1.8vw,2.6vh),21px); line-height:1.45; color:var(--pr-doux); }
.pr-chiffre-lib b{ color:var(--pr-texte); }
.pr-reperes{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-wrap:wrap; gap:8px; }
.pr-reperes li{ padding:8px 14px; border-radius:999px; background:var(--pr-carte); border:1px solid var(--pr-bord); font-size:clamp(14px,1.6vw,18px); }
.pr-prevision{ margin:0 0 10px; font-size:clamp(14px,1.6vw,18px); color:var(--pr-doux); }
.pr-prevision span{ display:inline-block; margin-right:8px; padding:2px 10px; border-radius:8px; border:1px dashed var(--pr-cyan); color:var(--pr-cyan);
  font:800 12px var(--pr-titre); letter-spacing:1.5px; text-transform:uppercase; vertical-align:middle; }
.pr-source{ margin:0; font-size:clamp(12px,1.2vw,14px); color:#9296b8; }
@media (min-width:1500px) and (min-height:860px){
  .pr-chiffre-val{ font-size:96px; } .pr-chiffre-lib{ font-size:24px; }
  .pr-reperes li, .pr-prevision{ font-size:21px; } .pr-source{ font-size:16px; }
}

/* ---------- réduction des animations ---------- */
@media (prefers-reduced-motion: reduce){
  .pr-slide, .pr-slide.pr-on, .pr-progres span{ transition:none !important; transform:none !important; }
  .pr-app .pr-anim{ animation:none !important; }
}
.pr-anim{ animation:pr-flotte 4s ease-in-out infinite alternate; transform-origin:center; transform-box:fill-box; }
@keyframes pr-flotte{ from{ transform:translateY(0); } to{ transform:translateY(-6px); } }

/* ---------- grands écrans / vidéoprojecteur : on agrandit tout ---------- */
@media (min-width:1500px) and (min-height:860px){
  .pr-grille{ max-width:1500px; }
  .pr-titre{ font-size:clamp(62px,4.4vw,88px); }
  .pr-kicker{ font-size:15px; }
  .pr-texte{ font-size:28px; }
  .pr-puces li, .pr-etapes span, .pr-calcul div{ font-size:21px; }
  .pr-illu svg{ max-width:640px; max-height:62vh; }
  .pr-ingr h3{ font-size:26px; } .pr-ingr p{ font-size:21px; } .pr-ingr svg{ width:110px; }
  .pr-lettre b{ font-size:64px; } .pr-lettre span{ font-size:17px; }
  .pr-carte q{ font-size:28px; } .pr-carte h3{ font-size:20px; } .pr-carte svg{ width:84px; }
  .pr-avap .pr-exemple{ font-size:29px; }
  .pr-astuce{ font-size:25px; }
  .pr-impacts h3{ font-size:20px; } .pr-impacts p{ font-size:18px; } .pr-impacts > div svg{ width:76px; }
  .pr-conclusion{ font-size:34px; } .pr-cta{ font-size:20px; min-height:62px; }
  .pr-btn{ min-height:60px; font-size:18px; }
}