/* Support oral E33 — lecteur web.
   Meme palette que le site du magasin (vert Terrena, encre, fond) et que le
   PPTX : l'eleve qui projette son diaporama et l'eleve qui ouvrent la page
   voient le meme document. */

:root{
  --vert:#0b4933; --encre:#1c1c19; --gris:#6d7772; --fond:#f7f8fa;
  --carte:#fff; --bord:#dde5e0; --sable:#fdf8f0; --ambre:#8a5a1f; --clair:#eaf3ee;
}
*{box-sizing:border-box}
body{margin:0;background:#e9edeb;color:var(--encre);
     font-family:Calibri,"Segoe UI",Verdana,sans-serif;font-size:16px;line-height:1.4}

/* ------------------------------------------------------------ barre d'outils */
.barre{display:flex;align-items:center;gap:.8em;flex-wrap:wrap;
  background:var(--vert);color:#fff;padding:.5em 1em;position:sticky;top:0;z-index:5}
.barre .marque{font-weight:700;letter-spacing:.06em}
.barre .marque em{color:#5eaf32;font-style:normal}
.barre .titre{opacity:.85;font-size:.9rem}
.barre .ou{margin-left:auto}
.barre select{font:inherit;padding:.2em .4em;border-radius:6px;border:1px solid #cfe3d8}
.barre .nav{display:flex;align-items:center;gap:.4em}
.barre button{font:inherit;padding:.25em .8em;border-radius:6px;border:1px solid #cfe3d8;
  background:#fff;color:var(--vert);cursor:pointer}
.barre button:hover{background:var(--clair)}
.barre #compteur{font-variant-numeric:tabular-nums;opacity:.85;min-width:5.5em;text-align:center}
.barre .fichiers{font-size:.82rem;opacity:.9}
.barre .fichiers a{color:#fff}
.mini{max-width:13.3in;margin:.6em auto 2em;padding:0 1em;color:#3d4a44;font-size:.85rem}
.pas-imprimer{display:block}

/* ------------------------------------------------------------------ la scene */
#scene{max-width:13.3in;margin:1em auto;padding:0 1em}
.diapo{position:relative;width:100%;aspect-ratio:16/9;background:var(--fond);
  border:1px solid var(--bord);border-radius:10px;overflow:hidden;
  box-shadow:0 2px 10px rgba(20,40,30,.10);margin-bottom:1em;padding:4% 4.2%}
.diapo.sombre{background:var(--vert);color:#fff}
.diapo .sur{font-size:.78em;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--vert)}
.diapo.sombre .sur{color:#5eaf32}
.diapo h2{font-family:Cambria,"Palatino Linotype",Georgia,serif;font-weight:700;
  color:var(--vert);font-size:2.05em;margin:.15em 0 .5em;line-height:1.1}
.diapo.sombre h2{color:#fff}
.diapo .note{color:var(--gris);font-style:italic;font-size:.85em;margin:0 0 1em}
.diapo .pied{position:absolute;left:4.2%;right:4.2%;bottom:3.2%;font-size:.72em;color:var(--gris)}
.diapo.sombre .pied{color:#9fb8ae}

/* diapo de titre */
.diapo.titre h1{font-family:Cambria,"Palatino Linotype",Georgia,serif;color:#fff;
  font-size:3.4em;margin:.15em 0 .3em;line-height:1.05}
.diapo.titre .sous{color:#cadcfc;font-size:1.15em;margin:0 0 2em}
.diapo.titre .carte{background:rgba(255,255,255,.12);border-radius:.5em;
  padding:1.1em 1.4em;max-width:80%}
.diapo.titre .carte strong{display:block;font-size:1.25em;color:#fff;margin-bottom:.3em}
.diapo.titre .carte span{display:block;color:#cadcfc;font-size:.9em}

/* grilles de cartes */
.grille{display:grid;gap:1em}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.carte-boite{background:var(--carte);border:1px solid var(--bord);border-radius:.5em;
  padding:.9em 1.05em;min-height:9.5em}
.carte-boite.sable{background:var(--sable);border-color:#e2c9a4}
.carte-boite h3{margin:0 0 .5em;font-size:1.05em;color:var(--vert);display:flex;gap:.5em;align-items:center}
.carte-boite .num{display:inline-grid;place-items:center;width:1.6em;height:1.6em;flex:0 0 auto;
  border-radius:50%;background:var(--vert);color:#fff;font-size:.85em}
.carte-boite p{margin:0;font-size:.9em}

/* grandes stats */
.stats{display:grid;gap:.55em}
.stat{display:flex;align-items:baseline;gap:.8em}
.stat .v{font-family:Cambria,Georgia,serif;font-weight:700;color:var(--vert);
  font-size:2.6em;line-height:1;min-width:4.6em}
.stat .l{font-size:.95em}

/* donut en conic-gradient : un diagramme sans librairie */
.donut-wrap{display:flex;gap:1.4em;align-items:center}
.donut{width:15em;height:15em;border-radius:50%;flex:0 0 auto;position:relative}
.donut::after{content:"";position:absolute;inset:28%;border-radius:50%;background:var(--fond)}
.legende{list-style:none;margin:0;padding:0;font-size:.85em}
.legende li{display:flex;align-items:center;gap:.5em;margin-bottom:.35em}
.legende i{width:.9em;height:.9em;border-radius:2px;flex:0 0 auto}

/* lignes de concurrence */
.ligne{display:flex;gap:1.2em;background:var(--carte);border:1px solid var(--bord);
  border-radius:.5em;padding:.7em 1em;margin-bottom:.7em;align-items:baseline}
.ligne.sable{background:var(--sable);border-color:#e2c9a4}
.ligne .nom{font-weight:700;color:var(--vert);flex:0 0 22%}
.ligne .ou{font-style:italic;color:var(--ambre);flex:0 0 24%;font-size:.85em}
.ligne .det{font-size:.92em}
.chiffre-fort{font-weight:700;color:var(--vert)}

/* deux colonnes de puce */
.col2{display:grid;grid-template-columns:1fr 1fr;gap:1.2em}
ul.puces{margin:0;padding-left:1.15em;font-size:.92em}
ul.puces li{margin-bottom:.5em}

/* actions */
.action-boite{border-radius:.5em;padding:1em 1.15em;min-height:17em}
.action-boite.pleine{background:var(--vert);color:var(--clair)}
.action-boite.pleine h3{color:#fff}
.action-boite h3{margin:0 0 .8em;font-size:1.05em;color:var(--vert)}

/* diapo finale */
.diapo.sombre .boites{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;margin:1.2em 0}
.diapo.sombre .boite{background:#fff;border-radius:.5em;padding:.9em 1em;color:var(--encre)}
.diapo.sombre .boite .v{font-family:Cambria,Georgia,serif;font-weight:700;color:var(--vert);
  font-size:2.1em;line-height:1.05}
.diapo.sombre .boite .l{font-size:.88em;margin-top:.3em}
.diapo.sombre .boite .q{font-size:.78em;font-style:italic;color:var(--gris);margin-top:.3em}
.diapo.sombre .mesure{font-size:1em;color:var(--clair);max-width:80%}
.diapo.sombre .idee{font-size:.9em;color:var(--clair);font-style:italic;max-width:80%;margin:.6em 0 0}

/* ------------------------------------------------------------------ impression */
@media print{
  @page{size:A4 landscape;margin:8mm}
  body{background:#fff}
  .pas-imprimer{display:none}
  #scene{margin:0;padding:0;max-width:none}
  .diapo{break-after:page;box-shadow:none;border:none;border-radius:0;
    aspect-ratio:auto;height:175mm;padding:8mm 10mm}
  .diapo:last-child{break-after:auto}
}