/* presentation.css — la présentation privée (/presentation) : une toile, des diapositives de 1600 × 900, la caméra
   (presentation.js) zoome de l'une à l'autre. Couleurs et polices de la charte du site. */
:root{--bleu:#1644fb;--bleu-2:#0f33c4;--bleu-clair:#e8ecff;--encre:#111420;--encre-2:#5c6178;--gris:#9ea3b2;--orange:#d9480f;--trait:#e6e8f0;--fond:#eef1f8;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--fond);color:var(--encre);font:400 16px/1.5 Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(60% 60% at 85% 10%,#d8f5f5 0,transparent 60%),radial-gradient(50% 60% at 10% 90%,#e6e0fb 0,transparent 60%),var(--fond)}
body::before{content:"";position:fixed;inset:0;background-image:radial-gradient(#c9cfdf 1px,transparent 1.4px);background-size:28px 28px;opacity:.55;pointer-events:none}
h1,h2,h3,b,strong{font-family:Geologica,system-ui,sans-serif}
a{color:inherit}

/* la scène et la toile */
.scene{position:fixed;inset:0;overflow:hidden;cursor:default}
.monde{position:absolute;left:0;top:0;transform-origin:0 0}
.diapo{position:absolute;width:1600px;height:900px;transform-origin:50% 50%;border-radius:40px;background:#fff;box-shadow:0 40px 90px -40px rgba(17,30,90,.35),0 4px 14px -6px rgba(17,30,90,.12);padding:80px 100px;overflow:hidden;opacity:.5;transition:opacity .8s var(--ease),box-shadow .8s var(--ease)}
.diapo.actif{opacity:1;box-shadow:0 60px 120px -40px rgba(17,30,90,.45),0 6px 18px -6px rgba(17,30,90,.14)}
.ensemble .diapo{opacity:1}
.ensemble .diapo:hover{box-shadow:0 0 0 12px var(--bleu),0 60px 120px -40px rgba(17,30,90,.45);cursor:pointer}
.diapo.chapitre{background:linear-gradient(135deg,var(--bleu),#4169ff 60%,#12b7c9);color:#fff}
.diapo.couverture{background:#fff}

/* éléments qui entrent quand la diapositive devient active */
.diapo .oeil,.diapo h1,.diapo h2,.diapo .sous,.diapo li,.diapo .kpi,.diapo .tuile,.diapo figure,.diapo .source,.diapo .note,.diapo .hero,.diapo .legende,.diapo .graphe,.diapo .jauge,.diapo .num,.diapo .couv>*,.diapo .chap>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.diapo.actif .oeil,.diapo.actif h1,.diapo.actif h2,.diapo.actif .sous,.diapo.actif li,.diapo.actif .kpi,.diapo.actif .tuile,.diapo.actif figure,.diapo.actif .source,.diapo.actif .note,.diapo.actif .hero,.diapo.actif .legende,.diapo.actif .graphe,.diapo.actif .jauge,.diapo.actif .num,.diapo.actif .couv>*,.diapo.actif .chap>*,.ensemble .diapo *{opacity:1;transform:none}
.diapo.actif h2{transition-delay:.15s}.diapo.actif .graphe,.diapo.actif .hero{transition-delay:.3s}
.diapo.actif li,.diapo.actif .kpi,.diapo.actif .tuile{transition-delay:calc(.35s + var(--i,0) * .12s)}
.diapo.actif figure{transition-delay:.45s}.diapo.actif .source,.diapo.actif .note{transition-delay:.9s}
.diapo.actif .couv>*,.diapo.actif .chap>*{transition-delay:.2s}
.diapo.actif .couv>*:nth-child(2),.diapo.actif .chap>*:nth-child(2){transition-delay:.35s}
.diapo.actif .couv>*:nth-child(3),.diapo.actif .chap>*:nth-child(3){transition-delay:.5s}
.diapo.actif .couv>*:nth-child(n+4){transition-delay:.7s}

/* textes */
.oeil{display:block;font:600 22px/1 Geologica,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);margin-bottom:22px}
h2{font-size:58px;line-height:1.08;letter-spacing:-.025em;font-weight:700;max-width:1250px}
h2 b,h1 b{color:var(--bleu)}
.sous{font-size:26px;color:var(--encre-2);margin-top:14px}
.source{position:absolute;left:100px;bottom:52px;right:100px;font-size:17px;color:var(--encre-2)}
.source a{text-decoration:underline;text-underline-offset:3px}
.note{margin-top:28px;font-size:19px;color:var(--encre-2);padding:12px 18px;border-radius:14px;background:var(--bleu-clair);display:inline-block}

/* couverture et fin */
.couv{height:100%;display:flex;flex-direction:column;justify-content:center}
.couv-logo{width:420px;height:auto;margin-bottom:60px}
.couv h1{font-size:112px;line-height:1;letter-spacing:-.04em;font-weight:700}
.couv p{font-size:32px;color:var(--encre-2);margin-top:30px;max-width:1100px}
.couv .couv-pied{font-size:22px;margin-top:70px}
.couv-aide{font-size:20px!important;margin-top:18px!important}
kbd{display:inline-block;min-width:34px;padding:2px 9px;border:1px solid var(--trait);border-bottom-width:3px;border-radius:8px;font:600 18px/1.3 Geologica,sans-serif;text-align:center;color:var(--encre);background:#fff}
.fin-lien{font:700 60px/1.1 Geologica,sans-serif!important;color:var(--bleu)!important;margin-top:50px!important}

/* titre de chapitre */
.chap{height:100%;display:flex;flex-direction:column;justify-content:center}
.chap span{font:700 200px/1 Geologica,sans-serif;opacity:.25}
.chap h1{font-size:150px;line-height:1;letter-spacing:-.04em}
.chap p{font-size:34px;margin-top:30px;opacity:.85}

/* graphiques */
.chiffre-grand{height:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:40px}
.chiffre-grand.centre{justify-content:center}
.chiffre-grand h2{margin-bottom:40px}
.graphe{display:block;margin-top:30px;overflow:visible;height:auto}
.graphe text{font-family:Geologica,sans-serif}
.graphe .val{font-size:40px;font-weight:700;fill:var(--encre)}
.graphe .lib{font-size:26px;fill:var(--encre-2);font-family:Onest,sans-serif}
.graphe .dit{font-size:22px;fill:var(--bleu);font-weight:600}
.graphe .axe{stroke:#c8ccd8;stroke-width:2}
.graphe rect{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--ease) calc(.4s + var(--i,0) * .18s)}
.graphe .col rect{transform-origin:50% 100%;transform:scaleY(0)}
.graphe g text{opacity:0;transition:opacity .6s ease calc(1s + var(--i,0) * .18s)}
.actif .graphe rect,.ensemble .graphe rect{transform:none}
.actif .graphe g text,.ensemble .graphe g text{opacity:1}
.hero{font:700 170px/1 Geologica,sans-serif;color:var(--bleu);letter-spacing:-.04em}
.hero small{display:block;font-size:40px;letter-spacing:0;color:var(--encre);margin-top:8px}
.jauge{margin-top:20px}
.jauge-piste{height:18px;border-radius:9px;background:var(--bleu-clair);overflow:hidden}
.jauge-piste span{display:block;height:100%;width:calc(var(--p) * 1%);background:var(--bleu);border-radius:9px;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease) .7s}
.actif .jauge-piste span,.ensemble .jauge-piste span{transform:none}
.jauge small{display:block;margin-top:10px;font-size:20px;color:var(--encre-2)}
.jauge.large{max-width:1000px}.jauge.large small{font:600 26px/1.3 Geologica,sans-serif;color:var(--encre)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:10px}
.kpi{padding:34px;border:1px solid var(--trait);border-radius:28px;background:#fbfcff}
.kpi b{display:block;font-size:84px;line-height:1;color:var(--bleu);letter-spacing:-.03em}
.kpi p{font-size:23px;color:var(--encre-2);margin:18px 0 6px;min-height:105px}
.kpi p strong{color:var(--encre)}
.deux-col{display:grid!important;grid-template-columns:560px 1fr;gap:60px;align-items:center}
.deux-col .graphe{width:100%;margin-top:0}
.legende{font-size:21px;color:var(--encre-2);display:grid;gap:10px;margin-top:10px}
.legende span{display:flex;align-items:center;gap:12px}
.pastille{display:inline-block;flex:none;width:18px;height:18px;border-radius:5px}
.pastille.gris{background:var(--gris)}.pastille.bleu{background:var(--bleu)}
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tuile{padding:32px 34px;border-radius:26px;background:#fbfcff;border:1px solid var(--trait)}
.tuile b{display:block;font-size:66px;line-height:1;color:var(--bleu);letter-spacing:-.03em}
.tuile span{display:block;font-size:23px;color:var(--encre-2);margin-top:14px}
.frise{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:26px 22px;margin-top:20px;counter-reset:f}
.frise li{position:relative;padding:26px 24px 26px;border-radius:24px;background:var(--bleu-clair);font:600 25px/1.25 Geologica,sans-serif}
.frise li span{display:block;font-size:42px;color:var(--bleu);margin-bottom:10px}
.frise li:nth-child(5n)::after{display:none}
.frise li::after{content:"→";position:absolute;right:-20px;top:30px;font-size:24px;color:var(--bleu)}

/* une étape du parcours : le texte à gauche, les interfaces à droite */
.etape{height:100%;display:grid;grid-template-columns:520px 1fr;gap:56px;align-items:center}
.etape-texte .num{display:block;font:700 96px/1 Geologica,sans-serif;color:var(--bleu);letter-spacing:-.04em;margin-bottom:18px}
.etape-texte h2{font-size:52px;margin-bottom:26px}
.etape-texte ul{list-style:none;display:grid;gap:18px}
.etape-texte li{position:relative;padding-left:34px;font-size:24px;line-height:1.4;color:var(--encre-2)}
.etape-texte li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:14px;border-radius:50%;background:var(--bleu)}
.etape-visuel{position:relative;height:740px}

/* les cadres des captures */
figure{margin:0}
.fen,.courriel{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -30px rgba(17,30,90,.5),0 0 0 1px rgba(17,30,90,.08);display:flex;flex-direction:column}
.fen-barre{flex:none;height:46px;display:flex;align-items:center;gap:8px;padding:0 18px;background:#f3f4f8;border-bottom:1px solid var(--trait)}
.fen-barre i{width:13px;height:13px;border-radius:50%;background:#d8dbe4}
.fen-barre i:first-child{background:#ff6159}.fen-barre i:nth-child(2){background:#ffbd2e}.fen-barre i:nth-child(3){background:#28c941}
.fen-barre span{margin-left:16px;flex:1;max-width:560px;padding:6px 14px;border-radius:9px;background:#fff;font-size:15px;color:var(--encre-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fen img,.courriel img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:50% 0}
.courriel-tete{flex:none;padding:14px 22px;border-bottom:1px solid var(--trait);background:#fafbfd;font-size:16px;color:var(--encre-2)}
.courriel-tete b{color:var(--encre)}
.courriel-tete span{display:block;font:600 19px/1.4 Geologica,sans-serif;color:var(--encre);margin-top:4px}
.courriel img{object-position:50% 0}
.actif img.defile{animation:defile 16s ease-in-out 1.6s infinite alternate}
@keyframes defile{from{object-position:50% 0}to{object-position:50% 100%}}
.pile .p1{inset:0 210px 200px 0}
.pile .p2{inset:220px 0 0 210px}
.actif .pile .p2{transition-delay:.75s}
.tel{position:absolute;width:300px;height:600px;border-radius:44px;border:12px solid #111420;background:#111420;overflow:hidden;box-shadow:0 30px 60px -24px rgba(17,30,90,.55)}
.tel img{width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:30px}
.trio .trio-ecran{inset:0 120px 330px 0}
.trio .trio-tel{left:150px;bottom:0;width:250px;height:500px;transform:rotate(-4deg)}
.trio .trio-pilote{right:40px;bottom:10px;width:250px;height:500px}
.actif .trio .trio-tel{transform:rotate(-4deg)}
.actif .trio .trio-tel,.actif .trio .trio-pilote{transition-delay:.7s}

/* l'interface de la présentation */
.pr-tete{position:fixed;left:26px;top:20px;display:flex;align-items:center;gap:18px;z-index:5;transition:opacity .4s}
.pr-tete img{height:auto}
.pr-tete span{font:600 14px/1 Geologica,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);padding-left:18px;border-left:1px solid #cfd3df}
.pr-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;z-index:5;transition:opacity .4s}
.pr-rail button{position:relative;width:12px;height:12px;border-radius:50%;border:0;background:#c3c8d6;cursor:pointer;transition:transform .3s var(--ease),background .3s}
.pr-rail button.chap{width:12px;height:12px;border-radius:3px}
.pr-rail button[aria-current=true]{background:var(--bleu);transform:scale(1.5)}
.pr-rail button:hover{background:var(--bleu-2)}
.pr-rail button span{position:absolute;right:24px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:5px 10px;border-radius:8px;background:var(--encre);color:#fff;font:500 13px/1 Onest,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s}
.pr-rail button:hover span,.pr-rail button:focus-visible span{opacity:1}
.pr-commandes{position:fixed;right:22px;bottom:20px;display:flex;align-items:center;gap:8px;z-index:5;padding:6px;border-radius:16px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);box-shadow:0 10px 30px -14px rgba(17,30,90,.4);transition:opacity .4s}
.pr-commandes button{height:40px;min-width:40px;padding:0 12px;border:0;border-radius:11px;background:transparent;font:600 16px/1 Geologica,sans-serif;color:var(--encre);cursor:pointer}
.pr-commandes button:hover{background:var(--bleu-clair);color:var(--bleu)}
.pr-commandes [data-plein-ecran]{background:var(--bleu);color:#fff;display:flex;align-items:center;gap:8px}
.pr-commandes [data-plein-ecran]:hover{background:var(--bleu-2);color:#fff}
.pr-commandes span[data-compteur]{font:600 14px/1 Geologica,sans-serif;color:var(--encre-2);min-width:64px;text-align:center}
.pr-progression{position:fixed;left:0;right:0;bottom:0;height:4px;z-index:5;background:rgba(22,68,251,.12)}
.pr-progression span{display:block;height:100%;width:0;background:var(--bleu);transition:width .8s var(--ease)}
button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
body.calme .pr-tete,body.calme .pr-rail,body.calme .pr-commandes{opacity:0}
@media (max-width:700px){.pr-rail{display:none}.pr-commandes [data-plein-ecran]{padding:0 10px}.pr-commandes [data-plein-ecran] span+*{display:none}.pr-tete span{display:none}}
@media (prefers-reduced-motion:reduce){.diapo *,.diapo{transition:none!important;animation:none!important}}