/* Style commun des pages de cas et de démos liées au diaporama
   « Usages en entreprise » (même design que comment-fonctionne-une-ia.html).
   Utilisé avec diapos.js. */
@font-face{font-family:'Lexend';src:url('../01-introduction-ia/fonts/Lexend-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --deep:#0c0a1d; --card:#1a1735; --card2:#15132b;
  --text:#f1f5f9; --text2:#94a3b8; --muted:#64748b;
  --amber:#f59e0b; --amber-l:#fde68a; --amber-pale:rgba(245,158,11,.12);
  --cyan:#06b6d4; --cyan-l:#67e8f9; --cyan-pale:rgba(6,182,212,.12);
  --emerald:#10b981; --emerald-l:#6ee7b7; --emerald-pale:rgba(16,185,129,.12);
  --orange:#fb923c; --orange-pale:rgba(251,146,60,.12);
  --red:#ef4444; --red-l:#fca5a5; --red-pale:rgba(239,68,68,.12);
  --sky:#38bdf8; --sky-l:#7dd3fc; --sky-pale:rgba(56,189,248,.12);
  --violet:#a78bfa; --violet-pale:rgba(167,139,250,.12);
  --border:rgba(148,163,184,.18); --border-strong:rgba(148,163,184,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--deep);font-family:'Lexend',system-ui,sans-serif;font-weight:300;color:var(--text)}
a{color:inherit}
strong{font-weight:600;color:var(--text)}

/* ── Diapos ── */
.slide{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;padding:4.2rem clamp(1.2rem,6vw,6rem) 6rem}
.slide.active{display:flex;animation:entree .35s ease}
@keyframes entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.etiquette{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.badge{font-size:.62rem;letter-spacing:.1em;border-radius:2rem;padding:.2rem .6rem;border:1px solid var(--amber);color:#2a1a00;background:var(--amber)}
.badge.direct{color:var(--red-l);background:var(--red-pale);border-color:rgba(239,68,68,.5)}
.badge.direct::before{content:'●';margin-right:.35rem;animation:clign 1.4s steps(1) infinite}
.badge.exemple{color:var(--sky-l);background:var(--sky-pale);border-color:rgba(56,189,248,.5)}
@keyframes clign{50%{opacity:.25}}
h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.08}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:700;line-height:1.15;max-width:22ch}
h2.large{max-width:none}
em{font-style:normal;color:var(--amber)}
.deux{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.deux.egal{grid-template-columns:1fr 1fr}
.texte p{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text2);line-height:1.6;margin-top:1rem;max-width:46ch}
.plein-large p{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text2);line-height:1.6;margin-top:1rem;max-width:72ch}
.petit{font-size:.82rem!important;color:var(--muted)!important;line-height:1.5!important}
.pour-vous{margin-top:1.4rem;background:var(--emerald-pale);border:1px solid rgba(16,185,129,.35);border-left:4px solid var(--emerald);border-radius:.7rem;padding:.8rem 1.1rem;font-size:clamp(.95rem,1.3vw,1.05rem);line-height:1.5}
.pour-vous b{color:var(--emerald-l);font-weight:700}
.alerte{margin-top:1.4rem;background:var(--amber-pale);border:1px solid rgba(245,158,11,.4);border-left:4px solid var(--amber);border-radius:.7rem;padding:.8rem 1.1rem;font-size:clamp(.95rem,1.3vw,1.05rem);line-height:1.5}
.alerte b{color:var(--amber-l)}
.alerte.rouge{background:var(--red-pale);border-color:rgba(239,68,68,.4);border-left-color:var(--red)}
.alerte.rouge b{color:var(--red-l)}
.alerte.bleu{background:var(--sky-pale);border-color:rgba(56,189,248,.4);border-left-color:var(--sky)}
.alerte.bleu b{color:var(--sky-l)}
.haut{position:fixed;top:1.1rem;left:1.2rem;right:1.2rem;z-index:50;display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;font-weight:600;pointer-events:none}
.haut a{color:var(--text2);text-decoration:none;pointer-events:auto}
.haut a:hover{color:var(--amber)}

/* ── Fil d'Ariane : d'où vient cette page, où on en est ── */
.fil{position:fixed;top:.8rem;left:1.2rem;z-index:55;display:flex;align-items:center;max-width:calc(100% - 2.4rem);background:rgba(26,23,53,.96);border:1px solid rgba(245,158,11,.5);border-radius:2rem;padding:.4rem 1rem;font-size:.8rem;font-weight:600;box-shadow:0 4px 18px rgba(0,0,0,.4);overflow:hidden}
.fil a{color:var(--text2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:17rem;flex:0 1 auto}
.fil a:hover{color:var(--amber-l)}
.fil .sep{color:var(--amber);margin:0 .5rem;font-weight:800;flex:0 0 auto}
.fil .ici{color:var(--amber-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:4rem;flex:0 1 auto}

/* ── Démo en direct : cadre rouge qui pulse + étiquette ── */
body.en-direct::after{content:'';position:fixed;inset:0;border:5px solid var(--red);box-shadow:inset 0 0 50px rgba(239,68,68,.3);pointer-events:none;z-index:70;animation:pouls 1.6s ease-in-out infinite}
.signal-direct{display:none;position:fixed;top:.75rem;right:1.2rem;z-index:71;background:var(--red);color:#fff;font-weight:800;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem 1.2rem;border-radius:2rem;box-shadow:0 0 26px rgba(239,68,68,.65)}
body.en-direct .signal-direct{display:block}
body.en-direct .fil{max-width:calc(100% - 17rem)}
@keyframes pouls{50%{border-color:rgba(239,68,68,.3);box-shadow:inset 0 0 20px rgba(239,68,68,.12)}}

/* ── Visuels ── */
.boite{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.1rem 1.3rem}
.chiffres{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.chiffres.trois{grid-template-columns:repeat(3,1fr)}
.chiffres.quatre{grid-template-columns:repeat(4,1fr)}
.chiffre{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem 1.1rem;text-align:center}
.chiffre .n{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;color:var(--amber);line-height:1.1;white-space:nowrap}
.chiffre span{display:block;font-size:.85rem;color:var(--text2);line-height:1.4;margin-top:.3rem}
.chiffre.vert{background:var(--emerald-pale);border-color:rgba(16,185,129,.4)}
.chiffre.vert .n{color:var(--emerald-l)}
.etapes{display:grid;gap:.55rem;counter-reset:e}
.etapes > div{display:grid;grid-template-columns:2.2rem 1fr;gap:.15rem .8rem;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:.7rem 1rem}
.etapes > div::before{counter-increment:e;content:counter(e);grid-row:span 2;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--amber-pale);border:1px solid rgba(245,158,11,.5);color:var(--amber-l);font-weight:700;display:flex;align-items:center;justify-content:center}
.etapes.ico > div::before{content:attr(data-ico);counter-increment:none;font-size:1.1rem;background:rgba(148,163,184,.1);border-color:var(--border-strong)}
.etapes b{font-weight:700}
.etapes span{font-size:.86rem;color:var(--text2);line-height:1.4}
.etapes > div.cle{border-color:rgba(245,158,11,.55)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.colonne{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.05rem 1.15rem;border-top:4px solid var(--border-strong)}
.colonne.oui{border-top-color:var(--emerald)} .colonne.non{border-top-color:var(--red)}
.colonne.a{border-top-color:var(--cyan)} .colonne.b{border-top-color:var(--amber)} .colonne.c{border-top-color:var(--violet)}
.colonne h3{font-size:1rem;font-weight:700;margin-bottom:.55rem;line-height:1.3}
.colonne p{font-size:.88rem;color:var(--text2);line-height:1.5}
.colonne ul{list-style:none;display:grid;gap:.45rem}
.colonne li{font-size:.88rem;color:var(--text2);line-height:1.4;padding-left:1.1rem;position:relative}
.colonne li::before{content:'•';position:absolute;left:.15rem;color:var(--muted);font-weight:700}
.colonne.oui li::before{content:'✓';left:0;color:var(--emerald-l)}
.colonne.non li::before{content:'✕';left:0;color:var(--red-l)}
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.tuiles > div{background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:.75rem .95rem;font-size:.9rem;line-height:1.4;color:var(--text2)}
.tuiles > div b{display:block;color:var(--text);font-weight:700;margin-bottom:.15rem}
.tuiles > div i{font-style:normal;font-size:1.2rem;margin-right:.4rem}
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.4rem}
.cartes.deux-col{grid-template-columns:1fr 1fr}
.cartes.quatre{grid-template-columns:repeat(4,1fr)}
.cartes > div{background:var(--card);border:1px solid var(--border);border-top:4px solid var(--amber);border-radius:.9rem;padding:.9rem 1rem}
.cartes > div.vert{border-top-color:var(--emerald)} .cartes > div.rouge{border-top-color:var(--red)} .cartes > div.bleu{border-top-color:var(--cyan)}
.cartes b{display:block;font-weight:700;margin-bottom:.3rem}
.cartes span{font-size:.88rem;color:var(--text2);line-height:1.45;display:block}
.chaine{display:flex;align-items:stretch;gap:.4rem;flex-wrap:wrap;margin-top:1.4rem}
.chaine > div{flex:1;min-width:8rem;background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:.85rem .75rem;text-align:center;font-size:.86rem;line-height:1.4;color:var(--text2)}
.chaine > div b{display:block;color:var(--text);font-weight:700;margin-bottom:.2rem}
.chaine > div .ico{display:block;font-size:1.5rem;margin-bottom:.3rem}
.chaine > div.cle{border-color:rgba(245,158,11,.6);background:var(--amber-pale)}
.chaine > div.vert{border-color:rgba(16,185,129,.5);background:var(--emerald-pale)}
.chaine > .fleche{flex:0 0 auto;min-width:0;background:none;border:none;padding:0;align-self:center;color:var(--muted);font-size:1.2rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;padding:.25rem .7rem;border-radius:2rem;border:1px solid}
.tag.h{color:var(--amber-l);background:var(--amber-pale);border-color:rgba(245,158,11,.45)}
.tag.g{color:var(--emerald-l);background:var(--emerald-pale);border-color:rgba(16,185,129,.45)}
.tag.c{color:#c4b5fd;background:var(--violet-pale);border-color:rgba(167,139,250,.45)}
.tag.o{color:var(--sky-l);background:var(--sky-pale);border-color:rgba(56,189,248,.45)}
.puces{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.puces span,.puces a{font-size:.8rem;padding:.3rem .7rem;border-radius:2rem;background:rgba(148,163,184,.08);border:1px solid var(--border);color:var(--text2);text-decoration:none}
.puces a:hover{border-color:var(--cyan);color:var(--cyan-l)}
.consigne{background:var(--card2);border:1px dashed var(--border-strong);border-radius:.8rem;padding:1rem 1.1rem;font-size:.92rem;line-height:1.65;color:var(--text)}
.consigne .entete{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.tableau-wrap{overflow-x:auto}
.tableau{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--card);border:1px solid var(--border);border-radius:1rem;overflow:hidden}
.tableau th,.tableau td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--border);vertical-align:top}
.tableau th{color:var(--amber-l);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.tableau td{color:var(--text2)}
.tableau td:first-child{color:var(--text);font-weight:500}
.tableau td.v{text-align:right;white-space:nowrap;color:var(--text);font-weight:600}
.tableau tr.total td{border-bottom:none;background:var(--amber-pale);color:var(--amber-l);font-weight:700}
.photo{width:100%;border-radius:1rem;object-fit:cover;display:block;border:1px solid var(--border)}
.vignette{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:.5rem;cursor:zoom-in;font-family:inherit;color:var(--text2);font-size:.82rem;text-align:center;display:block;width:100%}
.vignette img{width:100%;max-height:36vh;object-fit:cover;object-position:top;border-radius:.6rem;display:block;margin-bottom:.4rem;background:#fff}
.vignette:hover{border-color:var(--amber)}
.video{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:.7rem}
.video video{width:100%;max-height:44vh;border-radius:.6rem;display:block;background:#000}

/* ── Boutons ── */
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:inherit;font-weight:600;font-size:.88rem;border-radius:2rem;padding:.58rem 1.1rem;text-decoration:none;cursor:pointer;border:1px solid var(--amber);background:var(--amber);color:#2a1a00;line-height:1.2}
.btn:hover{background:var(--amber-l)}
.btn.contour{background:none;color:var(--text);border-color:var(--border-strong)}
.btn.contour:hover{border-color:var(--amber);color:var(--amber-l)}
.btn.methode{background:var(--cyan-pale);color:var(--cyan-l);border-color:rgba(6,182,212,.4)}
.btn.methode:hover{background:var(--cyan);color:#05232a}

/* ── Formulaires (ateliers) ── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .8rem}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:.76rem;font-weight:600;color:var(--text);margin-bottom:.25rem}
.form label span{font-weight:300;color:var(--muted)}
.form input,.form textarea,.form select{width:100%;padding:.5rem .7rem;border:1px solid var(--border-strong);border-radius:.6rem;font-family:inherit;font-size:.86rem;background:var(--card);color:var(--text)}
.form textarea{min-height:3.6rem;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--amber)}
.sortie{white-space:pre-wrap;background:var(--card);border:1px dashed var(--border-strong);border-radius:.8rem;padding:.9rem 1rem;font-size:.82rem;line-height:1.6;color:var(--text);font-family:Consolas,'Courier New',monospace;max-height:46vh;overflow:auto}

/* ── Fenêtres ── */
dialog{margin:auto;background:var(--card2);color:var(--text);border:1px solid var(--border-strong);border-radius:1.1rem;box-shadow:0 24px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(5,4,15,.78);backdrop-filter:blur(4px)}
dialog.fenetre{width:min(820px,92vw);max-height:86vh;padding:0;flex-direction:column}
dialog.fenetre[open]{display:flex;animation:entree .25s ease}
.m-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem;border-bottom:1px solid var(--border);flex:0 0 auto}
.m-tete h3{font-size:1.1rem;font-weight:700;line-height:1.3}
.m-fermer{background:none;border:1px solid var(--border-strong);width:34px;height:34px;border-radius:50%;color:var(--text2);cursor:pointer;font-size:1rem;flex:0 0 auto}
.m-fermer:hover{background:var(--amber);color:#2a1a00;border-color:var(--amber)}
.m-corps{padding:1.2rem 1.5rem 1.6rem;display:grid;gap:1.2rem;overflow:auto}
.m-corps h4{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:.5rem}
.m-corps p,.m-corps li{font-size:.93rem;color:var(--text2);line-height:1.6}
.m-corps p + p{margin-top:.5rem}
.m-corps ol,.m-corps ul{padding-left:1.2rem;display:grid;gap:.35rem}
.m-corps a{color:var(--cyan-l)}
.prompt{white-space:pre-wrap;background:var(--card);border:1px dashed var(--border-strong);border-radius:.8rem;padding:1rem 1.1rem;font-size:.86rem;line-height:1.6;color:var(--text)}
.copier{margin-top:.6rem;font-family:inherit;font-size:.84rem;font-weight:600;background:var(--amber);color:#2a1a00;border:1px solid var(--amber);border-radius:2rem;padding:.45rem 1rem;cursor:pointer}
.copier:hover{background:var(--amber-l)}
dialog.image{max-width:94vw;max-height:92vh;padding:.6rem}
dialog.image img{display:block;max-width:calc(94vw - 1.2rem);max-height:calc(92vh - 3.4rem);border-radius:.6rem;background:#fff}
dialog.image p{font-size:.85rem;color:var(--text2);text-align:center;padding:.5rem 0 .1rem}

/* ── Navigation ── */
.nav{position:fixed;bottom:1.3rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.9rem;z-index:50;background:rgba(26,23,53,.92);border:1px solid var(--border);border-radius:2rem;padding:.4rem .7rem}
.nav button{background:none;border:1px solid var(--border-strong);width:33px;height:33px;border-radius:50%;cursor:pointer;color:var(--text2);font-size:.9rem}
.nav button:hover{background:var(--amber);color:#2a1a00;border-color:var(--amber)}
.nav button:disabled{opacity:.3;cursor:default}
.pts{display:flex;gap:6px}
.pts i{width:7px;height:7px;border-radius:50%;background:var(--border-strong);cursor:pointer}
.pts i.actif{background:var(--amber);transform:scale(1.4)}

/* Impression : toutes les diapos à la suite, une par page */
@media print{
  html,body{overflow:visible;height:auto}
  .slide{display:flex!important;position:relative;inset:auto;min-height:0;padding:1.2rem 1.5rem;break-after:page;animation:none}
  .nav,.haut,.actions,dialog{display:none!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media(max-width:800px){
  html,body{overflow:auto}
  .slide{position:relative;padding:4rem 1rem 6rem;min-height:100vh}
  .slide:not(.active){display:none}
  .deux,.deux.egal,.duo,.tuiles,.cartes,.cartes.deux-col,.cartes.quatre,.chiffres.trois,.chiffres.quatre,.form{grid-template-columns:1fr}
  .vignette img{max-height:none}
}