body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #fafafa, #f3f3f3);
  color: #222;
  margin: 0;
}

.container {
  max-width: 760px;
  margin: 60px auto;
  padding: 32px 28px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

h1 {
  font-size: 2.3rem;
  margin-bottom: 32px;
  text-align: center;
}

h2 {
  font-size: 1.4rem;
  margin-top: 40px;
  margin-bottom: 16px;
  border-left: 4px solid #6366f1;
  padding-left: 12px;
}

p, li {
  line-height: 1.6;
}

ul {
  padding-left: 18px;
}

li {
  margin-bottom: 6px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none;
  color: #1f2937;
  font-weight: 500;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  transition: 
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.btn:hover {
  background: #eef2ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.card {
  margin-top: 32px;
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: 
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  cursor: pointer;
}

.card:hover{
  background: #eef2ff;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.25);
}

.interaction-images {
  display: flex;
  flex-wrap: wrap;         /* permet de passer à la ligne suivante */
  justify-content: space-between;
  gap: 16px;               /* espace constant */
  margin-top: 16px;
}

.interaction-images img {
  flex: 0 0 48%;           /* fixe largeur pour deux par ligne */
  max-width: 48%;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.interaction-images img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  display: block;
  margin: 5% auto;
  max-width: 90%;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.brainstorm-board {
  position: relative;
  margin-top: 30px;
  min-height: 900px; /* plus grand car 16 post-its */
  background: #f8fafc;
  border-radius: 12px;
  padding: 40px;
  overflow: hidden;
}

/* Style général */
.postit {
  position: absolute;
  width: 170px;
  border-radius: 6px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Hover */
.postit:hover {
  transform: scale(1.15) rotate(0deg);
  z-index: 100;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

/* Positionnement scattered */

/* Ligne 1 */
.board-1 .p1  { top: 40px;  left: 60px;  transform: rotate(-8deg); }
.board-1 .p2  { top: 80px;  left: 280px; transform: rotate(6deg); }
.board-1 .p3  { top: 20px;  left: 520px; transform: rotate(12deg); }
.board-1 .p4  { top: 120px; left: 720px; transform: rotate(-5deg); }

/* Ligne 2 */
.board-1 .p5  { top: 260px; left: 100px; transform: rotate(10deg); }
.board-1 .p6  { top: 320px; left: 350px; transform: rotate(-7deg); }
.board-1 .p7  { top: 250px; left: 600px; transform: rotate(5deg); }
.board-1 .p8  { top: 360px; left: 820px; transform: rotate(-12deg); }

/* Ligne 3 */
.board-1 .p9  { top: 500px; left: 70px;  transform: rotate(8deg); }
.board-1 .p10 { top: 560px; left: 300px; transform: rotate(-6deg); }
.board-1 .p11 { top: 480px; left: 540px; transform: rotate(14deg); }
.board-1 .p12 { top: 620px; left: 760px; transform: rotate(-9deg); }

/* Ligne 4 */
.board-1 .p13 { top: 720px; left: 140px; transform: rotate(-4deg); }
.board-1 .p14 { top: 760px; left: 400px; transform: rotate(11deg); }
.board-1 .p15 { top: 700px; left: 640px; transform: rotate(-10deg); }
.board-1 .p16 { top: 820px; left: 880px; transform: rotate(7deg); }

.board-2 .p17 { top: 50px;  left: 100px; transform: rotate(-6deg); }
.board-2 .p18 { top: 90px;  left: 300px; transform: rotate(8deg); }
.board-2 .p19 { top: 40px;  left: 500px; transform: rotate(-12deg); }
.board-2 .p20 { top: 130px; left: 680px; transform: rotate(5deg); }

.board-2 .p21 { top: 260px; left: 80px;  transform: rotate(10deg); }
.board-2 .p22 { top: 330px; left: 260px; transform: rotate(-7deg); }
.board-2 .p23 { top: 270px; left: 450px; transform: rotate(6deg); }
.board-2 .p24 { top: 350px; left: 630px; transform: rotate(-9deg); }

.board-2 .p25 { top: 500px; left: 120px; transform: rotate(4deg); }
.board-2 .p26 { top: 570px; left: 300px; transform: rotate(-11deg); }
.board-2 .p27 { top: 480px; left: 480px; transform: rotate(9deg); }
.board-2 .p28 { top: 620px; left: 660px; transform: rotate(-5deg); }

.board-2 .p29 { top: 720px; left: 90px;  transform: rotate(-8deg); }
.board-2 .p30 { top: 780px; left: 270px; transform: rotate(12deg); }
.board-2 .p31 { top: 700px; left: 450px; transform: rotate(-4deg); }
.board-2 .p32 { top: 830px; left: 630px; transform: rotate(7deg); }

.board-3 .p34 { top: 20px; left: 5%; transform: rotate(-12deg); }
.board-3 .p35 { top: 60px; left: 30%; transform: rotate(8deg); }
.board-3 .p36 { top: 10px; left: 55%; transform: rotate(-6deg); }
.board-3 .p37 { top: 90px; left: 75%; transform: rotate(14deg); }

.board-3 .p38 { top: 200px; left: 15%; transform: rotate(-18deg); }
.board-3 .p39 { top: 240px; left: 40%; transform: rotate(10deg); }
.board-3 .p40 { top: 180px; left: 65%; transform: rotate(-9deg); }

.board-3 .p41 { top: 360px; left: 8%; transform: rotate(16deg); }
.board-3 .p42 { top: 400px; left: 35%; transform: rotate(-7deg); }
.board-3 .p43 { top: 380px; left: 60%; transform: rotate(5deg); }

.board-3 .p44 { top: 520px; left: 20%; transform: rotate(-14deg); }
.board-3 .p45 { top: 540px; left: 50%; transform: rotate(12deg); }
.board-3 .p46 { top: 600px; left: 75%; transform: rotate(-5deg); }

.brainstorm-board {
  overflow-x: auto;
}

.video-btn {
    background-color: #007BFF; /* bleu pro */
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.video-btn:hover {
    background-color: #0056b3;
}

.video-btn:active {
    transform: scale(0.95);
}


.video-btn span {
    display: inline-block;
    width: 0; 
    height: 0;
}

.play-icon {
    border-left: 12px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.pause-icon {
    width: 12px;
    height: 12px;
    background-color: white;
    position: relative;
}

.pause-icon::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    width: 4px;
    height: 12px;
    background-color: #007BFF; /* bleu pour effet */
}